웹 크로스 플랫폼에서 글꼴을 표시하는 방법은 무엇입니까?

CSS 코드에서 글꼴 크기의 픽셀 설정을 사용합니다. 예를 들어 는 :웹 크로스 플랫폼에서 글꼴을 표시하는 방법은 무엇입니까?

.items { 
    font-family: Verdana, Arial; 
    font-size: 14px; 
    width: 100px; 
}

나는 문제가있다. 예를 들어, 단어 Hello words은 .items의 요소로 작성되었습니다. 요소는 100px로 맞추고 OK로 표시됩니다 (Ubuntu Linux에서). 그러나 Windows 브라우저에서 글꼴이 더 넓고 텍스트가 100px에 맞지 않으므로 2 줄의 텍스트가 나타납니다 (원하지 않아야합니다)

어떻게 이러한 문제로부터 사이트를 보호 할 수 있습니까? 요소의 모든 텍스트가 해당 컨테이너에 맞는지 확인하는 방법은 무엇입니까?

출처

2011-12-11 Larry Cinnabar

자주 사용하는 글꼴 종류는 –

입니다. 글꼴에 px가 아닌 em을 사용하려고합니다. –

내 게시물에 font-family를 추가했습니다. 'Verdana, Arial' 나는 물론 –

충분한 너비를 설정하여 이러한 문제를 방지하려고 할 수 있습니다. 그러나 어떤 너비가 항상 충분하다는 것을 보증 할 방법이 없으며 대부분 너비가 충분하다면 많은 경우에 너무 넓습니다.

글자의 너비는 글꼴 크기 (너비와 단순한 관계가 없음) - 글꼴의 특성 (문자의 미리 설정된 너비), 실제 텍스트 (예 : 많은 m 대 많은 i), 그리고 원칙적으로 문자 간격과 단어 간격. 운영 체제에 의존하지 않지만 다른 시스템에는 다른 공통 글꼴이있을 수 있습니다. 간접적으로 언어에 의존합니다. 언어마다 언어가 다른 서체 시스템을 사용하기 때문에 글자의 너비가 많이 다를 수 있습니다.

px 대신 em을 사용하면 몇 가지 이점이 있지만이 문제는 도움이되지 않습니다. em 단위는 글꼴의 높이이며 문자 너비를 계산하는 데 사용할 수 없습니다.

그래서 이걸 가지고 살아야합니다. 예를 들어 링크 (버튼과 같은 방식으로 표시되거나 너비가 표시되는)가있는 곳에서 세로 탐색 모음을 설정하려면 단일 열 표가 실용적인 솔루션입니다. 그 이유는 모든 셀 가장 큰 폭을 요구하는 셀에 의해 결정되는 동일한 폭이다.

출처

2011-12-11 21:15:10

우분투 시스템에 Verdana가 설치되어 있습니까? Verdana는 일반적으로 Arial보다 넓은 글꼴이므로 내 경험상 Linux 시스템에서 Arial을 표시 할 수 있으며 Windows에서 Verdana를 표시 할 수 있습니까?

@font-face { 
font-family: 'MyWebFont'; 
src: url('webfont.eot'); /* IE9 Compat Modes */ 
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
    url('webfont.woff') format('woff'), /* Modern Browsers */ 
    url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
}

I : 당신이 두 시스템은 동일한 글꼴을 표시되어 있는지 확인하려면

, 당신은 당신이 'bullet-proof syntax' 같은 것을 사용 특히, 지금은 아주 잘 지원 인 CSS @font-face를 사용해야합니다 정확히 을 똑같이 보이게 만드는 데 너무 많은 땀을 흘리지는 않을 것입니다. 서로 다른 플랫폼이 사물을 다르게 렌더링하기 때문에 거의 확실하게 결코이 될 수 있습니다.

출처

2011-12-11 21:17:13 Chris

을 사용합니다. * 거의 * 문자 폭을 보장 할 수있는 한 가지 방법은 모노 스페이스 글꼴을 사용하는 것입니다. :) – Chris

웹 크로스 플랫폼에서 글꼴을 표시하는 방법은 무엇입니까?

답변

관련 문제