CSS font属性知多少

font属性知多少

font-family属性值

font-family默认值由操作系统和浏览器共同决定。支持两类属性值，一类是“字体名”，一类是“字体族”。其中，“字体名”就是使用字体对应的名称，如果字体包含空格，需要使用引号引起来。理论上，可以不区分大小写，但是建议采用单词首字母大写的方式。如果有多个字体，浏览器会从左向右一次查找字体，找到便会停止，否则采用浏览器默认字体。

body {
    font-family: 'PingFang SC', 'Microsoft Yahei';
}

MDN上“字体族”分为很多类，含义如下：

• serif: 衬线字体。
• sans-serif: 无衬线字体。
• monospace: 等宽字体。
• cursive: 手写字体。
• fantasy: 奇幻字体。
• system-ui: 系统UI字体。

其中，字体分为衬线字体和无衬线字体。衬线字体，就是笔画开始、结束的地方有额外装饰而且笔画的粗细有所不同。常用中文衬线字体是“宋体(SimSun)”，常用英文衬线字体是Times New Roman。而无衬线字体就是没有额外的装饰，笔画的粗细都差不多。中文"雅黑(Yahei)"，英文的Arial、Helivetica等都是无衬线字体。

等宽字体多用于英文字体，如果要实现根据输入内容逐字显示到屏幕上，就可以采用等宽字体进行展示。其中，ch单位表示字符0(阿拉伯数字0)的宽度。

需要注意的是，一般serif和sans-serif要写在最后，因为后面的字体会被忽略。

中文字体和英文名称

Windows常见内置中文字体

字体中文名	字体英文名
宋体	SimSun
黑体	SimHei
微软雅黑	Microsoft Yahei
微软正黑体	Microsoft JhengHei
楷体	KaiTi
新宋体	NSimSun
仿宋	FangSong

OS X 系统内置中文字体

字体中文名	英文名	字体中文名	英文名
苹方	PingFang SC	华文黑体	STHeiti
华文楷体	STKaiti	华文宋体	STSong
华文仿宋	STFangsong	华文中宋	STZhongsong
华文琥珀	SThupo	华文新魏	STXinwei
华文隶书	STLiti	华文行楷	STXingkai
冬青黑体简	Hiragino Sans GB	兰亭黑-简	Lantinghei SC
翩翩体-简	Hanzipen SC	手札体-简	Hannotate SC
宋体-简	Songti SC	娃娃体-简	Wawati SC
魏碑-简	Weibei SC	行楷-简	Xingkai SC
雅痞-简	Yapi SC	圆体-简	Yuanti SC

不得不吐槽一句，mac上的华文字体是真的多啊！

需要注意的是，“宋体(SimSun)”和“宋体-简(Songti SC)”不是同一个字体，字形也有所差异。可能你会发现"SC"出现了很多次，这个"SC"指的是“简体”(simplified chinese),相对的，还有"TC"，指的是“繁体”(traditional chinese)。

最后，font-family也可以指定自定义字体，一般用于字体图标。在@font-face里指定相同的font-family并引入相应字体(src:url(...))，就可以使用了。

font关键字

语法如下：

font:caption | icon | menu | message-box | small-caption | status-bar

如果使用关键字，等同于设置为OS下该部件对应的字体，即直接使用系统字体。

各个关键字的含义如下。

• caption: 活动窗口标题栏使用的字体。
• icon: 包含图标内容所使用的字体，如所有文件夹名称、文件名称、磁盘名称，甚至浏览器窗口标题所使用的字体。
• menu: 菜单使用的字体，如文件夹菜单。
• message-box: 消息盒里面使用的字体。
• small-caption: 调色板标题所使用的字体。
• status-bar: 窗体状态栏使用的字体。

需要注意的是，使用关键字作为属性值必须是独立的，跟font属性缩写也不同。其实，font关键字属性值也是一种缩写，以Chrome 67为例：

font关键字属性

由于不同系统的默认字号是不同的，因此需要显示的重置字号。IE8会忽略与font关键字同时声明的font-size，因此需要这样处理：

html {font: menu;}
body {font-size: 14px;}

html {font: small-caption;}
body {font-size: 14px;}

html {font: status-bar;}
body {font-size: 14px;}

引用上述声明(三选一)就可以让各个系统使用各自的字体。