原文标题：使用@font-family时各浏览器对字体格式（format）的支持情况
转载理由：
清淅易查询应用。
注意format格式和文件后缀不是一样的东东！
为什么要自定义字体文件？
1、中文的字体库文件很大，不利于网上转输与下载。
2、用文字代替图片网页会更轻量，且有利于SEO。
3、自定义的字体库文件只用于特殊的局部，因此字体库文件的子集字元素会很少，文件也不会很大。
=======正文 (选改)=======
一、TureTpe(.ttf)格式：
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有：
【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】
二、OpenType(.otf)格式：
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有：
【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】
三、Web Open Font Format(.woff)格式：
.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有:
【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】
四、Embedded Open Type(.eot)格式：
.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有:
【IE4+】
五、SVG(.svg)格式：
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有:
【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。
=======正文 (选改)=======
format格式参考值：
| format 参数 | 字体格式 | 常见扩展名 |
|---|---|---|
| truetype | TrueType | .ttf |
| opentype | OpenType | .ttf, .oft |
| truetype-aat | TrueType with Apple Advanced Typography extensions | .ttf |
| embedded-opentype | Embedded OpenType | .eot |
| svg | SVG Font | .svg, .svgz |
浏览器对各种 Web 字体的支持情况：
| IE6 IE7 IE8 | Firefox 3.5+ | Firefox 3.6+ | Chrome | Safari | Opera | |
|---|---|---|---|---|---|---|
| TrueType, OpenType | 不支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
| Embedded OpenType | 支持 | 不支持 | 不支持 | 不支持 | 不支持 | 不支持 |
| SVG Font | 不支持 | 不支持 | 不支持 | 支持 | 支持 | 支持 |
| WOFF | 不支持 | 不支持 | 支持 | 不支持 | 不支持 | 不支持 |
@font-family标签的css格式参考：
@font-face {
font-family: '自己定义一个你的字体引用的名称，最好英文吧'; /* 之后你的字体调用就可以用font-family:自己定义的字体名称； */
src:url('你做的eot文件名.eot?') format('embedded-opentype'), /*逗号隔开*/
url('你做的woff文件名.woff') format('woff'),
url('你做的ttf文件名.ttf') format('truetype'); /*分号结束*/
}
// format也可以不用，全删除。指定错了字体会无效！制做自己的字体文件，自定义字体文件，在线工具：
https://www.fontke.com/tool/
发表评论(不用注册哟！)