@font-face 规则用于将要在样式表中使用的字体名称与某些可下载字体相关联,@font-face CSS at-rule 指定一个用于显示文本的自定义字体。
该规则中使用字体系列font-family描述符来命名字体,并且src描述符与外部字体名称关联。
该规则的语法如下:
@font-face: font-description
该@font-face规则包含一个或多个属性的声明,就像那些在常规CSS,这是所谓的字体描述。您最多可以指定24个不同的属性,但是对它们的所有解释都超出了本参考的范围-要了解更多信息,请访问W3C CSS字体模块页面。
@font-face规则的一般形式为:
稍后,字体可以用作属性(如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-family | font-family | 定义将用作font-family字体属性值的字体名称。 |
src | src | 指定要使用的字体文件的位置。 |
可选 -以下参数是可选的。 | ||
font-style | font-style | 有效的font-style属性值。 |
font-weight | font-weight | 有效的font-weight属性值(相对值bolder和除外lighter)。 |
@font-face属性浏览器的兼容性,下表中的数字表示支持该属性的浏览器最低版本号;所有主流浏览器均支持该规则。
|
注意:在浏览器中,对特定字体技术的支持差异很大。Internet Explorer支持.eot和.wof类型的字体,而Firefox,Chrome,Safari和Opera支持.woff, .ttf和.otf类型的字体。
请参考以下教程:CSS字体。