个性化阅读
专注于IT技术分析

css3 web安全字体参考文档 – CSS3高级教程

上一章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-familyNormalBold
Georgia, serifThis is normal text.This is bold text.
“Times New Roman”, Times, serifThis is normal text.This is bold text.
“Palatino Linotype”, Palatino, “Book Antiqua”, serifThis is normal text.This is bold text.

无衬线字体Sans-Serif

font-familyNormalBold
Arial, Helvetica, sans-serifThis is normal text.This is bold text.
“Arial Black”, Gadget, sans-serifThis is normal text.This is bold text.
Impact, Charcoal, sans-serifThis is normal text.This is bold text.
Tahoma, Geneva, sans-serifThis is normal text.This is bold text.
“Trebuchet MS”, Helvetica, sans-serifThis is normal text.This is bold text.
Verdana, Geneva, sans-serifThis is normal text.This is bold text.

等宽字体的字体Monospace

font-familyNormalBold
Courier, monospaceThis is normal text.This is bold text.
“Courier New”, Courier, monospaceThis is normal text.This is bold text.
“Lucida Console”, Monaco, monospaceThis is normal text.This is bold text.

草书字体

font-familyNormalBold
“Comic Sans MS”, cursiveThis is normal text.This is bold text.
“Courier New”, Courier, monospaceThis is normal text.This is bold text.
“Lucida Console”, Monaco, monospaceThis is normal text.This is bold text.

Fantasy字体

不存在跨浏览器和操作系统具有良好可用性的Fantasy字体。

警告: 字体(Verdana, Georgia,“Comic Sans MS”,“Trebuchet MS”,“Arial Black”,Impact)适用于Windows和MacOS,不适用于Unix+X。

赞(0)
未经允许不得转载:srcmini » css3 web安全字体参考文档 – CSS3高级教程

评论 抢沙发

评论前必须登录!