font-family网站字定义字体方法与format字体格式及文件后缀

原文标题:使用@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 参数字体格式常见扩展名
truetypeTrueType.ttf
opentypeOpenType.ttf, .oft
truetype-aatTrueType with Apple Advanced Typography extensions.ttf
embedded-opentypeEmbedded OpenType.eot
svgSVG Font.svg, .svgz

浏览器对各种 Web 字体的支持情况:

IE6 IE7 IE8Firefox 3.5+Firefox 3.6+ChromeSafariOpera
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/




如果文章对您有帮助|有启发|有共鸣|有“爽了”,请随意打赏。您的支持是我的动力和价值的体现。

----------我不是街头卖艺者,但我渴望被打赏,博客要生存下去不容易。
----------我不是酒店服务生,但我渴望被打赏,博主也有妻儿子女一家子人。
----------我不是乞丐叫花子,但我渴望被打赏,渴望被打赏的价值认同感。
----------我不是建筑搬运工,但我渴望被打赏,我是蜜蜂我阅读/挑选/整合/转载/传播。
----------我不是作家或教授,但我渴望被打赏,咱中国人也能主动为知识/为受益而付费。

感谢土豪的打赏!


一码支持:微信/支付宝

打赏qoogle的二维码


分享,也是您对我的热力支持。谢谢!

内容版权声明:除转载分类下的文章来源网络(直转或整合而成),其它皆为本站原创文章。

转载注明出处:http://qoogle.cn/?id=46

发表评论(不用注册哟!)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。