[css] CSS의 글꼴 크기-% 또는 em?

CSS에서 글꼴 크기를 설정할 때 백분율 값 ( %)을 사용해야 em합니까? 장점을 설명해 주시겠습니까?



답변

A List Apart 에 웹 타이포그래피에 대한 정말 좋은 기사가 있습니다.

그들의 결론 :

본문에 지정된 백분율 (및 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 %와 같습니다. 유일한 장점은 가독성 인 것 같습니다. 가장 편한 것을 선택하십시오.


답변

실제 차이는 글꼴 크기가 아닌 사용하면 분명합니다. 의 설정은 padding1em동일하지 않습니다 100%. em항상 글꼴 크기에 상대적입니다. 그러나 %글꼴 크기, 너비, 높이 및 내가 모르는 다른 것들에 상대적 일 수 있습니다.


답변

(거의?) 모든 브라우저가 이제 텍스트가 아닌 전체적으로 페이지 크기를 조정한다는 점을 감안할 때, 액세스 가능한 글꼴 크기 조정 측면에서 pxvs. %vs.em

그래서 대답은 아마도 그것은 중요하지 않다는 것입니다. 당신에게 맞는 것을 사용하십시오.

% 상대적 크기 조정이 가능하기 때문에 좋습니다.

px 사용할 때 기대치를 관리하기가 상당히 쉽기 때문에 좋습니다.

em 텍스트 크기에 비례하여 크기를 조정할 수 있으므로 레이아웃 요소에도 사용할 때 유용 할 수 있습니다.


답변

CSS 단위 %em.

지금까지 내가 당신이 다중 사용자의 경우이 두 단위 즉, 동일 (적어도 이론적 / 개념적으로, 그러나 아마도이 두 단위가 브라우저에서 구현 될 수없는 방법) 이해 em와 가치 100그리고 교체 em와 함께 %이 같은 일을해야 하는가?

실제로 em과 % 사이에 실제 차이가 있다면 누군가가 그것을 설명 할 수 있습니까 (또는 설명에 대한 링크를 제공 할 수 있습니까)?

(내가 속한 곳에이 댓글을 추가하고 싶었습니다. 즉, "Liam, answered Sep 25 '08 at 11:21"답변이 반대표를받은 이유를 알고 싶기 때문에 답변 바로 아래에 들여 쓰기를 했지만, 여기에 댓글을 넣는 방법을 알 수 없어서 작성해야했습니다. 이 “스레드 전역”회신)


답변

Galwegian이 언급했듯이 px는 웹 타이포그래피에 가장 신뢰할 수 있으며 페이지에서 수행하는 다른 모든 작업은 대부분 컴퓨터 모니터를 참조하여 배치됩니다. 절대 크기의 문제는 일부 브라우저 (IE)가 웹 페이지에서 픽셀 값 요소의 크기를 조정하지 않기 때문에 확대 / 축소 하려고하면 해당 요소를 제외한 모든 항목이 조정된다는 것입니다.

IE8이이를 제대로 처리하는지 여부는 알 수 없지만 다른 모든 브라우저 공급 업체는 픽셀을 잘 처리하고 사용자가 텍스트를 확대 / 축소해야하는 소수의 경우입니다 (이 텍스트 상자는 예외 일 수 있음). 정말 더러워지고 싶다면, 텍스트 크기를 더 크게 만들고 사용자에게 “작게”/ “더 크게”버튼을 제공하는 자바 스크립트 기능을 항상 추가 할 수 있습니다.