Ems를 사용하여 글꼴 크기 변경
웹 페이지를 만들 때 대부분의 전문가는 글꼴, 실제로는 모든 것을 em, ex, 백분율 또는 픽셀과 같은 상대적 측정 값으로 크기를 정하는 것이 좋습니다. 누군가가 내 콘텐츠를 볼 수있는 다양한 방법을 모를 때가 있기 때문입니다. 절대 치수 (인치, 센티미터, 밀리미터, 점 또는 피카)를 사용하면 다른 장치에서 페이지의 표시 또는 가독성에 영향을 줄 수 있습니다.
그리고 W3C는 크기에 em을 사용할 것을 권장합니다.
하지만 엠은 얼마나 큽니까?
W3C에 따르면,
"는 사용 된 요소의 'font-size'속성의 계산 된 값과 같습니다. 예외는 'font-size'속성 자체의 값에서 'em'이 발생하는 경우입니다. 부모 요소의 글꼴 크기를. "
즉, em은 절대 크기가 없습니다. 그들은 자신의 위치에 따라 크기 값을 사용합니다. 대부분의 웹 디자이너 는 이것이 웹 브라우저에 있다는 것을 의미하므로, 1em 높이의 글꼴은 해당 브라우저의 기본 글꼴 크기와 정확히 같은 크기입니다.
그러나 기본 크기는 얼마나됩니까? 고객이 브라우저에서 기본 글꼴 크기를 변경할 수 있기 때문에 100 % 확신 할 수는 없지만 대부분의 사람들은 대부분의 브라우저가 기본 글꼴 크기가 16 픽셀이라고 가정 할 수 없습니다. 그래서 대부분 1em = 16px 입니다.
픽셀로 생각하고 측정에 Ems 사용
기본 글꼴 크기가 16px라는 것을 알게되면 ems를 사용하여 클라이언트의 페이지 크기를 쉽게 조정할 수 있지만 글꼴 크기는 픽셀 단위로 생각할 수 있습니다.
다음과 같은 사이징 구조가 있다고 가정 해보십시오.
- 광고 제목 1 - 20 픽셀
- 제목 2 - 18px
- 제목 3 - 16px
- 주요 텍스트 - 14px
- 하위 텍스트 - 12px
- 각주 - 10px
측정을 위해 픽셀을 사용하여 그런 식으로 정의 할 수 있지만 IE 6 및 7을 사용하는 사람은 누구나 페이지 크기를 잘 조절할 수 없습니다. 그래서 크기를 em로 변환해야합니다. 이것은 단지 수학의 문제 일뿐입니다.
- 광고 제목 1 - 1.25em (16x1.25 = 20)
- 광고 제목 2 - 1.125em (16 × 1.125 = 18)
- 광고 제목 3 - 1em (1em = 16px)
- 본문 - 0.875em (16x0.875 = 14)
- 하위 텍스트 - 0.75em (16 x 0.75 = 12)
- 각주 - 0.625em (16 x 0.625 = 10)
상속을 잊지 마라!
하지만 그게 전부가 아니다. 기억할 필요가있는 또 다른 사항은 부모의 크기를 감안한다는 것입니다. 따라서 글꼴 크기가 다른 중첩 요소가있는 경우 예상보다 훨씬 작거나 큰 글꼴로 끝날 수 있습니다.
예를 들어, 다음과 같은 스타일 시트가있을 수 있습니다.
p {글꼴 크기 : 0.875em; }
.footnote {font-size : 0.625em; }
이렇게하면 주 텍스트와 각주에 대해 각각 14px와 10px의 글꼴이 생성됩니다. 하지만 단락 안에 각주를 넣으면 10px가 아닌 8.75px의 텍스트로 끝날 수 있습니다. 직접 해보고 위의 CSS와 다음 HTML을 문서에 넣으십시오.
이 글꼴은 높이가 14px 또는 0.875 em입니다.
이 단락에는 각주가 있습니다.
이것은 단지 각주 단서입니다.
각주 텍스트는 10px에서 읽기가 어렵습니다. 8.75px에서 거의 읽을 수 없습니다.
따라서 em을 사용하는 경우 부모 객체의 크기를 잘 알아야합니다. 그렇지 않으면 페이지에 실제로 크기가 다른 일부 요소가 생깁니다.