사용자 정의 글꼴 렌더링 문제

그래서 가끔 이런 식으로 특정 단어를 강조하고 싶은 :사용자 정의 글꼴 렌더링 문제

<h1>I want to <span class="emphasis">emphasize</span> some text.</h1>

을 동시에, 나는 H1 텍스트에 대한 사용자 지정 글꼴을 사용하고 싶습니다 :

@font-face 
{ 
    font-family: 'MuseoSlab'; 
    src: url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.eot'); 
    src: url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.eot?#iefix') format("embedded-opentype"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.svg#MuseoSlab500Regular') format("svg"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.woff') format("woff"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.ttf') format("truetype"); 
    font-weight: normal; 
    font-style: normal; 
}

Example here.

Windows의 Chrome이 스팬 텍스트와 중복됩니다.

파이어 폭스와 IE 원활 폰트 렌더링하지 않는 것 : looks jagged

오페라 보인다

내가 원하는 방식으로 렌더링 :

enter image description here

사람이 말할 수를 나에게 무슨 일이 벌어지고 어떻게 이러한 문제를 해결할 수 있을까?

편집 : 내가 가지고있는 경우에

그 크롬에서 악명 문제; 때때로 나는하지 않는다.

enter image description here

출처

2013-04-13 wrongusername

Chrome에서 완벽하게 작동합니다. http://i.imgur.com/Hf2MONa.png –

대답이 아니지만 @ 화면 2와 3 : 글꼴 (시스템 글꼴 제외)이 모든 에이전트 (브라우저, OS, 장치 등)에서 동일합니다. –

@DannyBeckett Weird, 방금 JSFiddle 링크를 다시 열었습니다. 그 현상은 사라졌습니다. 나는 심지어 내 크롬을 업데이 트하지 않았다 ... – wrongusername

파이어 폭스와 IE 그들이 할 방법이 h1 요소는 기본적으로 font-weight: bold 가지고 있다는 것입니다 글꼴을 보여 이유, 당신은 normal 무게로 폰트를 선언된다 : 그리고 나도, 최신 크롬이 설치되어 . 이 브라우저가하는 일은 논란의 여지가 있지만, 대담한 서체가 없기 때문에 알고리즘으로 글자를 굵게 표시합니다.

이를 피하려면 h1 { font-weight: normal; }을 추가하십시오. 또는 글꼴 패밀리의 굵은 글꼴을 사용하십시오.

크롬에 이상한 오버랩은 설치 관련 문제로 들리므로 Chrome을 업데이트하거나 다시 설치하는 것이 좋습니다.

출처

2013-04-14 05:52:48

Firefox 및 IE 렌더링에 대한 설명 주셔서 감사합니다! 그리고 크롬에 관해서는, 그의 노트북에있는 이상하게도 내 친구는 같은 효과를 경험했기 때문에 이것이 다소 광범위한 문제 일 수 있다고 우려하고 있습니다. – wrongusername

한 번 Chrome에서 정확히 동일한 문제가있었습니다. 그것은 크롬에서 SVG 글꼴의 렌더링과 관련이있는 것으로 보입니다. @font-face에있는 글꼴 파일의 순서를 변경하여 SVG가 목록의 끝에 오면 문제가 사라집니다. jsfiddle에 대한 귀하의 예는 여전히 현재 버전의 Chrome (29.0.1547.76)에서 잘못 렌더링되므로 렌더링 버그가 여전히 존재합니다.

출처

2013-10-06 14:43:57 erikvdv1

는 희망이 미래에 누군가가 도움이되지만 나는 다음과 같은 문제의 해결에 따라이 문제를 해결 할 수 있었다 : Chrome svg-Font-Rendering breaks Layout

이 성공적으로 레이아웃을 깨는 및/또는 첨벙 첨벙없이 비 부드러운 가장자리를 고정을 글꼴.

출처

2013-12-12 06:32:07

사용자 정의 글꼴 렌더링 문제

답변

관련 문제