글꼴 렌더링 차이: 파이어폭스 vs. IE 대 사파리

CSS를 사용하여 텍스트를 표시할 방법을 선언할 때 다음과 같이 구체화할 수 있습니다.

p {
    font-family: Verdana;
    background-color: #7A2121;
    color: #B93333;
    text-decoration: underline;
    word-spacing: Normal;
    text-align: left;
    letter-spacing: 1px;
    text-indent: 15px;
    line-height: 16px;
    font-size: 10px;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
}

그게 다가 아닙니다. 하지만 그렇게 구체적으로 설명한다고 해도 실제 렌더링된 텍스트가 어떻게 보이는지에 대해서는 브라우저마다 큰 차이가 있습니다. 여기서 중요한 교훈은 여러분이 텍스트에 대해 얼마나 많은 통제력을 발휘하려고 해도, 결국, 여러분은 많은 것을 얻지 못한다는 것입니다. 대부분의 브라우저는 사용자가 즉시 글꼴 설정을 조정하고 재정의할 수 있는 것은 말할 것도 없다.

다음은 여러 브라우저에서 동일한 페이지에 대한 몇 가지 스크린샷입니다.

Mac Firefox 2:

Mac Safari 2: (조금 더 흐릿함)

맥 오페라 9:

Mac IE 5:

PC IE 6(Windows 2000):

PC IE 7:

PC IE 8:

PC 오페라:

PC Firefox:

그 차이는 꽤 미묘해 보이지만, 포토샵에 약간의 불투명성을 적용한 스크린샷을 서로 바로 위에 올려놓으면 어떻게 되는지 보세요.

사실, 이 차이는 텍스트 한 줄에서는 꽤 미묘합니다. 하지만 여러분은 복합화되었을 때, 그것들이 얼마나 큰 차이를 더할 수 있는지 알 수 있습니다. 가장 중요한 것은 특정 레이아웃 위치 지정에 텍스트에 의존하지 않는다는 것입니다. 이 행의 이미지에서 볼 수 있듯이 브라우저마다 위치가 다릅니다.

이 화면 캡쳐가 만들어진 페이지를 참조하십시오.

제가 사진을 잃어버린 후에 이 게시물에서 이미지를 다시 만들어준 에릭에게 특별한 감사를 드립니다!