@font-face

版本：CSS3

@font-face 的CSS @规则，它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。@font-face 不仅可以放在在CSS的最顶层，也可以放在@规则的条件规则组中。

@font-face CSS at-rule 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载。如果提供了local()函数，从用户本地查找指定的字体名称，并且找到了一个匹配项，本地字体就会被使用。否则，字体就会使用url()函数下载的资源。通过@font-face允许作者提供他们自己的字体，让设计内容成为了一种可能，同时并不会被所谓的"网络-安全"字体所限制(字体如此普遍以至于它们能被广泛的使用).指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体，同时在不依赖网络情况下实现此功能。

在同时使用url()和local()功能时，为了用户已经安装的字体副本在需要使用时被使用，如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。
@font-face 规则不仅仅使用在CSS的顶层，还可以用在任何CSS条件组规则中。

在 HTML5 中，已知的 foreign elements(“外语元素，比如SVG和math命名空间中的元素”)将被自动加上命名空间。这意味着即使文档中没有任何xmlns属性，HTML元素也将表现的如同他们在XHTML命名空间内(http://www.w3.org/1999/xhtml)一样，而svg和math元素则将被加上对应的命名空间(http://www.w3.org/2000/svg 和http://www.w3.org/1998/Math/MathML).

Note:在 XML中，除非前缀直接定义在了一个属性上（例如：xlink:href），这个属性就不会有命名空间。换句话说，属性将不会继承其所在元素的命名空间，为了符合这个行为，CSS中的默认命名空间不会加到属性选择器中

示例

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

浏览器支持


浏览器都支持`@font-face`

语法

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}

取值

font-family：所指定的字体名字将会被用于font或font-family属性(i.e. font-family:<family-name>;)
src：远程字体文件位置的URL或者用户计算机上的字体名称，可以使用local语法通过名称指定用户的本地计算机上的字体(i.e. src: local('Arial');)。如果找不到该字体，将会尝试其他来源，直到找到它。
font-variant：A font-variant value.
font-stretch：A font-stretch value.
font-weight：A font-weight value.
font-style：对于src所指字体的描述。如果所需字体符合描述，则采用本font-face所定义的字体。
unicode-range：在该@font-face中定义的unicode字体范围

注意

这里使用的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 。例如，这样写是无效的：

.className { 
  @font-face { 
    font-family: MyHelvetica; 
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
    font-weight: bold; 
  } 
}

示例

下面的例子简单定义了一个可下载的字体，并应用到了文档的整个body标签上。

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

在接下来的例子中，用到了用户本地字体"Helvetica Neue Bold"的备份；如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过)，就会用下载的字体"MgOpenModernaBold.ttf"来代替：

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

示例

这个例子新定义了一个字体，正常粗细的字采用字体Times New Roman，粗体字采用Consolas。

@font-face {
    font-family: myFirstFont;
    src: local("Times New Roman");
    font-weight:normal;
}

@font-face {
    font-family: myFirstFont;
    src: local(Consolas);
    font-weight:bold;
}

示例

@font-face{
	font-family: 'diyfont';
	src: url('diyfont.eot'); /* IE9+ */ 
	src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
	url('diyfont.woff') format('woff'), /* chrome、firefox */ 
	url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ 
	url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */ 
}

@font-face
{
	font-family:myfirstfont;
	src:url('sansation_light.ttf'),
	url('sansation_light.eot'); /* ie9 */
}