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에서 못생긴 글꼴 렌더링을 수정하는 방법을 살펴보십시오 . 이에 대한 뉴스가 있으면 뉴스를 게시하겠습니다.

내 원래 답변 :

이것은 Chrome의 큰 버그이며 Chrome 팀은 이에 대해 알고 있습니다 . 여기 에서 공식 버그 보고서를 참조 하십시오 . 현재 버그가보고 된 지 11 개월이 지난 2013 년 5 월에는 해결되지 않았습니다. 구글 웹 폰트를 엉망으로 만드는 유일한 브라우저가 구글 자신의 브라우저 크롬 (!)이라는 것은 이상한 일이다. 그러나 문제를 해결하는 간단한 해결 방법이 있습니다. 해결책은 아래를 참조하십시오.

Google 크롬 개발팀의 진술, 2013 년 5 월

버그 리포트의 공식 설명 :

우리의 Windows 글꼴 렌더링이 활발히 진행되고 있습니다. ... 우리는 개발자들이 함께 시작할 수있는 이정표 안에 무언가를 갖기를 바랍니다. 그것이 얼마나 빨리 안정 되느냐는 우리가 얼마나 빨리 회귀를 근절하고 태울 수 있는지에 관한 것입니다.

나는 같은 문제가 있었고 Sam Goddard 의이 게시물 에서 해결책을 찾았습니다 .

글꼴에 대한 호출을 두 번 정의한 경우 솔루션 입니다. 먼저 모든 브라우저에 사용하고 특별한 미디어 쿼리가있는 Chrome 전용 호출 후에 사용하는 것이 좋습니다.

@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');
  }
}

이 방법을 사용하면 모든 브라우저에서 글꼴이 제대로 렌더링됩니다. 내가 찾은 유일한 단점은 글꼴 파일도 두 번 다운로드된다는 것입니다.

내 페이지에서이 기사 의 스페인어 버전을 찾을 수 있습니다 .

Chrome은 Firefox 또는 다른 브라우저와 같은 글꼴을 렌더링하지 않습니다. 이것은 일반적으로 Windows에서만 실행되는 Chrome의 문제입니다. 글꼴을 부드럽게 만들려면 이와 같은 -webkit-font-smoothingyer h4태그 의 속성을 사용하십시오 .

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

을 사용할 수도 있습니다 subpixel-antialiased. 이렇게하면 다른 유형의 다듬기 (텍스트가 약간 흐릿하거나 어두워 짐)가 나타납니다. 그러나 효과를 보려면 야간 버전이 필요합니다. 글꼴 다듬기에 대한 자세한 내용은 여기를 참조하십시오 .

이걸 간단하게 사용할 수 있습니다

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

텍스트 색상과 상단 텍스트 스트로크 너비가 같아야합니다.

나는 이것이 항상 작동하지 않을 것이라고 모든 것을 말할 것이다. 나는 이것을 sans-serif글꼴과 같은 외부 글꼴로 테스트했다.open sans

때로는 큰 글꼴을 사용할 때 근사치 font-size:49px와 상단 을 시도하십시오.

텍스트 font-size:48px;가 포함 된 요소에서 크기가 48px 인 헤더 텍스트입니다 .

그러나 48px font-size:49px;(및 50px, 60px, 80px 등) 까지 올리면 흥미로운 일이 발생합니다.

텍스트가 자동으로 매끄럽고 정말 좋아 보입니다.

다른 쪽을 위해 ...

작은 글꼴을 찾고 있다면 이것을 시도해 볼 수 있지만 그다지 효과적이지 않습니다.

텍스트의 부모에게 다음 CSS 속성을 적용하십시오. -webkit-backface-visibility: hidden;

다음과 같이 변환 할 수 있습니다.

이에:

(글꼴은 Kreon)

당신이 그 속성을 넣어하지 않을 때, 것을 고려 -webkit-backface-visibility: visible;상속입니다

그러나 주의 깊게 보시면 Chrome이 텍스트를 약간 흐리게 보이게 만듭니다.

또 다른 흥미로운 사실 ​​:

-webkit-backface-visibility: hidden;Chrome에서 텍스트를 변환 할 때도 작동합니다 ( -webkit-transform회전, 기울이기 등 의 속성 포함)

없이 -webkit-backface-visibility: hidden;

와 -webkit-backface-visibility: hidden;

글쎄, 그 관행이 왜 효과가 있는지 모르겠지만 그것은 나를 위해합니다. 이상한 영어로 죄송합니다.