CSS3 @font-face规则

通过CSS3规则为网页添加个人字体。

前言

最近在重写博客的时候想要自己的站点标题与众不同一点，但是又不想用图片代替，所以在想又没有可能通过引用字体实现。然后发现了这个CSS @规则。最开始使用这个的时候，是生成自定义字符小图标的，没有想到还可以自定义字体！

概述

@font-face允许开发者为其网页指定在线字体。通过开发者自备字体的方式，可以消除对用户电脑字体的依赖。
当找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上。
@font-face不仅可以放在CSS的最顶层，也可以在@规则的条件规则组中

浏览器支持

Firefox、Chrome、Safari以及Opera支持 .ttf(True Type Fonts)和 .otf(OpenType Fonts)类型的字体。
Internet Explorer 9+支持新的@font-face规则，但是仅支持.eot类型的字体(Embedded OpenType)。

Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

语法

在新的@font-face规则中，必须首先定义字体的名称，然后指向该字体文件。
如需为HTML元素使用字体，请通过font-family属性来引用字体的名称.

css

@font-face {

使用粗体字体

必须为粗体文本添加另一个包含描述符的font-face

css

@font-face

文件 “Sansation_Bold.ttf” 是另一个字体文件，它包含了 Sansation 字体的粗体字符。
只要 font-family 为 “myFirstFont” 的文本需要显示为粗体，浏览器就会使用该字体。
通过这种方式，我们可以为相同的字体设置许多@font-face规则。

取值

描述符	值	描述
font-family	name	所指定的字体名字将会被用于font或font-family属性，名称随意。
src	URL	远程字体文件位置的URL或者用户计算机上的字体名称，可以使用local语法通过名称指定用户本地计算机上的字体(i.e. src: local('Arial');)。如果找不到该字体，将会尝试其他来源，直到找到它。
font-stretch	normal condensed lutra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义如何拉伸字体。默认是 “normal”。
font-style	ormal italic oblique	可选。定义字体的样式。默认是 “normal”。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认是 “normal”。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。

注意

• 这里使用的Web fonts仍然受到同域限制（字体文件必须和调用它的网页同一域），但可以使用HTTP access controls解除这一限制。
• 因为这里没有为 TrueType(ttf)，OpenType(otf) 和 Web Open File Format(WOFF) 字体定义MIME，因此不能为这些字体类型设置特定的MIME（实际上WOFF的MIME将会是 application/font-woff，但浏览器对此MIME的识别还不统一，其他字体情况也类似，可暂时使用 application/octet-stream）。
• 不能在一个 CSS 选择器中定义 @font-face。
  例如 ，这样写是无效的:
  css

  .className { 

  ---

  ## 参考 MDN web docs - [@font-face](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face)

W3school - CSS3字体

张鑫旭 - 真正了解CSS3背景下的@font-face规则