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个不同的属性,但是对它们的所有解释都超出了本参考的范围-要了解更多信息,请访问W3C CSS字体模块页面。

@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字体