플랫폼마다 글꼴이 다른 이유는 무엇입니까?

는 다음과 같은 예를 생각해 (live demo here)플랫폼마다 글꼴이 다른 이유는 무엇입니까?

HTML :

<label>Name</label>

CSS :

label { 
    font-family: serif; 
    font-size: 16px; 
}

JS :

$(function() { 
    console.log($("label").width()); 
});

나는 윈도우 7에이 예제와를 실행하면 Firefox, 결과는 38입니다. 그러나 Firefox에서 VirtualBox를 사용하여 Ubuntu에서 동일한 예제를 실행하면 결과는 48입니다. 두 경우 모두 Firefox 버전은 7.0.1입니다.

왜 이러한 차이가 있습니까? 내가 어떻게 이것을 동일하게 만들 수 있을까?

출처

2011-11-08 Misha Moroshko

실제 글꼴을 지정하지 않았습니다. "serif"는 serif가있는 글꼴의 메타 이름이며 다른 플랫폼 및 브라우저에서 브라우저의 기본값이 다릅니다.

그러나 다른 글꼴 렌더링으로 인해 어떤 플랫폼 (예 : core fonts for the web의 글꼴)에 존재할 가능성이 높은 글꼴을 지정 했더라도 여전히 결과가 같지 않을 수 있습니다. Windows 글꼴 렌더링은 Mac OS 및 Gnome 등이 덜 적극적인 힌팅을 사용하는 동안 글꼴 양식을 가능한 한 많이 픽셀 그리드에 강제로 적용하는 매우 적극적인 글꼴 힌팅을 수행합니다. 이 효과는 동일한 글꼴 및 크기로 여러 픽셀로 텍스트의 너비가 달라질 수 있습니다.

고정 레이아웃을 사용할 때 레이아웃 문제가 발생하지 않도록하려면 줄 바꿈이나 오버플로를 방지하기 위해 너비가 적어도 10-20px (매우 짧은 텍스트의 경우) 이상이어야합니다.

출처

2011-11-08 05:41:43

'serif'를'Arial'으로 변경하면 문제가 해결됩니다. –

글꼴 렌더링 및 크기 조정은 플랫폼에 따라 다릅니다. "serif"와 같은 일반적인 것을 사용하는 대신 모든 시스템에서 사용할 수있는 글꼴을 사용해보십시오. 아마도 Arial일까요? 번호가 일치하는지 확인하십시오.

또한 픽셀 글꼴 크기가 다를 수 있으므로 브라우저간에 약간의 불일치가 발생할 수 있습니다. 이 문제를 완화하기 위해 CSS 재설정을 조사하고 싶을 수 있습니다.

이 도움이 될 수 있습니다 : http://www.sitepoint.com/css-font-sizing-tutorial/

출처

2011-11-08 05:42:42 Brent

, 일부 브라우저에서, 또한 사용자 정의 글꼴 크기가 있습니다. 따라서 각 브라우저에서 글꼴 크기 설정이 동일한 지 확인할 수 있습니다. (글꼴 크기에 px 대신 em을 사용하는 이유입니다.)

출처

2011-11-08 05:56:44 mafokken

플랫폼마다 글꼴이 다른 이유는 무엇입니까?

답변

관련 문제