上一章CSS3高级教程请查看：css3动画属性
web安全字体是非常常见的字体，最可能出现在Windows、Mac、Linux等操作系统上。
为什么选择Web安全字体可能出现的情况是，你试图在web页面上使用的字体没有出现，因为所有的字体在所有计算机系统上都不可用。
【css3 web安全字体参考文档 –
CSS3高级教程】为了确保文本在大多数浏览器或操作系统上的准确呈现，必须非常仔细地定义字体。font-family CSS属性可以容纳多个字体名称作为后备系统。首先从你想要的字体开始，然后如果第一个字体不可用，你可能想要填充的字体。
你应该用一个通用字体家族来结束列表，它有5种：serif, sans-serif, monospace, cursive 和 fantasy。如果没有可用的字体，通用字体系列允许浏览器选择类似的字体。
下表列出了最安全的字体组合。
| font-family | Normal | Bold |
| Arial, Helvetica, sans-serif | This is normal text. | This is bold text. |
| “ Times New Roman” , Times, serif | This is normal text. | This is bold text. |
| “ Courier New” , Courier, monospace | This is normal text. | This is bold text. |
.sans-serif-font {
font-family: Arial, Helvetica, sans-serif;
}
.serif-font {
font-family: "Times New Roman", Times, serif;
}
.monospace-font {
font-family: "Courier New", Courier, monospace;
}常用字体组合下表列出了一些常用的字体组合，它们由generic family组织。
衬线字体 Serif
| font-family | Normal | Bold |
|---|---|---|
| Georgia, serif | This is normal text. | This is bold text. |
| “ Times New Roman” , Times, serif | This is normal text. | This is bold text. |
| “ Palatino Linotype” , Palatino, “ Book Antiqua” , serif | This is normal text. | This is bold text. |
| font-family | Normal | Bold |
|---|---|---|
| Arial, Helvetica, sans-serif | This is normal text. | This is bold text. |
| “ Arial Black” , Gadget, sans-serif | This is normal text. | This is bold text. |
| Impact, Charcoal, sans-serif | This is normal text. | This is bold text. |
| Tahoma, Geneva, sans-serif | This is normal text. | This is bold text. |
| “ Trebuchet MS” , Helvetica, sans-serif | This is normal text. | This is bold text. |
| Verdana, Geneva, sans-serif | This is normal text. | This is bold text. |
| font-family | Normal | Bold |
|---|---|---|
| Courier, monospace | This is normal text. | This is bold text. |
| “ Courier New” , Courier, monospace | This is normal text. | This is bold text. |
| “ Lucida Console” , Monaco, monospace | This is normal text. | This is bold text. |
| font-family | Normal | Bold |
|---|---|---|
| “ Comic Sans MS” , cursive | This is normal text. | This is bold text. |
| “ Courier New” , Courier, monospace | This is normal text. | This is bold text. |
| “ Lucida Console” , Monaco, monospace | This is normal text. | This is bold text. |
不存在跨浏览器和操作系统具有良好可用性的Fantasy字体。
警告: 字体(Verdana, Georgia，“Comic Sans MS”，“Trebuchet MS”，“Arial Black”，Impact)适用于Windows和MacOS，不适用于Unix+X。
推荐阅读
- css3听觉属性参考文档 – CSS3高级教程
- css3动画属性参考文档 – CSS3高级教程
- css3属性参考文档 – CSS3高级教程
- css3扩展特性 – CSS3高级教程
- css3媒体查询和响应式设计 – CSS3高级教程
- css3 滤镜filters – CSS3高级教程
- css3 flexbox弹性布局 – CSS3高级教程
- css3框大小box-sizing – CSS3高级教程
- css3多栏布局 – CSS3高级教程