CSS - % 또는 EM의 글꼴 크기?
https://stackoverflow.com/questions/132685
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
CSS에서 글꼴 크기를 설정할 때 백분율 값을 사용해야합니다 (%) 또는 em? 이점을 설명 할 수 있습니까?
해결책
웹 타이포그래피에 대한 정말 좋은 기사가 있습니다. 목록.
그들의 결론 :
신체에 비율이 지정된 비율 (및 Safari 2의 선택적 경고)이있는 EMS의 크기 크기 텍스트 및 라인 높이는 오늘날 공통적 인 모든 브라우저에서 정확하고 재개 가능한 텍스트를 제공하는 것으로 나타났습니다. 이것은 키트 백을 넣고 디자이너와 독자 모두를 만족시키는 CSS의 크기 조정 텍스트에 대한 모범 사례로 사용할 수있는 기술입니다.
다른 팁
에서 http://archivist.incutio.com/viewlist/css-discuss/1408
% : 일부 브라우저는 글꼴 크기의 비율을 처리하지 않지만 150%를 150px로 해석합니다. (예 : 일부 NN4 버전) IE는 중첩 요소에 대한 백분율에 문제가 있습니다. IE는 상위 요소에 비해 뷰포트에 비해 백분율을 사용하는 것 같습니다. 또 다른 문제 (W3C 사양에 따라 정확하지만) MOZ/NS6에서는 높이/너비가 지정되지 않은 요소에 비해 백분율을 사용할 수 없습니다.
EM : 때로는 브라우저가 잘못된 참조 크기를 사용하지만 상대 단위 중에서 가장 문제가있는 단위입니다. 그래도 때때로 PX로 해석 될 수 있습니다.
PT : 해상도마다 크게 다르며 디스플레이에 사용해서는 안됩니다. 그래도 인쇄 용도로 안전합니다.
PX : 화면의 유일한 신뢰할 수있는 절대 장치. 그러나 한 지점은 일반적으로 여러 픽셀로 구성되어 있으므로 모든 것이 엄청나게 작아 지므로 인쇄물로 잘못 해석 될 수 있습니다.
둘 다 글꼴 크기를 그와 관련하여 조정합니다. 1.5EM은 150%와 동일합니다. 유일한 장점은 가독성 인 것 같습니다. 가장 편한 사람을 선택하십시오.
(거의?) 모든 브라우저는 이제 텍스트가 아닌 페이지 전체를 px vs. % vs. em접근 가능한 글꼴 크기 조정 측면에서 s는 다소 다소 곤경에 처해 있습니다.
따라서 대답은 아마도 중요하지 않다는 것입니다. 당신을 위해 일하는 것을 사용하십시오.
%상대적 크기 조정을 허용하기 때문에 좋습니다.
px사용할 때 기대치를 관리하기가 상당히 쉽기 때문에 좋습니다.
em텍스트 크기와 관련된 비례 크기를 허용 할 수 있으므로 레이아웃 요소에도 사용될 때 유용 할 수 있습니다.
진정한 차이는 글꼴 크기가 아닌 경우 사용할 때 분명합니다. 설정 a padding 의 1em 동일하지 않습니다 100%. em 항상 글꼴 크기와 관련이 있습니다. 하지만 % 글꼴 크기, 너비, 높이 및 내가 모르는 다른 것들에 상대적 일 수 있습니다.
CSS 단위의 차이점과 관련하여 % 그리고 em.
내가 이해하는 한 (적어도 이론적으로/개념적으로, 그러나이 두 단위가 브라우저에서 어떻게 구현 될 수 있는지는 아닐 수도 있음)이 두 장치는 동일합니다. em 가치 100 그런 다음 교체하십시오 em ~와 함께 % 똑같은 일이어야합니까?
실제로 EM과 % 사이에 약간의 차이가 있다면 누군가가 그것을 설명 할 수 있습니까 (아니면 설명에 대한 링크를 제공 할 수 있습니까?)?
(나는 그것이 속한 곳에 내 의견을 추가하고 싶었습니다. 즉, 답변 바로 아래에 들여 쓰기 "Liam, answered Sep 25 '08 at 11:21" 또한 그의 대답이 다운 된 이유를 알고 싶지만 내 의견을 제시하는 방법을 알 수 없었기 때문에이 "스레드 글로벌"답장을 작성해야했습니다).
Galwegian이 언급했듯이 PX는 웹 타이포그래피에 가장 신뢰할 수 있습니다. 절대 크기의 문제는 그 것입니다 약간 브라우저 (예 :)는 웹 페이지에서 픽셀 값 요소를 스케일하지 않으므로 줌 인/아웃, 해당 요소를 제외한 모든 것이 조정됩니다.
IE8이 이것을 제대로 처리하는지 여부는 알지 못하지만 다른 모든 브라우저 공급 업체는 픽셀을 잘 처리하며 사용자가 텍스트를 확대/축소 해야하는 소수의 경우 (이 텍스트 상자가 예외 일 것입니다). 정말 더러워 지려면 항상 텍스트 크기를 더 크게 만들기 위해 JavaScript 기능을 추가하고 사용자에게 "작은"/"더 큰"버튼을 제공 할 수 있습니다.
야후 사용자 인터페이스 라이브러리 (http://developer.yahoo.com/yui/)에는 브라우저 특정 설정을 "재설정"하는 데 사용되는 멋진 기본 CSS 클래스 세트가있어 사이트를 표시하는 기초가 모든 (지원되는) 브라우저에 대해 동일합니다.
Yui의 경우 백분율을 사용해야합니다.
