原文标题:使用@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/
发表评论(不用注册哟!)