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

112

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

css fonts font-size

— 매트
소스

1

2016 년에는 em과 % 사이에 차이가 없다고 생각합니다. 1.2 em을 입력하면 모든 최신 브라우저는 내가 120 %를 사용했다고 생각하고 예를 들어 0.7 em을 사용하면 모든 최신 브라우저는 내가 70 %를 사용했다고 생각합니다. 이것은 내가 CSS에서 경험 한 것입니다

— Mahdi Jazini

79

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

그들의 결론 :

본문에 지정된 백분율 (및 Safari 2의 경우 선택 사항)과 함께 ems의 텍스트 및 줄 높이 크기 조정은 오늘날 일반적으로 사용되는 모든 브라우저에서 정확하고 크기 조정 가능한 텍스트를 제공하는 것으로 나타났습니다. 이것은 키트 가방에 넣고 디자이너와 독자 모두를 만족시키는 CSS의 텍스트 크기 조정을위한 모범 사례로 사용할 수있는 기술입니다.

— 글렌 슬레이븐
소스

29

실제로 line-heights는 단위 없이 작성하는 것이 좋습니다 . 이것은 사양에 의해 허용되며, em기반 라인 높이와 관련하여 정말 성가신 브라우저의 단점을 완전히 방지합니다.

— Már Örlygsson

16

이 기사가 2007 년에 작성된 것임을 사람들에게 알리고 싶습니다. 그 이후로 최신 브라우저가 더 보편화되었으며 최신 브라우저는 일반적으로 글꼴 크기를 기본으로 늘리는 대신 확대 / 축소합니다. 이 때문에 'px'가 더 보편화되었고 제 생각에는 더 나은 접근 방식이되었습니다. 물론 그것은 논쟁의 여지가 있지만 중첩 em으로 인해 프로젝트에서 개인적으로 문제가 발생했습니다.

— Mohag519 2013 년

5

@ Mohag519 em의 중첩은 위험한 함정입니다. :)

— Vishnudev K

@ Mohag519는 픽셀 밀도가 높은 모바일 장치에서 px가 의도 한 것보다 훨씬 작은 것을 제공하지 않습니까? 나는 우리가 우리의 위치가 정확히 바탕 화면처럼하지만 모바일 슈퍼 작은되고 싶은 생각하지 않는다;)

— johnb003

@ johnb003 이러한 모바일 장치의 장치 픽셀 비율 은 1. 예를 들어 iPhone 4의 실제 화면 너비는 640px이지만 320 "CSS"픽셀 (DPR = 2)로 나타납니다. 따라서 웹 사이트가 더 작게 보이지 않습니다!

— Benjamin

14

에서 http://archivist.incutio.com/viewlist/css-discuss/1408

% : 일부 브라우저는 글꼴 크기에 대한 백분율을 처리하지 않지만 150 %를 150px로 해석합니다. (예를 들어 일부 NN4 버전) IE는 중첩 된 요소에 대한 백분율 문제도 있습니다. IE는 부모 요소 대신 뷰포트에 상대적인 백분율을 사용하는 것 같습니다. 또 다른 문제 (W3C 사양에 따라 정확함)는 Moz / Ns6에서 지정된 높이 / 너비가없는 요소에 대한 백분율을 사용할 수 없습니다.

em : 때로는 브라우저가 잘못된 참조 크기를 사용하지만 상대적 단위 중 문제가 가장 적은 것입니다. 그래도 가끔 px로 해석 될 수 있습니다.

pt : 해상도가 크게 다르며 디스플레이에 사용해서는 안됩니다. 하지만 인쇄용으로는 매우 안전합니다.

px : 화면에서 유일한 신뢰할 수있는 절대 단위입니다. 그러나 한 점이 일반적으로 여러 픽셀로 구성되어 모든 것이 엄청나게 작아지기 때문에 인쇄에서 잘못 해석 될 수 있습니다.

— 갈웨 기어
소스

태평양 표준시에 대해. 나는 /에 대해 큰 논쟁을 벌였다. 그것에 대해 (그리고 잃어버린). 나는 당신과 같은 관점을 가졌습니다. 누군가가 그 pov를 공유한다는 것을 알게되어 반가 웠습니다. :)

— Vincent McNabb

12

글꼴 크기에 백분율을 사용하면 일부 Netscape Navigator 4 사용자가 내 페이지를 제대로 보지 못할 수도 있다는 말입니까?

— newbie

4

인용 된 논의는 2002 년입니다. 여전히 관련이 있습니까? em 또는 % 버그와 함께 사용중인 브라우저가 있습니까?

— Beni Cherniavsky-Paskin 2011

1

브라우저에서 20 년 된 버그를 인용하는 것은 유용한 대답이 아닙니다.

— d512

7

둘 다 글꼴 크기를 원래대로 조정합니다. 1.5em은 150 %와 같습니다. 유일한 장점은 가독성 인 것 같습니다. 가장 편한 것을 선택하십시오.

— 리암
소스

누군가 내 이유를 설명 할 수 있습니까? 이것은 em과 백분율의 차이점을 정확히 이해 한 방법입니다. 요즘에는 하나를 다른 것보다 사용하는 이점이 없습니다. 중요한 것은 기본 글꼴 크기에 상대적인 크기를 사용한다는 것입니다.

— Lee Theobald

1

감사합니다 Lee, 방금 IE6, IE7, Firefox 3, Safari 3, Opera 9.5 및 Google Chrome에서 모두 Windows에서 테스트했으며 모두 동일하게 보입니다! <p style = "font-size : 0.6em;"> 테스트입니다 </ p> <p style = "font-size : 60 %;"> 테스트입니다 </ p>

— Liam

7

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

— 비욘 탄 타우
소스

5

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

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

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

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

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

— DA.
소스

오해의 소지가있는 대답, 특히 처음부터 CSS에 대해 잘 모르는 사람들에게. CSS가 논리적 픽셀을 정의한다는 사실을 무시하고 10 년 전 CSS 지원 모바일 장치의 공격을 수용하기위한 성급한 결정을 기반으로 한 끔찍한 아이디어 였지만 픽셀은 기본 글꼴 크기에 관한 한 전적으로 브라우저와 사용자의 재량에 달려 있습니다. , 적어도. 그 외에도, 우리는 현재 매우 다른 화면 종횡비 (항상 화면 이 있는 장치 는 아님 )와 해상도 범위가 240p에서 2400p까지입니다. JavaScript없이 CSS에서 픽셀을 사용하는 것은 거의 쓸모가 없습니다.

— amn

@amn 음,이 답변은 8 살입니다. 그것은 인터넷 시간에서 긴 시간입니다. 즉, 픽셀은 이상적이지 않더라도 여전히 괜찮습니다. 대부분의 (모두?) 브라우저는 특정 장치에서 픽셀 글꼴 크기를 적절하게 조정합니다. 하지만 오늘은 일반적으로 rem을 측정 단위로 사용합니다.

— DA.

어쩌면 내가 뭔가를 놓치고 있지만 픽셀 길이가 있다면 어떤 이점이 있습니까? 왜 "괜찮아"또는 "이상적"입니까? em예를 들어 대 . 그 측면에서 SO에 대한 답변은 시간을 초월하기 위해 노력해야한다고 생각합니다. 결국 지식 기반입니다. Wikipedia of programming :) Wikipedia가 사실을 반영하도록 업데이트 되었기 때문에, 겸손한 의견으로는 그렇게 대답해야합니다.

— amn

@amn 나는 그들이 이상적이라고 말하지 않았거나 진정한 큰 이점이 있다고 말하지 않았습니다. 나는 OPs 질문에 대답하고 있었다. 시간을 초월하기 위해 노력하는 것은 지금부터 8 년 후 웹의 미래를 예측할 수 있다면 더 큰 힘이 될 것입니다! 그러나 나는 여기에서 10 년치의 내 답변을 지속적으로 업데이트 할 시간이 없습니다. 사람들이 답변의 타임 스탬프를보고이를 고려할만큼 충분히 알고 있기를 바랍니다.

— DA.

0

CSS 단위 %와 em.

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

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

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

— 사용자 743436
소스

-1

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

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

— 크리스티안 P.
소스

1

IE7은 확대 / 축소를 사용하는 경우 픽셀 값을 잘 조정합니다. IE6에는 확대 / 축소가 없었고 텍스트 크기 만있었습니다. 확대 / 축소는 페이지가 텍스트 크기 변경에 따라 리플 로우되는 대신 고정 된 픽셀 배율을 사용하는 디자이너 때문에 요구 사항이되었습니다.

— Mike Dimmick

IE6에서는 여전히 문제이지만 다시 말하지만 IE6에서는 모든 것이 여전히 문제입니다. 그 때문에 과거에는 px를 피했지만 웹 페이지 확대 / 축소의 개념 (텍스트와 비교)이 표준이되었으며 px를 훨씬 더 자주 사용하고 있습니다.

— DA.

-1

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

YUI를 사용하면 백분율을 사용해야합니다.

— 코소 안트
소스

YUI 재설정을 사용하고 있었지만 브라우저의 텍스트 크기 설정이 작동하지 않는다는 것을 깨달았습니다! 본문에 px를 설정 한 경우 %를 사용하면 텍스트 크기 설정이 깨지기 때문에 아무런 의미가 없습니다.

— Jason