WOFF：网页开放字体格式

Web开放字体格式（WOFF，Web Open Font Format）是一种网页所采用的字体格式标准。此字体格式发展于2009年，现在正由万维网联盟（www）的Web字体工作小组标准化，以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小，并且不包含加密，也不受DRM（数位著作权管理）限制。

WOFF：Web Open Font Format（Web开放字体格式）

MIME类型：application/x-font-woff

压缩格式：zlib压缩

WOFF 发展历程

2010年4月8日，Mozilla基金会、Opera软件公司和微软提交WOFF之后，万维网联盟发表评论指，希望WOFF不久能成为所有浏览器都支持的、“单一、可互操作的(字体)格式”。

2010年7月27日，万维网联盟将WOFF作为工作草案发布。

WOFF的MIME类型是：application/x-font-woff，目前的IIS7里面默认没有这个MIME类型，如果要让网站支持这个，请在IIS7里面的MIME类型里面添加woff。

WOFF本质上是包含了基于sfnt的字体（如TrueType、OpenType或开放字体格式），且这些字体均经过WOFF的编码工具压缩，以便嵌入网页中。WOFF字体格式使用zlib压缩，文件大小一般比TTF小40%

WOFF（网页开放字体格式）是由 Mozilla 与 Type Supply, LettError 及其他组织协同开发的一种新的网页字体格式。它使用了一种压缩版本，类似于 TrueType, OpenType, Open Font 所采用的 SFNT 结构，不过还添加了共用数据及用户私有数据结构，其中包括了自定义空间，其允许厂家和经销商提供许可证。

WOFF 有以下三点优势：

1）字体采用压缩格式，相对于使用不压缩的 TrueType, OpenType 的网站，将占用更少的带宽，获得更快的加载速度。

2）许多字体经销商并不愿意将 TrueType 或 OpenType 的许可证颁发给网站，他们更愿意颁发 WOFF 的许可证。这对于网站开发者来说将是一个福音。

3）无论是收费还是免费的浏览器厂家都喜欢 WOFF 格式，因此它很可能成为未来的主流与跨平台字体格式。

WOFF 支持兼容

WOFF得到许多主要字体制造公司的支持，并且已经为Mozilla Firefox3.6版所支持。

微软自第三个platform review版本的Internet Explorer 9起，就对WOFF添加了全部的支持。

WebKit浏览器支持WOFF，Safari自5.1起支持WOFF，Google Chrome则自6.0起就支持WOFF。

Presto自2.7.81起支持WOFF。

数据来源：https://developer.mozilla.org/zh-CN/docs/WOFF

兼容测试：https://github.com/mdn/browser-compat-data

自定义web字体

将某个需要的字体进行下载，放入到项目中对该字体进行引用
关于常用web字体的格式：
safari（3.2+）：.ttf .otf
opera(10+) : .ttf .otf .svg
IE:从IE4支持的是.eot  IE9以上支持的是.woff
Firefox(3.5+):.ttf .otf .woff
Google Chrome：.ttf .otf .woff

支持所有的浏览器：.ttf/.otf +.eot+.woff
@font-face {
    font-family: 'myFont';/*设置自定字体的名称*/
    src:url("fonts/AlexBrush-Regular.ttf");/*字体文件路径*/
}
p{
    font-family: myFont;/*对字体进行调用*/
    font-size: 50px;
}
注用意：如果引入的字体文件有多个格式，那么多个格式文件的引入的路径隔开：
src:url("fonts/AlexBrush-Regular.ttf"),url("fonts/AlexBrush-Regular.eot"),url("fonts/AlexBrush-Regular.woff");

步骤：
1、下载字体
2、字体格式转换（兼容各大浏览器）
3、字体文件导入项目（放入fonts文件夹中）
4、字体定义
@font-face{
  font-family:”自定义字体的名称”;
  src:url(字体文件路径1),url(字体文件路径2),……;
}
选择器{
  font-family:”通过名称调用”;
}

参考推荐：

HTML CSS 字体大小 pt、px、em、rem 用法详解

CSS 自适应多屏大小的 @media 用法详解

PC网站自动适配手机网页的方法技巧

PC端网页自适应手机屏幕大小

JS检测移动端自适应屏幕大小