같은 글꼴, 문자 간격 및 선 높이 그러나 다른 결과

CSS3에서 @ font-face를 사용하면 웹 디자이너가 모든 브라우저에서 동일하게 보이는 글꼴을 사용할 수 있습니다.같은 글꼴, 문자 간격 및 선 높이 그러나 다른 결과

HTML :

<div> 
    The_Quick_Brown<br> 
    Fox_Jumps_Over<br> 
    The_Lazy_Dog 
</div>

CSS :

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'); 
} 

div { 
    display: block; 
    width: 496px; 
    height: 86px; 
    font-size: 1.3em; 
    font-family: 'Open Sans'; 
    font-style: normal; 
    margin: 0; 
    border: 0; 
    padding: 0; 
    background: cyan; 
    letter-spacing: 1.44em; 
    line-height: 1.44; 
    overflow: hidden; 
}

Firefox 12.0

이는입니다 그건 내가 jsFiddle에 다음 코드를 시도 할 때까지 무슨 생각입니다 Firefox 12.0에서보기. 부분적으로 가려져있는 '갈색'의 'o', '개'의 'g'위치, 아래쪽의 '_'의 밑줄을 메모하십시오.

Google Chrome 19.0

이

구글 크롬 19.0에서보기입니다.

동일한 글꼴에 대해 letter-spacing과 line-height을 명시 적으로 설정 했는데도 결과가 여전히 다른 이유는 무엇입니까?

출처

2012-06-05 Question Overflow

div 렌더링과 그 안에 내용과 관련이있을 수 있습니다. * MAYBE * – Playmaker

글꼴 렌더링은 브라우저의 렌더링 방식에 따라 달라집니다. 그리고 브라우저 때문에'letter-space '도 다르게 렌더링됩니다. 나는 FF에서'monospace' 폰트를 사용할 때 FF가'monospace' 폰트를 적절하게 지원하지 않기 때문에 원하는 결과를 얻지 못한다는 것을 알아 챘습니다. 여기 비슷한 일이있을 수 있습니까? – sarcastyx

크롬에서 FF보다 문자가 조금 더 크고 좁아 보입니다. – Brilliand

코드가 정확합니다. 문제는 브라우저/각 브라우저 (브라우저 렌더링 엔진이 구체적 임)가 콘텐츠를 다른 방식으로 렌더링합니다. 항상 각 브라우저에서 똑같은 출력을 얻지 못할 수도 있습니다. 기능과 다른 모든 블링은 동일 할 수도 있지만 웹 페이지 렌더링과 관련하여 거의 항상 다른 이야기입니다.

출처

2012-06-05 06:35:48 JudeJitsu

우리는이 문제에서 할 일이별로 없습니다. 그것의 전적으로 브라우저의 텍스트 렌더링 엔진에 따라 다릅니다. 모든 단일 브라우저는 텍스트를 다르게 렌더링합니다.

출처

2012-06-05 06:36:26 maksbd19

같은 글꼴, 문자 간격 및 선 높이 그러나 다른 결과

답변

관련 문제