글꼴 크기는 어떻게 측정합니까? [복제]
배경 : 글리프 비트 맵을 사용하여 글꼴 렌더링을 수행하려고하는데 화면에서 텍스트를 올바른 크기로 렌더링하고 있는지 확인할 방법이 필요합니다.
그래서 누군가가 말할 때 : font-size: 64px이 64가 어디에 나타나야합니까? HTML에서 동일한 연습을 시도했지만 이제 시작하기 전보다 더 혼란스러워졌습니다. 이것이 HTML이 font-size: 64px. 빨간 선- height: 64px이 글자 주위에 상자를 맞추려고합니다 .
누군가이 64px가 어디에 나타나야하는지 설명해 줄 수 있습니까?
글꼴 크기는 실제 종이 인쇄기에서 비롯된 매우 오래된 것이며 일부 간격도 고려되지만 디지털 시대에는 논리 / 규칙이 없습니까? 글꼴 파일에서 완전히 임의적입니까? 새 글꼴을 만들고 있다고 가정 해 보겠습니다. 64px 글꼴 크기에 대한 지침이 없습니까?
답변
원래 글꼴 크기는 대문자 M- 문자의 가로 너비 인 소위 em-square로 측정됩니다.
유형 조각의 높이는 'em'으로 알려져 있으며 대문자 'M'문자의 너비에서 비롯됩니다. 이 문자의 비율이 정사각형이되도록 만들어졌습니다 (따라서 'em square'단위). (http://designwithfontforge.com/en-US/The_EM_Square.html)
CSS에서, font-size에서 pt또는 px대표, 아무것도 경우,이 그들을 평방. 그러나:
얼마 전 대학 수준의 타이포그래피 과정에서 나온 많은 강의 슬라이드를 보았습니다. 그들 중 한 명은 기준선 (H와 같은 문자의 하단)에서 캡 높이 (H와 같은 문자의 상단)까지의 거리가 포인트 크기라고 주장했습니다. 현실보다 훨씬 간단하기 때문에 그것이 사실 이었으면합니다. 평균적으로 캡 높이는 포인트 크기의 약 70 %입니다. (http://www.thomasphinney.com/2011/03/point-size/)
따라서 귀하의 질문에 대한 대답은 다음과 같습니다. em-square는 여전히 가이드 라인이지만 글꼴의 실제 크기는 디자이너에 따라 크게 달라지며 종종 em-square보다 훨씬 큽니다. 또는 70 % 표시를 기반으로하여 64px의 70 % (약 45px)를 H 또는 M과 같은 일반 대문자의 높이로 찾을 수 있습니다.
또한이 링크는 CSS의 인쇄 질문에 매우 유용하다는 것을 알았습니다. https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
추신 : em-square두 따옴표가 모두 말하는 이 활자체 em는 CSS 의 -unit 과 동일하지 않습니다 . CSS에서는 em상위 컨테이너 (또는 브라우저의 기본 설정)에 상대적인 글꼴 크기입니다.