CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS @font-face 规则

@font-face 规则用于将要在样式表中使用的字体名称与某些可下载字体相关联，@font-face CSS at-rule 指定一个用于显示文本的自定义字体。

 该规则中使用字体系列font-family描述符来命名字体，并且src描述符与外部字体名称关联。

的使用语法

该规则的语法如下：

@font-face: font-description

该@font-face规则包含一个或多个属性的声明，就像那些在常规CSS，这是所谓的字体描述。您最多可以指定24个不同的属性，但是对它们的所有解释都超出了本参考的范围-要了解更多信息，请访问页面。

@font-face规则的一般形式为：

@font-face { font-family: fontname; src: url(fontfile path); }

稍后，字体可以用作属性（如font-family和）中的名称font，但是如果不支持可下载字体或由于某种原因无法加载字体，则应指定其他字体名称作为备用。

下面的示例演示了如何使用@font-face属性。

  @font-face {
   font-family: "OpenSans";
   src: url("../fonts/OpenSans-Regular.eot");
   src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
  }
  body {
   font-family: "OpenSans", Arial, sans-serif;
   font-size: 1.2em;
  }
测试看看

注意：通过使用@ font-face规则，您不必依赖用户在计算机上安装的字体数量的限制。

通过设置相应的规则到，当设置了诸如粗体或斜体之类的特定字体特征时，也可以设置对特定的可下载字体的选择@font-face。

  @font-face {
	font-family: "OpenSans";
   src: url("../fonts/OpenSans-Regular.eot");
   src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
  }
  @font-face {
   font-family: "OpenSansBold";
   src: url("../fonts/OpenSans-Bold.eot");
	src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
  }
  h1 {
   font-family: "OpenSansBold", Arial, sans-serif; /* Specify the OpenSans bold font */
  }
  p {
   font-family: "OpenSans", Arial, sans-serif;
  }
测试看看

参量

参数的含义如下：

参数值描述
必需 -以下参数是必需的。
font-familyfont-family定义将用作font-family字体属性值的字体名称。
srcsrc指定要使用的字体文件的位置。
可选 -以下参数是可选的。
font-stylefont-style有效的font-style属性值。
font-weightfont-weight有效的font-weight属性值（相对值bolder和除外lighter）。

浏览器兼容性

@font-face属性浏览器的兼容性，下表中的数字表示支持该属性的浏览器最低版本号；所有主流浏览器均支持该规则。

Browsers Icon

  • Firefox 3.5+

  • Google Chrome 4+

  • Internet Explorer 4+

  • Apple Safari 3.1+

  • Opera 10+

注意：在浏览器中，对特定字体技术的支持差异很大。Internet Explorer支持.eot和.wof类型的字体，而Firefox，Chrome，Safari和Opera支持.woff，   .ttf和.otf类型的字体。

进一步阅读

请参考以下教程：CSS字体。

CSS @keyframes 规则CSS @charset 规则