@font-face

所谓的网络字体（web fonts），就是并非安装在客户端本地的字体，一般托管在网络服务器上。通过网络字体，就可以使用自定义的字体。为了声明定义自定义的网络字体，则可以借用CSS中的@font-face方式来搞事。

不同的字体格式

下面介绍的大致了解一下即可，实际用时再深究。

TrueType Fonts (TTF)

TrueType是苹果和微软在1980年末规定的一种字体标准，因此，TrueType在苹果Mac OS操作系统和微软的Windows操作系统中应用得非常广泛。

OpenType Fonts (OTF)

OpenType也是一种非常广泛使用的计算机字体格式，它是基于TrueType而创造出来的；它的商标所有权归属于微软。

The Web Open Font Format (WOFF)

WOFF是一种专用于网页的网络字体格式，该字体是2009年发明的，W3C组织推荐。WOFF本质上是基于OpenType和TrueType字体。

The Web Open Font Format (WOFF 2.0)

比WOFF1.0更新，主要体现在更优良的压缩特性。

其它字体格式 诸如SVG Fonts/Shapes、Embedded OpenType Fonts (EOT)等。

---

网络字体格式的浏览器兼容性

下表是每种浏览器支持相应网络字体的最低版本：

字体格式
TTF/OTF	9.0	4.0	3.5	3.1	10.0
WOFF	9.0	5.0	3.5	5.1	11.0
WOFF2	不支持	36.0	35.0	不支持	26.0
SVG	不支持	4.0	不支持	3.2	9.0
EOT	6.0	不支持	不支持	不支持	不支持

使用自定义字体

如下所示，通过@font-face引入设置一个名为fuckfont的自定义字体。如下所示：

@font-face {
   font-family: fuckfont;
   src: url(https://logo.zhuanfou.com/sansation_light.woff);
}

* {
   font-family: fuckfont;
}

运行一下

引入网络字体的url尽量使用小写字母，因为小写字母的兼容性更高，IE就不是太兼容大写字母的网络字体的url地址。

使用加粗的自定义字体

加粗自定义字体，既可以在字体格式层面上设计运用加粗版的字体，也可以利用CSS中的font-weight属性来设置粗体。如下案例中在自定义字体中，使用相同的字体名fuckfont，而引入了另外一套字体sansation_bold.woff，如下所示：

@font-face {
   font-family: fuckfont;
   src: url(https://logo.zhuanfou.com/sansation_light.woff);
}

@font-face {
   font-family: fuckfont;
   src: url(https://logo.zhuanfou.com/sansation_bold.woff);
   font-weight: bold;
}

* {
   font-family: fuckfont;
}

运行一下