CSS3 - Web字体的使用详解
作者：hangge | 2015-12-31 09:05
有时安全字体不能完全满足我们的使用需求，可以把想要的字体上传到网站（为了支持不同的浏览器，需要上传该字体的多个不同版本）。然后CSS3通过 @font-face 注册这些想要在样式表中使用的字体。
所以要使用@font-face功能并且支持绝大部分浏览器，就需要将字体制作成多种格式，具体如下：
4，添加后备字体
为防止浏览器下载字体文件失败，可以在使用自定义的字体后面添加几个后备字体。
5，将桌面字体转换为Web字体
使用Font Squirrel（这是个在线服务），可以将标准的桌面TTF或OTF字体转化为可用于任何网页的Web字体。
1，Web字体格式
尽管目前所有的浏览器都支持 @font-face，但它们支持的字体文件格式却不一样。比如：EOT格式就只有IE使用，其它浏览器都不支持。
具体格式如下：
| 格式 | 说明 | 适用环境 |
| WOFF | 唯一一个面向未来的字体格式。比较新的浏览器都支持它。 | IE9、Firefox 3.6 和 Chrome 6 及更高版本支持它。 |
| EOF | 微软特有的格式，除了IE没有别的浏览器支持 | IE（IE9之间） |
| TTF、OTF | 桌面应用中常见的字体格式 | 使用Android操作系统的移动设备和（可选的）非IE浏览器 （如：Firefox、Chrome、Safari、Opera） |
| SVG | 一种用于字体的多功能图形格式，效果不好，速度慢。 | 旧版的移动版Safari（iOS4.2之前）和（可选的）Android操作系统的移动设备 |
所以要使用@font-face功能并且支持绝大部分浏览器，就需要将字体制作成多种格式，具体如下：
（1）一个 WOFF 文件：在现代浏览器上性能最好
（2）一个 EOT 文件：兼容旧版IE
（3）一个TTF 或 OTF 文件：兼容Android和旧版的非IE浏览器
（4）一个低质量的 SVG 文件：兼容旧版的iPad和iPhone
2，Web字体的注册
要使用某个字体，首先要注册该字体。即在样式表的开头写一个复杂的 @font-face 规则，如下所示：
local()函数：告诉浏览器这种字体的名字，如果恰好访客电脑中安装了这种字体，浏览器就会使用它。但有时会出问题，所以可以将其传人一个明显瞎编的名字或奇怪的符号，让浏览器在本地找不到该字体。
@font-face {
font-family: 'hangge';
src: url('GreatVibes-Regular.eot');
src:local('hangge'),
url('GreatVibes-Regular.woff?v=4.5.0') format('woff'),
url('GreatVibes-Regular.otf?v=4.5.0') format('truetype'),
url('GreatVibes-Regular.svg?v=4.5.0#fontawesomeregular') format('svg');
}
font-family：是给这款字体起个名字，可以随便起，将来调用的时候用这个名字。local()函数：告诉浏览器这种字体的名字，如果恰好访客电脑中安装了这种字体，浏览器就会使用它。但有时会出问题，所以可以将其传人一个明显瞎编的名字或奇怪的符号，让浏览器在本地找不到该字体。
3，Web字体的使用
在注册完字体后，只需要使用 font-family 属性即可使用该字体。
<div style="font-family:'hangge';font-size:70px;"> hangge.com </div>
4，添加后备字体
为防止浏览器下载字体文件失败，可以在使用自定义的字体后面添加几个后备字体。
h1 {
font-family: 'hangge', arial, serif;
}
5，将桌面字体转换为Web字体
使用Font Squirrel（这是个在线服务），可以将标准的桌面TTF或OTF字体转化为可用于任何网页的Web字体。
比如我们上传一个TTF字体，它就可以生成其它所有Web字体、样式、以及使用样例：
全部评论（0）