srcmini上一章CSS3高级教程请查看：css3动画属性
web安全字体是非常常见的字体，最可能出现在Windows、Mac、Linux等操作系统上。
为什么选择Web安全字体
可能出现的情况是，你试图在web页面上使用的字体没有出现，因为所有的字体在所有计算机系统上都不可用。
为了确保文本在大多数浏览器或操作系统上的准确呈现，必须非常仔细地定义字体。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. |
下面的示例将向你展示如何以正确的方式设置font-family属性。
.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. |
无衬线字体Sans-Serif
| 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. |
等宽字体的字体Monospace
| 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字体
不存在跨浏览器和操作系统具有良好可用性的Fantasy字体。
警告: 字体(Verdana, Georgia，“Comic Sans MS”，“Trebuchet MS”，“Arial Black”，Impact)适用于Windows和MacOS，不适用于Unix+X。
评论前必须登录！
注册