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

답변

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

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

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