CSS Web字体

CSS @font-face规则

Web字体允许Web设计人员使用未安装在用户计算机上的字体。当您找到/购买了您想要使用的字体时，只需在您的网络服务器上包含该字体文件，它将在需要时自动下载给用户。您的“自己的”字体在CSS @font-face规则中定义。

不同的字体格式

TrueType字体（TTF） TrueType是Apple和Microsoft在20世纪80年代后期开发的字体标准。TrueType是Mac OS和Microsoft Windows操作系统最常用的字体格式。 OpenType字体（OTF） OpenType是可伸缩计算机字体的格式。它基于TrueType构建，是Microsoft的注册商标。OpenType字体现在通常用于主要的计算机平台上。 Web开放字体格式（WOFF） WOFF是用于网页的字体格式。它是在2009年开发的，现在是W3C推荐标准。WOFF本质上是具有压缩和附加元数据的OpenType或TrueType。目标是通过带宽限制的网络支持从服务器到客户端的字体分发。 Web开放字体格式（WOFF 2.0） TrueType/OpenType字体，提供比WOFF 1.0更好的压缩。 SVG字体/形状 SVG字体允许在显示文本时将SVG用作字形。SVG 1.1规范定义了一个字体模块，允许在SVG文档中创建字体。您还可以将CSS应用于SVG文档，@font-face规则可以应用于SVG文档中的文本。 嵌入式OpenType字体（EOT） EOT字体是由Microsoft设计的OpenType字体的紧凑形式，用作网页上的嵌入字体。

浏览器支持字体格式

字体格式	Internet Explorer	Chrome	FireFox	Safari	Opera
格式后缀
TTF/OTF	9.0（含）以上	4.0（含）以上	3.5（含）以上	3.1（含）以上	10.0（含）以上
WOFF	9.0（含）以上	5.0（含）以上	3.6（含）以上	5.1（含）以上	11.1（含）以上
WOFF2	不支持	36.0（含）以上	35.0（含）以上	不支持	26.0（含）以上
SVG	不支持	4.0（含）以上	不支持	3.2（含）以上	9.0（含）以上
EOT	6.0（含）以上	不支持	不支持	不支持	不支持

* IE：字体格式仅在设置为“可安装”时有效。 * Firefox：默认情况下不支持，但可以启用（需要将标志设置为“true”才能使用WOFF2）。

使用你想要的字体

在@font-face规则中; 首先定义字体的名称（例如myFirstFont），然后指向字体文件。

@font-face {
     font-family: myFirstFont;
     src: url(sansation_light.woff);
   }

   div {
     font-family: myFirstFont;
   }

尝试一下

使用粗体文字

您必须添加另一个@font-face包含粗体文本描述符的规则：

@font-face {
     font-family: myFirstFont;
     src: url(sansation_bold.woff);
     font-weight: bold;
   }

尝试一下

文件“sansation_bold.woff”是另一个字体文件，其中包含Sansation字体的粗体字符。只要带有font-family“myFirstFont”的文本应该呈现为粗体，浏览器就会使用此功能。这样，您可以@font-face为同一种字体设置许多规则。

CSS字体描述符

下表列出了可在@font-face规则中定义的所有字体描述符：

属性	值	描述
font-family	name	必需的。定义字体名称
src	URL	必需的。定义字体文件的URL
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选的。定义如何拉伸字体。默认是“normal”
font-style	normal 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”