网页中设置 Font-size 的那些事儿

Z时代
2024-01-10
分类：IT

一听到说使用 CSS 设置字体很容易，其实要是真做起来却不那么容易，我们的网站开发人员使用全力，不断的去调整字体的大小尺寸，以适应不同浏览器最佳的显示效果。实际上只要深入的理解一下字体中的一些知识，这些都不是问题了。

Font-size 属性

任何一个 HTML 标签都可以设置 Font-size 属性，即使是不能包含文本的标签也可以设置它，他可以被赋予各种各样的值，可以是具体的数字+单位，也可以绝对关键字，也可以是百分数相对大小。

一个元素的 Font-size 属性会自动继承它父节点元素的 Font-size 属性值，除非你覆盖了它。当你给 Font-size 设置相对大小的时候理解这一点很重要。

以下几个绝对字体大小的设置是有效的。当然他们是浏览器预定义设置的。给元素指定了绝对关键字 Font-size 的时候，该元素就不会继承父元素的字体大小。

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

尽管大多数的浏览器支持上面的关键字，但是他们的精确的大小是不相同的。

Font-size 绝对大小

Fone-size 能被设置成下面列出的绝对大小：

mm: 毫米，例如：10mm.

cm: 厘米，例如：1cm ( = 10mm).

in: 英寸（inch）,例如： 0.39in ( ~= 10mm).

pt: point（点）, 1pt 相当于 1/72 英寸，例如： 12pt.

pc: pica（十二点活字）, 1pc 是 12pt

px: pixel（像素）, 例如： 14px.

一般说来上面得这些度量单位都有些问题。比如：毫米\厘米\英寸是对于不同媒体介质是不精确地，由于分辨率的设置不同，pt 和 pc 就是相对不可靠地。pix 来起来是最合适的，但是它能导致一些辅助性问题：IE 下不能重新调整字体的大小。

Font-size 相对大小

Font-size 属性能被设置成相对于父节点的字体大小的相对大小。

em: 1em 相当于当前字体的 1 倍大小的字体。2em 相当于当前字体的 2 倍字体大小的字体。

%: 100% 相当于当前字体大小, 200% 相当于 2 倍字体的大小。

ex: 1ex 相当于当前字体中字母 x 高度值一样大小的字体。

很少的开发者使用 ex ，实际上某些情况下 ex 还是相当好用的，比如当你需要更精确的字体的大小的时候，1ex 要比 0.525em 更好更精确。

% 和 em 的值是等价的，比如 50% = 0.5em\100% = 1em\120% = 1.2em 等等，尽管会有很少的一些浏览器有些微妙的差别，但是毕竟那是很少见的问题。如果你想要保存更小的字节，就需要用更短的名字去定义 Font- size 的值。比如 50% 要比 0.5em 占用字节少，1em 要比 100% 占用的字节少。