Mac에서 글꼴 렌더링. PC

CSS를 사용하여 웹 페이지를 만들고 Mac (Safari)가 PC (다른 브라우저)보다 더 넓고 두꺼운 글꼴을 렌더링하는 것을 보았습니다.Mac에서 글꼴 렌더링. PC

가로 세로 960 픽셀의 고정 너비로 10 개의 범주가 표시됩니다. 각 카테고리 사이에 여백을두기 위해 패딩을 사용했는데 PC에서는 멋지게 보였지만 Safari를 사용하여 Mac에서 보았을 때 글꼴 렌더링이 더 많아서 두 줄을 만들었습니다. IE를 해킹하는 방법이 있지만 Safari를 사용하는 방법이 있다는 것을 알고 있습니다.

Safari 및 다른 브라우저에서 올바르게 표시하는 가장 좋은 방법은 무엇입니까?

출처

2011-10-03 erin027

의도 한대로 정확하게 렌더링되는 텍스트를 사용할 수 없습니다. "올바른"방법은 없습니다. – thirtydot

크로스 플랫폼 글꼴 렌더링의 미묘한 부분에 CSS를 작성하는 것은 매우 어렵 기 때문에 변수 채우기과 같은 것을 권장합니다.

ul { 
    display: table; 
    width: 100%; 
} 

ul li { 
    display: table-cell; 
}

jsFiddle.

테스트 할 플랫폼에서 작동하는 글꼴 크기를 선택하고 은 패딩을으로 계산합니다.

출처

2011-10-03 23:05:57 alex

'매우 어렵습니다'라는 것은 무엇을 의미합니까? 너는 어떤 참고가 있니? –

카테고리 상자가 두 줄에 걸쳐 있지 않도록하려면 상자의 너비를 고정해야합니다. 그러면 항상 정확히 960px까지 추가됩니다. 예를 들어

는 :

<div class="container"> 
    <div class="category">...</div> 
    ...(9 more)... 
    </div> 
<div> 

.container { width: 960px; margin: 0 auto; } 
.category { width: 86px; padding: 5px; float:left; }

당신은 모양에 맞게 그것을 조정해야하고 원하는 느낄 수 있습니다. 텍스트가 실제로 이미지가 아니면 모든 브라우저와 플랫폼에서 텍스트를 완벽하게 일관되게 렌더링하지 않으므로 텍스트를 페이지의 레이아웃에 맞추는 상자를 정의하여이를 고려해야합니다 .

출처

2011-10-03 23:06:41 Andrew

Mac에서 글꼴 렌더링. PC

답변

관련 문제