CSS字体在Web浏览器中的应用
混乱的字体命名问题
设置字体属性是样式表的最常见的用途之一。不过，尽管字体选择很重要，但是目前还没有一种办法能确保在 Web 上一致地使用字体，因为没有一种统一描述字体和字体的变形的方法。
例如，字体 Times、Times New Roman 和 TimesNR 可能很类似，甚至完全相同，不过用户代理怎么能知道这一点呢？创作人员可能在一个文档中指定字体为 TimesNR，但是如果用户机器上没有安装这种字体，用户查看文档会看到什么呢？即使安装了 Times New Roman，用户代理也不知道这两个字体（Times New Roman 和 TimesNR）实际上是可以互换的。如果你希望一个浏览器上一定采用某种字体，请别妄想了。
与文字处理软件相比，CSS 对字体并没有提供更多的最终控制；比如加载你创建的一个 Microsoft Office 文档时，其显示可能取决于他已经安装的字体。如果他安装的字体与你的字体不同，那么文档看上去会大不相同。使用 CSS 设计的文档也是如此。
涉及到各种繁杂的字体变形时，如粗体或斜体文本，字体命名的问题就更是混乱。大多数人都知道，斜体文本看上去很像，但是很少有人能解释它与倾斜文本有什么区别，甚至不知道二者之间存在区别。
Slanted 并不是斜体风格（italic-style）文本的唯一别名，例如，你可能还会看到 oblique、incline（或 inclined）、cursive 和 kursiv 等待字眼。因此，一种字体可能有一个 TimesItalic 变形，而另一种字体可能使用 GeorgiaOblique 作为变形。尽管这两种字体实际上就相当于 Times 和 Georgia 字体的“斜体形式”，但是它们的“称呼”有很大的不同。类似地，字体变形词 bold、black 和 heavy 可能表示同一个意思，也可能不同。
通用字体系列
前面讨论过，实际上相同的字体可能有很多不同的称呼，不过 CSS 迈出了勇敢的一步，力图帮助用户代理把这种混乱状况理清楚。
我们所认为的“字体”可能有许多字体变形组成，分别用来描述粗体、斜体文本，等等。例如，你可能已经对字体 Times 很熟悉。不过，Times 实际上是多种变形的一个组合，包括 TimesRegular、TimesBold、TimesItalic、TimesOblique、TimesBoldItalic、 TimesBoldOblique，等等。Times 的每种变形都是一个具体的字体风格（font face），而我们通常认为的 Times 是所有这些变形字体的一个组合。换句话说，Times 实际上是一个字体系列（font family），而不只是单个的字体，尽管我们大多数人都认为字体就是某一种字体。
除了各种特定字体系列外（如 Times、Verdana、Helvetica 或 Arial），CSS 还定义了 5 种通用字体系列：
Serif 字体
这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则成该字符是成比例的。例如，小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰，比如小写 l 顶部和底部的短线，或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。
Sans-serif 字体
这些字体是成比例的，而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
Monospace 字体
Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相 同，所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为 Monospace 字体，而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。
Cursive 字体
这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。
Fantasy 字体
这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。
理论上讲，用户安装的任何字体系列都会落入到上述某种通用系列中，但实际上可能并非如此，不过例外情况（如果有的话）往往很少。
字体在Web浏览器当中的使用
CSS当中定义字体类型的属性是：font-family；
语法：{font-family:字体1,字体2,字体3,...}
作用：调用客户端字体
说明：
当指定多种字体时，用“，”分隔每种字体名称。
当字体名称包含两个以上分开的单词时，用“”把该字体名称括起来。
当样式规则外已经有“”时，用‘’代替“”。
注意：如 果在font-family后加上多种字体的名称，浏览器会按字体名称的顺序逐一在用户的计算机里寻找已经安装的字体，一旦遇到与要求的相匹配的字体，就 按这种字体显示网页内容，并停止搜索；如果不匹配就继续搜索，直到找到为止，万一样式表里的所有字体都没有安装的话，浏览器就会用自己默认的字体来替代显 示网页的内容。
以下是小编自己做的一个测试页面，小编发现，这几种字体类型，并不是所有浏览器都认识的，兼容的最好的应该是IE，其他的类似于Firefox、Chrome、Safari、360、Opera等都兼容的不是很好。
Code:
<html>
<head>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:18px;line-height:22px;}
h1{ font-size:20px; color:#f00;line-height:32px; }
h3{ font-size:18px; color:#fa0;line-height:28px;}
.warp{ width:660px; margin:0 auto; padding-top:20px;}
.f_l{ float:left;}
.f_r{ float:right;}
.w_320{ width:320px;}
.clearfix:after { visibility: hidden;display: block; content: " ";clear: both;height: 0; }.clearfix{*zoom:1;}
</style>
</head>
<body>
<div class="warp clearfix">
<div class="f_l w_320">
<h1>常用字体样式</h1>
<p style="font-family:SimSun,sans-serif">SimSun 宋体无衬线</p>
<p style="font-family:SimSun,serif">SimSun 宋体有衬线</p>
<p style="font-family: SimHei,sans-serif">SimHei 黑体无衬线</p>
<p style="font-family: SimHei,serif">SimHei 黑体有衬线</p>
<p style="font-family: Microsoft JhengHei,sans-serif"> Microsoft JhengHei 微软正黑体无衬线</p>
<p style="font-family: Microsoft JhengHei,serif">Microsoft JhengHei 微软正黑体有衬线</p>
<p style="font-family: Microsoft YaHei,sans-serif"> Microsoft YaHei 微软雅黑体无衬线</p>
<p style="font-family: Microsoft YaHei,serif">Microsoft YaHei 微软雅黑体有衬线</p>
<p style="font-family: Times New Roman,sans-serif"> Times New Roman 无衬线</p>
<p style="font-family: Times New Roman,serif">Times New Roman 有衬线</p>
<h1>五种字体系列</h1>
<h3 style="font-family: monospace">monospace 字体</h3>
<p style="font-family:Courier,monospace">Courier 字体</p>
<p style="font-family:Andale Mono,monospace">Andale Mono 字体</p>
<p style="font-family:Courier New,monospace">Courier New 字体</p>
<h3 style="font-family: fantasy ">fantasy 字体</h3>
<p style="font-family:Western,fantasy">Western 字体</p>
<p style="font-family:Woodblock,fantasy">Woodblock 字体</p>
<p style="font-family:Klingon,fantasy">Klingon 字体</p>
</div>
<div class="f_r w_320">
<h3 style="font-family: sans-serif">Sans-serif 无衬线字体</h3>
<p style="font-family: Verdana,sans-serif"> Verdana 无衬线</p>
<p style="font-family: Verdana,serif">Verdana 有衬线</p>
<p style="font-family: Arial,sans-serif"> Arial 无衬线</p>
<p style="font-family: Arial,serif">Arial 有衬线</p>
<p style="font-family: Helvetica,sans-serif"> Helvetica 无衬线</p>
<p style="font-family: Helvetica,serif">Helvetica 有衬线</p>
<p style="font-family: Univers,sans-serif"> Univers 无衬线</p>
<p style="font-family: Univers,serif">Univers 有衬线</p>
<p style="font-family: Geneva,sans-serif"> Geneva 无衬线</p>
<p style="font-family: Geneva,serif">Geneva 有衬线</p>
<h3 style="font-family: serif">serif 有衬线字体</h3>
<p style="font-family:Times,sans-serif">Times 无衬线</p>
<p style="font-family:Times,serif">Times 有衬线</p>
<p style="font-family:Georgia ,sans-serif">Georgia 无衬线</p>
<p style="font-family:Georgia ,serif">Georgia 有衬线</p>
<p style="font-family:New Century Schoolbook,sans-serif">New Century Schoolbook 无衬线</p>
<p style="font-family:New Century Schoolbook,serif">New Century Schoolbook 有衬线</p>
<h3 style="font-family: cursive">cursive 字体</h3>
<p style="font-family:Zapf Chancery,cursive">Zapf Chancery 字体</p>
<p style="font-family:Author,cursive">Author 字体</p>
<p style="font-family:Comic Sans,cursive">Comic Sans 字体</p>
</div>
</div>
</body>
</html>IE10：
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
全部评论（4条）