CSS字体：Webfont在线字体与外部字体及操作系统预装字体使用指南

前言

熟知，从HTML4时代把图标做在一张图上使用css background来提高页面加载速度到“扁平化UI”趋势的到来，再到“手机UI”简洁化设计的大浪潮的席卷下，使用字体库变得更加广泛，各种字体库层出不穷，并且网站拥有一套精美的字体，也是开发关键因素之一，网站风格与字体风格的配合相当重要。
关于字体，使用字体加密技术，会再一定程度上反爬虫技术，一些关键数据不会被轻易的爬取。
本文介绍和通过demo解释：

（1）操作系统预装字体（font-family）
（2）外部(本地)字体使用（@font-face）
（3）Webfont在线字体引用（@font-face）

操作系统预装字体（font-family）

在CSS3之前，我们只能使用操作系统预装字体，局限性非常大，目前几乎没有项目会使用预装字体。
但我们有必了解一下这些操作系统预装的字体：

一、Windows操作系统

这里引用一下阮一峰老师的中文网页字体开发指南，给出操作系统的预装字体表。

黑体	SimHei
宋体	SimSun
新宋体	NSimSun
仿宋	FangSong
楷体	KaiTi
仿宋GB2312	FangSongGB2312
楷体GB2312	KaiTiGB2312
微软雅黑	Microsoft YaHei （Windows 7开始提供）

二、OS X操作系统

冬青黑体	Hiragino Sans GB （SNOW LEOPARD开始提供）
华文细黑	STHeiti Light （又名STXihei）
华文黑体	STHeiti
华文楷体	STKaiti
华文宋体	STSong
华文仿宋	STFangsong

如果用户装了MicroSoft Office，还会多出一些字体：

华文新魏	STXinwei
华文行楷	STXingkai
华文隶书	STLiti
华文琥珀	STHupo
华文彩云	STCaiyun
方正姚体	FZYaoti
方正舒体	FZShuTi
华文仿宋	STFangsong
华文中宋	STZhongsong
华文宋体	STSong
华文楷体	STKaiti
华文细黑	STXihei
幼圆	YouYuan
隶书	LiSu

使用操作系统预装字体

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用操作系统预装字体</title>
<style>#demo{
/* 可指定多个字体 浏览器会依次选择操作系统中存在的字体 */font-family:"楷体","宋体","黑体";
}</style>
</head>
<body>
<p>我是默认的测试字体！</p>
<p id="demo">我是测试的字体！</p>
</body>
</html>

总结分析：

font-family规范：
（1）按照【font-family:“楷体”,“宋体”,“黑体”; 】排放顺序优先选择排在第一位的字体。
（2）如果找不到该字体，再或者该字体不包括所要渲染文本，它将按照顺序使用下一位字体。
（3）如果所有字体均不存在或无法满足需求，则把选择字体的任务交给操作系统。
注意事项：
（1）应该优先指定英文字体，然后再指定中文字体，否则，中文字体所包含的英文字母会取代英文字体。
（2）应该将中文/英文字体名称都写入，如：【font-family:“楷体”,“KaiTi”; 】，因为这样不会存在兼容问题。
（3）应该同时为windows/mac指定字体，因为它们的中文字体没有交叉。

外部(本地)字体（@font-face）

当CSS3出现，我们使用@font-face可以定义一套精美字体，从本地或服务器载入到浏览器进行渲染字体。
它的出现，使用操作系统预装字体似乎没有必要，因为引入外部字体可以为网站带来更加精美的自定义字体。
嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。

使用外部(本地)字体

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用外部(本地)字体</title>
<style>/* 下载好字体包 然后通过@font-face引入 */@font-face{font-family:“Myfont”; /* 字体名称 */scr:url('fonts/*.ttf'); /* 使用绝对或相对地址指定OpenType字体 */}#demo{font-family:"Myfont"}</style>
</head>
<body>
<p>我是默认的测试字体！</p>
<p id="demo">我是测试的字体！</p>
</body>
</html>

总结分析：

注意事项：
（1）字体文件有很多格式：.ttf、.woff、.eot、.svg等，通常使用.ttf(TrueType)和.otf(OpenType)字体格式。
（2）IE8及更早浏览器只支持微软自有的.eot(Embedded Open Type)格式，IE9.0-10.0部分支持ttf和otf字体格式。
存在的问题：
一套精美的字体库，它的体积高达好几MB甚至更高，即便压缩过后，它依然不小。
这时，繁衍了两种解决方案，开发者通过制作精简版字体（繁琐，修改麻烦，效率低下且容易出错）或使用字体云服务（压缩与转码字体），来解决字体库体积过大问题。

Webfont在线字体引用

就在外部字体与预装字体都不是很好的解决方案时，webfont出现了。
它的出现使得用户不安装网页指定的字体也可以获得同样的显示效果成为可能！

webfont，即网页字体技术，它是一种不需要安装字体文件即可实现在网页中使用并渲染出来的一种技术，它的应用可以很好的运行，不仅解决了字体问题，webfont对搜索引擎更加友好，对SEO优化也有很大的帮助。
目前，大部分网站已经使用了webfont技术，其他网站正在逐步使用webfont技术。

因为webfont技术已经比较成熟了，使用起来也不是那么复杂，侧面来说，加之以5G网络技术的逐渐成熟，5G的普及离我们越来越近了。为什么中文webfont没有被广大中文网站所使用？不就是由于网速还不够快，加载渲染几兆字体的webfont比较吃力吗？为什么现在的中文webfont使用时要进行字符压缩，生成小字库？不就是为了提升网页字体加载渲染的速度，使网页能够完美的被访问吗？因此，在5G普及之后，webfont成为网站标配是必然。

Webfont在线字体引用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用外部(本地)字体</title>
<style>/* 引入webfont在线字体 */
@font-face{font-family:'webfont';src: url('https://code.z01.com/font/ZoomlaXingtiJ6.eot?#iefix'); /* IE9 */src: url('https://code.z01.com/font/ZoomlaXingtiJ6.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */url('https://code.z01.com/font/ZoomlaXingtiJ6.woff') format("woff"), /* chrome、firefox */url('https://code.z01.com/font/ZoomlaXingtiJ6.ttf') format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */url('https://code.z01.com/font/ZoomlaXingtiJ6.svg#ZoomlaXingtiJ6') format("svg"); /* iOS 4.1- */
}#demo{font-family:webfont !important;font-size:30px;font-style: normal;font-weight: normal;}</style>
</head>
<body>
<p id="demo">我是测试字体!</p>
<p>我是测试字体!</p>
</body>
</html>

总结分析：

注意事项：
（1）要格外注意，webfont技术的文件格式，同样存在浏览器兼容问题。
（2）webfont技术支持的常见文件格式有：EOT、TTF/OTF、WOFF、WOFF2、SVG等
（3）使用webfont字体，一定要注意字体的知识产权问题。
（2）webfont是一种字体图标，它有很多优势。相对图片的话，webfont它支持复制、查找、工具翻译、无障碍访问、朗读等。

最后，webfont使用起来同样存在很多问题，如果浏览器未加载完webfont，那字体将怎样被渲染出来？庞大的体及怎么办？
如果想进一步了解webfont问题与优化，则访问我的这篇：webfont技术优化 -webfontloader.js与font-spider！