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

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 %와 같습니다. 유일한 장점은 가독성 인 것 같습니다. 가장 편한 것을 선택하십시오.

---

(거의?) 모든 브라우저는 이제 텍스트가 아니라 페이지 전체 의 크기를 조정하므로 액세스 가능한 글꼴 크기 조정 과 관련하여 pxvs. %와 ems의 이전 문제 는 다소 모호합니다.

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

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

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

em 텍스트 크기와 관련된 비례 크기 조정을 허용 할 수 있으므로 레이아웃 요소에도 사용될 때 유용 할 수 있습니다.

---

글꼴 크기가 아닌 글꼴을 사용하면 실제 차이점이 분명해집니다. 설정 padding의 것은 1em동일하지 않습니다 100%. em항상 글꼴 크기를 기준으로합니다. 그러나 %글꼴 크기, 너비, 높이 및 내가 모르는 다른 것들과 관련이있을 수 있습니다.

---

CSS의 단위 사이의 차이에 대해서 %와 em.

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

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

(나는이 답변이 포함 된 곳에 내 의견을 추가하고 싶었습니다. 즉, "Liam, answered Sep 25 '08 at 11:21"왜 그의 대답이 다운 투표되었는지 이유를 알고 싶기 때문에 답변 바로 아래에 들여 쓰기 가되었지만 내 의견을 어떻게 넣을 수 있는지 알 수 없었기 때문에 글을 써야했습니다. 이 "스레드 글로벌"회신)

---

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

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

---

Yahoo 사용자 인터페이스 라이브러리 ( http://developer.yahoo.com/yui/ )에는 브라우저 특정 설정을 "재설정"하는 데 사용되는 기본 CSS 클래스 세트가있어 사이트 표시 기준이 모두 동일하게 지원됩니다 (지원됨). 브라우저.

YUI에서는 백분율을 사용해야합니다.

참고 URL : https://stackoverflow.com/questions/132685/font-size-in-css-or-em