Chrome에 "글꼴 다듬기"가 있습니까?

Chrome에 "글꼴 다듬기"가 있습니까?

---

Google 웹 글꼴을 사용하고 있으며 초대형 글꼴 크기에서는 좋지만 18px에서는 끔찍합니다. 나는 여기저기서 글꼴 스무딩을위한 솔루션이 있다는 것을 읽었지만 그것을 명확하게 설명하는 곳을 찾지 못했고 내가 찾은 스 니펫이 전혀 작동하지 않습니다.

내 h4거의 모든 브라우저에서 끔찍한 외모,하지만 크롬은 최악이다. Chrome에서는 거의 모든 글꼴이 끔찍합니다.

누구든지 올바른 방향으로 나를 가리킬 수 있습니까? 아마도 이것을 명확하게 설명하는 자료를 알고 있습니까? 감사!

예 스크린 샷 # 1

이 스크린 샷은 Google에서 만든 프로그래밍 언어 ( https://www.dartlang.org/) 의 홈페이지를 보여 주며, 이 웹 사이트가 Google에서 제작했음을 암시 할 수 있습니다. Google Webfonts를 사용합니다.

스크린 샷은 왼쪽에 Chrome, 오른쪽에 Firefox / Internet Explorer가 표시됩니다. :

예 스크린 샷 # 2

이 스크린 샷은 Typekit에서 제공하는 웹 글꼴을 사용하여 Adobe.com의 제품 정보 페이지를 보여줍니다. 글꼴과 관련하여 Adobe 및 Typekit은 전문가입니다.

스크린 샷은 오른쪽에 Chrome, 왼쪽에 Firefox / Internet Explorer가 표시됩니다.

---

2014 년 6 월 문제 상태 : Chrome 37으로 수정

마지막으로 Chrome 팀 은 2014 년 7 월에 공개 될 Chrome 37의이 문제에 대한 수정 프로그램 을 출시 할 예정입니다. 현재 안정적인 Chrome 35와 최신 Chrome 37 (초기 개발 미리보기) 비교 예는 다음과 같습니다.

2013 년 12 월 이슈 현황

1)이 NO 적절한 솔루션이 때 로딩을 통해 글꼴 @import, <link href=또는 Google의 webfont.js. 문제는 Chrome이 단순히 Google API에서 .woff 파일을 요청 하여 끔찍하게 렌더링한다는 것입니다. 놀랍게도 다른 모든 글꼴 파일 형식은 아름답게 렌더링됩니다. 그러나 렌더링 된 글꼴을 "매끄럽게"만드는 CSS 트릭이 있습니다.이 답변에서 해결 방법을 더 깊이 찾을 수 있습니다.

2.) Jaime Fernandez 가이 Stackoverflow 페이지의 다른 답변에 처음으로 게시 한 글꼴을 자체 호스팅 할 때이를위한 실제 솔루션 이 있습니다.이 문제는 웹 글꼴을 특별한 순서로로드하여이 문제를 해결합니다. 나는 그의 훌륭한 답변을 단순히 복사하는 것이 나쁘다는 것을 느끼기 때문에 거기서 살펴보십시오. 거의 모든 브라우저에서 지원되는 TTF / OTF 글꼴 만 사용하도록 권장하는 (증명되지 않은) 솔루션도 있습니다.

3.) Chrome 개발자 팀이이 문제를 해결합니다. 렌더링 엔진에 몇 가지 큰 변화가 있었으므로 분명히 진행중인 것이 있습니다.

그 문제에 대해 큰 블로그 게시물을 작성 했습니다 .Google 크롬에서 못생긴 글꼴 렌더링을 수정하는 방법을 자유롭게 살펴보십시오.

재현 가능한 예

Chrome 29에서 초기 질문의 예가 ​​오늘 어떻게 보이는지 확인하십시오.

긍정적 인 예 :

왼쪽 : Firefox 23, 오른쪽 : Chrome 29

긍정적 인 예 :

위 : Firefox 23, 아래 : Chrome 29

부정적인 예 : Chrome 30

부정적인 예 : Chrome 29

해결책

-webkit-text-stroke로 위 스크린 샷 수정 :

첫 번째 행은 기본값이고 두 번째 행은 다음과 같습니다.

-webkit-text-stroke: 0.3px;

세 번째 줄에는

-webkit-text-stroke: 0.6px;

글꼴을 수정하는 방법은 단순히 글꼴을 제공하는 것입니다.

-webkit-text-stroke: 0.Xpx;

또는 RGBa 구문 (nezroy의 의견에 있습니다! 감사합니다!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

오래된 가능성도 있습니다 : 텍스트에 간단한 (가짜) 그림자를 넣으십시오.

text-shadow: #fff 0px 1px 1px;

RGBa 솔루션 (Jasper Espejo의 블로그에 있음) :

text-shadow: 0 0 1px rgba(51,51,51,0.2);

나는 이것에 대한 블로그 게시물을 만들었습니다.

이 문제에 대해 업데이트하려면 블로그 게시물 : Chrome에서 못생긴 글꼴 렌더링을 수정하는 방법을 살펴보십시오 . 이에 대한 뉴스가 있으면 뉴스를 게시하겠습니다.

내 원래 답변 :

This is a big bug in Google Chrome and the Google Chrome Team does know about this, see the official bug report here. Currently, in May 2013, even 11 months after the bug was reported, it's not solved. It's a strange thing that the only browser that messes up Google Webfonts is Google's own browser Chrome (!). But there's a simple workaround that will fix the problem, please see below for the solution.

STATEMENT FROM GOOGLE CHROME DEVELOPMENT TEAM, MAY 2013

Official statement in the bug report comments:

Our Windows font rendering is actively being worked on. ... We hope to have something within a milestone or two that developers can start playing with. How fast it goes to stable is, as always, all about how fast we can root out and burn down any regressions.

---

I had the same problem, and I found the solution in this post of Sam Goddard,

The solution if to defined the call to the font twice. First as it is recommended, to be used for all the browsers, and after a particular call only for Chrome with a special media query:

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

With this method the font will render good in all browsers. The only negative point that I found is that the font file is also downloaded twice.

You can find an spanish version of this article in my page

---

Chrome doesn't render the fonts like Firefox or any other browser does. This is generally a problem in Chrome running on Windows only. If you want to make the fonts smooth, use the -webkit-font-smoothing property on yer h4 tags like this.

h4 {
    -webkit-font-smoothing: antialiased;
}

You can also use subpixel-antialiased, this will give you different type of smoothing (making the text a little blurry/shadowed). However, you will need a nightly version to see the effects. You can learn more about font smoothing here.

---

Ok you can use this simply

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

Make sure your text color and upper text-stroke-width must me same and that's it.

---

I will say before all that this will not always works, i have tested this with sans-serif font and external fonts like open sans

Sometimes, when you use huge fonts, try to approximate to font-size:49px and upper

This is a header text with a size of 48px (font-size:48px; in the element that contains the text).

But, if you up the 48px to font-size:49px; (and 50px, 60px, 80px, etc...), something interesting happens

The text automatically get smooth, and seems really good

For another side...

If you are looking for small fonts, you can try this, but isn't very effective.

To the parent of the text, just apply the next css property: -webkit-backface-visibility: hidden;

You can transform something like this:

To this:

(the font is Kreon)

Consider that when you are not putting that property, -webkit-backface-visibility: visible; is inherit

But be careful, that practice will not give always good results, if you see carefully, Chrome just make the text look a little bit blurry.

Another interesting fact:

-webkit-backface-visibility: hidden; will works too when you transform a text in Chrome (with the -webkit-transform property, that includes rotations, skews, etc)

Without -webkit-backface-visibility: hidden;

With -webkit-backface-visibility: hidden;

Well, I don't know why that practices works, but it does for me. Sorry for my weird english.

참고 URL : https://stackoverflow.com/questions/11487427/is-there-any-font-smoothing-in-google-chrome