如何计算字体大小?

时间:2010-08-16 17:57:43

标签: css fonts font-size pixels typography

我有一个复杂的js函数,其中我实际上需要了解像素字体大小占用多少空间。

我注意到某些字体的大小因字体而异。

如何计算字体的大小?如果它设置为12px,在css中,12px是什么意思?是12px宽吗?高?还是对角线像素测量?

5 个答案:

答案 0 :(得分:18)

高度是标准尺度

字体高度由线条的高度测量或指定,线条的高度是显示字符色域所需的全部高度,包括低于线条的字符,如j和凸起元素(重音符号)例如,像Ê一样的大写字母。

Different fonts at 24px and 12px http://media.banzaimonkey.net/images/forums/font-sizes.png 出现顺序的字体:Times New Roman,Courier New,Calibri,Consolas。

宽度

字体的宽度因字体而异,如上图所示。 比例fixed-width字体之间也存在重要区别。对于固定宽度的字体,每个字符在行上占用的空间完全相同(尽管字符本身可能与另一个字符的大小不同。对于比例字体,每个字符使用的空间更符合它的形状相对于其他字符,所以 i j l 变窄,而 w m o 通常更宽。

字体

字体本身以不同的方式呈现字形(显然,因为字体看起来不同),这意味着特定字符不一定在字体之间呈现相同的高度。这也意味着除了渲染字体之外,没有标准的方法来确定某个角色在任何给定大小下的高度。

对大多数人来说可能并不明显,但如果你检查字体的许可条款,你会发现它们被许可为字体软件。从本质上讲,每种字体都包含一组算法,用于确定字体在给定上下文中的呈现方式(各种大小,粗体,斜体等)。

因此,弄清楚字体在给定上下文中的呈现方式的最佳方法是渲染它并查看。

调整大小问题

当您处理网络上的内容时,对字体大小有一些警告。

对于网络

任何优秀的网页设计师都知道,没有任何事情是平等的。在呈现可能导致用户之间差异的页面时会出现无数变量,例如浏览器,默认字体,缩放,平滑,提示,浏览器缩放,操作系统缩放等。

List Apart(在他们跳过鲨鱼之前)有一些关于标准化字体大小的文章,并帮助你在浏览器之间获得一些级别的相似性:

虽然您可以进行尽职调查,但您必须接受网络媒体涉及您无法控制的某种程度的可变性。

打印与像素

因为像素通常不是字体的自然比例(不同的测量用于打印),所以提示算法可以将字体渲染一个或两个像素,特别是在小尺寸时,以保持字符的形状。

事实上,提示算法在小尺寸时通常是完全不同的,而在专业工作中,你可能完全使用不同的字体,大小低于12pt。

像素也与显示尺寸有关,因此在这些显示器上12px将是不同的物理尺寸:

  • 20“显示器在1680x1050
  • 22“显示器在1680x1050
  • iPhone屏幕
  • 黑莓手机屏幕

TL; DR

总而言之,它很复杂。 font-size指的是显示字符范围所需的高度,但在狂野和毛茸茸的互联网中,总会有例外情况。

答案 1 :(得分:5)

请参阅spec

  

字体大小对应于em   广场,印刷术中使用的概念   请注意,某些字形可能会出血   在他们的em广场之外。

答案 2 :(得分:2)

根据规范(http://www.w3.org/TR/CSS2/fonts.html

  

字体大小对应于em   广场,用于排版的概念。   请注意,某些字形可能会出血   在他们的em广场之外。

em square的大小解释为:http://www.emdpi.com/emsquare.html

答案 3 :(得分:2)

这是一个补充答案。我发现this site的图表对于了解大局非常有用。

Font size conversion chart

答案 4 :(得分:1)

如果您需要知道屏幕上显示的文本空间占用多少空间,则应使用.getClientRects()

您设置的内容与您将获得的大小之间的实际交互有点复杂。 CSS3规范比其他答案中引用的CSS2规范更清晰:

  

此属性指示字体所需的字形高度。   对于可缩放字体,font-size是应用于EM的比例因子   字体的单位。

基本上,您可以控制“em square”的大小。字体形状是相对于此定义的,但肯定会偏离此框内外(有时显着)。

这只适合初学者!即使你假设一个与这个em-square非常接近的字体 - 你是否只想将字符串长度乘以这个大小?除非它是等宽的并且你的文本只有ASCII,你还有很多需要担心:不同的字符宽度,字距调整和连字,包装行为,当然还有其他更简单的“字符串长度”警告,如标签,Unicode组合字符和控制代码