크롬에서의 웹 글꼴 렌더링

저는 비즈니스를위한 웹 사이트를 만들고 있으며 완전히 새로운 브랜드와 새로운 로고를 사용하고 있습니다. 로고는 페이지 제목 등에서 사이트 전체에 에코를 적용 할 수있는 멋진 글꼴을 특징으로하므로 ttf를 가져 와서 font2web.com을 통해 실행하고 글꼴의 생성 된 버전 (eot, woff, svg 등)을 생성 된 CSS @ font-face 규칙을 내 코드에 추가하고이를 사용하기 시작했습니다. Safari는 IE, Firefox, Safari 및 Safari의 iPad에서 글꼴 모양이 멋지게 보입니다. 하지만 크롬에서는? 절대적으로 끔찍한 것처럼 보입니다. 모든 세부 사항은 사라지고 문자는 흰색 블록으로 바뀝니다. 여기 크롬에서의 웹 글꼴 렌더링

는 스크린 샷입니다 -> http://i.imgur.com/Vp6kmxZ.png

여기 (액체 태그) 내 CSS - 당신이 정확한 글꼴을 원하는 경우>

@font-face { 
font-family: 'MotionPicture'; 
    src: url({{ 'MotionPicture.eot' | asset_url }}); 
    src: local('☺'), url({{ 'MotionPicture.woff' | asset_url }}) format('woff'), 
    url({{ 'MotionPicture.svg' | asset_url }}) format('svg'), 
    url({{ 'MotionPicture.ttf' | asset_url }}) format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
}

여기를 얻을 수 있습니다 ->http://www.dafont.com/motion-picture.font

을

Google에서 발견 한 트릭을 몇 가지 시도해 보았습니다. 크롬에서 AA 트루 타입 글꼴을 사용할 수 없기 때문에 SVG 버전을 글꼴의 맨 위로 이동했지만 차이는 없습니다.

이것이 어떤 방식 으로든 받아 들여질 수 있는지, 아니면 내가 정말로 원하지 않는 이미지 기반 헤더에 의존해야 할 것인가.

건배 모두, - 벤.

출처

2013-08-22 Ben Wedlake

Windows의 Chrome에서 알려진 문제입니다. 당신이 시도 할 수 https://code.google.com/p/chromium/issues/detail?id=137692

출처

2013-08-22 15:29:40 ericjbasti

일부 CSS는

-webkit-font-smoothing: subpixel-antialiased; 
    -webkit-text-stroke: 0px; 
    letter-spacing: 2px;

출처

2013-08-22 15:33:01

나는 ondomready 페이지의 재 묘화를 강제로이 문제를 해결할 수 있었다. jQuery를 사용

$(function({ 
    $('#page').hide(); 
    setTimeout(function() { 
     $('#page').show(); 
    }, 0); 
});

출처

2014-03-05 03:31:47

크롬에서의 웹 글꼴 렌더링

답변

관련 문제