我有一个复杂的js函数,其中我实际上需要了解像素字体大小占用多少空间。
我注意到某些字体的大小因字体而异。
如何计算字体的大小?如果它设置为12px
,在css中,12px
是什么意思?是12px
宽吗?高?还是对角线像素测量?
答案 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将是不同的物理尺寸:
总而言之,它很复杂。 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的图表对于了解大局非常有用。
答案 4 :(得分:1)
如果您需要知道屏幕上显示的文本空间占用多少空间,则应使用.getClientRects()
。
您设置的内容与您将获得的大小之间的实际交互有点复杂。 CSS3规范比其他答案中引用的CSS2规范更清晰:
此属性指示字体所需的字形高度。 对于可缩放字体,font-size是应用于EM的比例因子 字体的单位。
基本上,您可以控制“em square”的大小。字体形状是相对于此定义的,但肯定会偏离此框内外(有时显着)。
这只适合初学者!即使你假设一个与这个em-square非常接近的字体 - 你是否只想将字符串长度乘以这个大小?除非它是等宽的并且你的文本只有ASCII,你还有很多需要担心:不同的字符宽度,字距调整和连字,包装行为,当然还有其他更简单的“字符串长度”警告,如标签,Unicode组合字符和控制代码