크롬 브라우저의 글꼴 너비가 다른 경우

Question

내 사이트의 일부 텍스트가 이상하게 Chrome의 두 행으로 분리되어 있습니다. FF와 IE에서 그것은 단일 행에 적절하게 맞습니다. 브라우저마다 고유 한 글꼴 렌더링 방법이있을 수 있습니다. 해결 방법이 있습니까?

HTML :

<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'> 
<div class="text-centered span3">       
    <p>Wnii tagfF rouirsoSan olwre.i dlyrbr peato.</p>      
</div> 

CSS :

.span3 { 
    width: 240px; 
} 
p { 
    font-family: 'Signika'; 
    font-size: 13px; 
} 

링크 바이올린 : http://jsfiddle.net/yishaib/Qqgxt/

* 물론, 내가 텍스트를 스크램블했습니다.

Answer 1

은 글꼴 크로스 브라우저/크로스 운영 체제 동일하게 표시 할 수있는 방법이 없습니다. http://blog.typekit.com/2010/12/17/type-rendering-review-and-fonts-that-render-well/ 및 http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/

모든 위대한 웹 브라우저가 명시 적으로 생활에 호흡 웹 사이트 우리의 마크 업, 스타일 시트, 스크립트를 설정하는 방법 결정하는 레이아웃 엔진을 가지고 :

Typekit 주제에 대한 기사를 발표했다.

이제 컴퓨터에 설치되어 있지 않은 글꼴을 표시하려고하면 브라우저에서 렌더링 성능이 저하되어 '브라우저'에서 선택할 글꼴이 표시됩니다. 대부분 'serif'- 'sans-serif'- 'monospace'에서 결정합니다.

@ font-face를 사용하여 외부 소스 (typekit - googlefonts - etc)와 같은 글꼴을 연결하면 브라우저는 그들이 얻은 글꼴을 ressource로 렌더링합니다. 모든 브라우저는 자신의 콘텐츠를 '표시'합니다 (이미지라고합시다).

이미지는 렌더링 엔진과 마주 치는 사람이 픽셀, 픽셀 깊이, 해상도, 언어 및 수천 개의 요소를 처리해야하므로 브라우저와 브라우저에서 동일한 색상을 갖지 않습니다. 망막 사람?

Answer 2

글꼴이 다른 렌더링 엔진을 사용하는 모든 브라우저에서 동일하게 렌더링되는 것은 분명한 이유입니다.

그러나 귀하의 경우에는 문자 간격으로 문제를 해결할 수 있습니다. 이상적은 아니지만 글자 간격을 1 픽셀로 설정하여 Chrome에서 한 줄에 텍스트를 유지할 수 있습니다.

CSS

p { 
font-family: 'Signika'; 
font-size: 13px; 
letter-spacing: -1px; 
} 

Answer 3

내가 크롬에서 확인하고 나는이 문제를 해결했습니다 내가 @import, 링크 없음 심판을 사용했습니다

합니다.

내 바이올린을 확인합니다

http://jsfiddle.net/Qqgxt/12/

@import url(http://fonts.googleapis.com/css?family=Signika); 

Answer 4

그래, 글꼴 렌더링은 큰 문제 일 수 있으며 일반적으로 수정하기가 어렵습니다. 다른 문제는 "Signika"가 Google 크롬에서 인정하는 웹 글꼴이 아니라는 것입니다. 글꼴 파일을 가지고 있다면 Google 글꼴을 통해 글꼴 파일을 가져와보십시오.