CSS字体属性全解析

前端  /  管理员 发布于 7年前   253

话说CSS字体属性font-family、font-style、font-size、font-weight、font-variant：

使用CSS，可以对字体进行设置，字体属性包括五种常见属性：字体系列font-family、字体样式/字体风格font-style、字体大小font-size、字体粗细font-weight、字体变量font-variant。通过这五个属性，可以设定文本在web页面的显示效果或文本的打印效果。

1.字体系列font-family

支持按照优先级顺序列出各种要指派使用的字体，当用户系统没有安装首选字体时候，向后搜索，选用下一个指派的字体解析显示。
如：

复制代码代码如下:
p{font-family:Verdana,Arial,Helvetica,sans-serif;}
其中，字体名称由两个或者多个单词构成，必须使用引号括起来，如下：

复制代码代码如下:
p{font-family:"Times New Roman",Georgia,serif;}

说明：由于一般的操作系统与浏览器都安装与支持以下字体，所以web开发中使用最安全的字体系列为：Arial、Helvetica、 Times New Roman、 Times、 Courier New 和 Courier。而Verdana、Georgia、Comic Sans MS、Trebuchet MS、Arial Black和Impact字体对于苹果的Mac系统和微软的Windows系统来说是安全的，但可能不支持安装在像Linux这样的开源操作系统中。其他经常使用但是不太安全的字体还有：Palatino、Garamond、Bookman和Avant Garde等。

2.字体样式/字体风格font-style
font-style属性有三个值：normal、italic和 oblique。三种字体风格对应三种表现的字体效果：
normal：默认样式。浏览器显示一个标准的字体。
italic：浏览器会显示一个斜体的字体。
oblique：浏览器会显示一个倾斜的字体。

容易产生疑问和困惑是italic 和 oblique 之间的区别。主要区别总结为：

字体样式italic、oblique 需要系统中字体文件的支持。
字体名中带有“Italic”、“Cursive”（草书）或“Kursiv”（一种书信体）的字体通常标记为“italic”。
字体名中带有“Oblique”、“Slanted”（斜体）或“Incline”（倾斜）的字体通常标记为“oblique”。
如果“italic”字体不存在，而只有Oblique字体，则使用后者“oblique”字体，但若“oblique”字体不存在，则不能用“italic”替代，此时浏览器会将正常直立字体倾斜一个角度来作为倾斜字体使用。
在很多情况下，斜体和倾斜字体几乎看不出区别，特别是对那些没有特别提供这两种样式的字体来说
从本质上来说，斜体（italic）是一种简单的字体风格，对每个字母的结构有微小的变动，外观区别于正常字体风格。不过，倾斜（oblique）风格则是正常竖直文本的一个倾斜版本。

通常情况下，italic 和 oblique 文本在 web 浏览器中看上去不存在明显的差别。

3.字体大小font-size

字体大小的设置主要分两种类型：固定大小和相对大小。

字体大小的度量单位包括很多，常用的有像素px、磅pt、em、百分比。

①px，表示pixel，像素的大小随用户显示器的大小和像素深度而变。一个像素等于屏幕上一个点的高度/宽度，是屏幕上显示的最小单位。这个度量单位最适合显示器。
②pt，表示point，来源于打印设计，是一印刷行业常用单位，叫“磅”，等于1/72英寸。pt是一个标准的长度单位，最适合于印刷，但也常用于用户显示器。
③em，相当于当前字体1个字大小，用于描述相对尺寸。即％，在css中，1em＝100％，结合CSS继承关系使用，具有灵活性。 需要注意的是，相对字体大小的计算是基于父元素的字体大小，如果元素之间层层嵌套，问题有时候会复杂的不可预料。例如，对于在单元格、表格、div中的一段文本，如果在每一级都规定了自己的相对字体大小规则，那么相对度量方式就会产生复合效应。 不同的浏览器间并没有一个统一的标准来定义如何指定一个给定元素的父元素，以及在相对字体大小计算中哪一个才是参考字体。所以，为了成功使用相对字体大小方式，需要仔细规划网页设计和CSS样式，尽量避免潜在的元素嵌套问题。
④百分比，相对于当前字体em的比例）。
而英寸in（72pt）、厘米cmt（约28pt）、毫米mm（约3pt）、pic（相当于12pt）这些度量单位则适合于打印，是一种印刷度量单位。ex是相对于当前字体大小，等于小写字母x的高度，是一种不常用的度量单位。

扩展：显示器的PPI（DPI），表示pixel（dot）per inch，每英寸的像素（点）数，表示“清晰度”，“精度” 。设置更改方法：桌面上点右键，弹出快捷菜单： > 属性 > settings > Advanced > General > DPI setting > 96 DPI。

在浏览网页过程中，所有的“大”“小”概念，都是基于“屏幕”这个“显示界面”上。“屏幕”上的各种信息，包括文字、图片、表格等等，都会随屏幕的分辨率变化而变化。在不同分辨率下，无论是px还是pt，屏幕上的各种信息都会改变大小。
由于屏幕大小不同，分辨率也不同，要保证一个字体在所有用户面前呈现的大小都一样，这是一个不可能实现的任务。

在Windows系统红，px和pt的使用区别，只有当用户改变默认的96DPI下才会产生。使用px定义文字，无论用户怎么设置，都不会改变大小；使用pt定义文字，当用户设置超过96DPI的值，数值越大，字体就越大。附公式：px = pt * DPI / 72 。

4.字体粗细font-weight
font-weight用户设定字体的浓淡粗细程度，可能的值：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
可以分为三类：关键字属性，包括normal 、bold 两个；相对关键字属性，它的粗细是相对于从上级父元素的继承值而言的，包括bolder和lighter两个；数字属性，包括从“100”到“900”的9个数字序列（只能是100的整数倍）。这个数字序列表示从最细（100）到最粗（900）的字体粗细程度。
可用值      属性值的说明

normal      缺省值。正常字体显示。
bold        粗体
bolder      相对于父元素稍粗
lighter     相对于父元素稍细
100         至少和200一样淡
200         至少和100一样粗，至少和300一样淡
300         至少和200一样粗，至少和400一样淡
400         字体正常显示，相当于normal
500         至少和400一样粗，至少和600一样淡
600         至少和500一样粗，至少和700一样淡
700         粗体，相当于bold
800         至少和700一样粗，至少和800一样淡
900         至少和800一样粗

字体粗细属性是根据用户电脑上安装的字体作相应匹配显示的。很多情况下，由于系统作了最相近的匹配，从显示效果上很难看出不同的 font-weight值的区别。对于种类繁多花样百出的字体而言，目前并没有一个统一的规则标明粗细的程度。有的字体名称本身就能描绘粗细程度，如Arial Bold字体显示本身就比Arial粗不少，像这样的字体名称的主要作用就是在单个字体集中区别字体的粗细程度。
如果某种字体集中已使用了9级数值的范围（如OpenType一样），字体的粗细应该直接与9级数值相匹配。如果一种字体同时拥有Medium、Book、Regular、Roman或者Normal的字体集名称，Medium通常分配为“500”，其他4个分配为“400”。如果字体集中有标记为“bold”的名称，相当于数值“700”。如果字体集中少于9级粗细级别，参照缺失填补方式的规定。有了以上匹配方式，对于“bolder”和“lighter”的匹配也不难理解。“bolder”就是匹配字体集中可用的下一级较粗字体，反之“lighter”也是一样，匹配下一级较细字体。它们的参照系都是继承值，因此粗细程度都是相对于继承值而言的。

如果字体集中少于9级粗细度算法，那么填补缺失的方法如表所示：

填补填补缺失的方法

5.字体变量font-variant
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余大写文本相比，其字体尺寸偏小。

可能的值
值         描述
normal         默认值。浏览器会显示一个标准的字体。
small-caps     浏览器会显示小型大写字母的字体。
inherit     规定应该从父元素继承 font-variant 属性的值。任何的版本的IE（包括 IE8）都不支持属性值 "inherit"。
对于web开发，一般不要在一篇文章中定义超过3级的粗细程度，且页面设计时粗细程度应有所跳跃，否则反而不能突出加粗的内容。