目前常用的字体格式

目前最主要的几种网络字体(web font)格式包括WOFF，SVG，EOT，OTF/TTF。

WOFF

WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上，由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些，因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势，因为所有的现代浏览器都开始支持这种字体格式。

SVG / SVGZ

Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用。只有iPhone上的Safari(4.1)之前的版本支持它。目前火狐、IE都不支持SVG字体格式。火狐推迟对SVG字体的支持，重点放在WOFF格式上。SVGZ是压缩版的SVG。

EOT

Embedded Open Type。这是微软创造的字体格式(是微软在15年前发明了网络字体@font-face)。这种格式只在IE6/IE8里使用。

OTF / TTF

OpenType Font 和 TrueType Font。部分的因为这种格式容易被复制(非法的)，这才催生了WOFF字体格式。然而，OpenType有很多独特的地方，受到很多设计者的喜爱。

字体兼容性

如上所述，在不同浏览器及尤其是IE的不同版本中，浏览器对于字体格式的支持都是不统一的，所以为了保证UI，需要使用字体兼容性处理，具体样例如下：

   @font-face {        font-family: 'YourWebFontName';        src: url('YourWebFontName.eot'); /* IE9 Compat Modes */        src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */   }

字体非兼容性处理方案

目前主流浏览器都支持.woff格式，所以如果不考虑兼容性问题的话可以放心的使用woff字体格式。
具体浏览器支持情况可以参见：caniuse.com/#search=web…

转载于:https://juejin.im/post/5aefebb6f265da0ba60fb714

网络字体(Web font)文件格式及兼容性说明相关推荐

网络字体的中文用法(一)
网络字体的中文用法(一) 2014年6月10日歪脖骇客 1条评论 9 如果你使用的Windows XP操作系统,在浏览中文网页时,你会发现网页上的汉字基本上全部都是宋体.这是因为你的操作系统里安装了 ...
@font-face 网络字体的中文用法(一)
如果你使用的Windows XP操作系统,在浏览中文网页时,你会发现网页上的汉字基本上全部都是宋体.这是因为你的操作系统里安装了中文宋体字库,而且被设定为默认字体.浏览器会用你的默认字体显示网页上的汉 ...
Web字体格式介绍及浏览器兼容性一览
目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体 ...
【ttf 压缩】html网页引用中文字体，文件过大，加载缓慢的解决办法【字蛛】【web font】
[以下有部分内容引用的网络文章] 我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题, ...
怎么让qt发声_第3部分：添加网络字体-让我们的单词发声
怎么让qt发声 This is a big week for the project. While it was an important step last week to establish so ...
css 中文文字字体_使用CSS的网络字体
css 中文文字字体 CSS | 网络字体 (CSS | Web fonts) Web fonts allow people to use fonts that are not pre-install ...
Linux网络服务-Web Service之【apache的功能、安装、配置文件介绍以及实验实例】(三)...
上两张博文: < Linux网络服务-Web Service之[HTTP协议简介](一) > <Linux网络服务-Web Service之[Apache-Prefork.Worke ...
web前端关于浏览器兼容性
web前端关于浏览器兼容性所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登 ...
css字体 text,css文本样式text、字体样式font
文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...

网络字体(Web font)文件格式及兼容性说明