CSS @font-face规则

定义和用法

根据@font-face规则，网页设计师不再需要使用“Web Safe”字体。在@font-face规则中，您必须首先定义字体的名称（例如myFirstFont），然后指向字体文件。

提示：对字体URL使用小写字母。大写字母可以在IE中给出意想不到的结果！

要将字体用于HTML元素，请通过font-family属性引用字体名称（myFirstFont）：

img {
  -webkit-@font-face: grayscale(100%); /* Safari 6.0 - 9.0 */
  @font-face: grayscale(100%);
}

@font-face Internet Explorer，Firefox，Opera，Chrome和Safari支持该规则。

表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

格式	IE/Edge	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	不支持	不支持	不支持	不支持

* Edge和IE：字体格式仅在设置为“可安装”时有效。

* Firefox：默认情况下禁用，但可以启用（需要将标志设置为“true”才能使用WOFF2）。

@font-face { font-properties }

指定名为“myFirstFont”的字体，并指定可在其中找到的URL：

img {
  -webkit-@font-face: grayscale(100%); /* Safari 6.0 - 9.0 */
  @font-face: grayscale(100%);
}

尝试一下

字体属性	值	描述
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”