CSS @font-face-reglen

Definition og brug

Ved at bruge @font-face-reglen behøver webdesignere ikke længere at bruge nogen "sikkerhedsskrifter".

I @font-face-reglen skal du først definere skriftens navn (f.eks. myFirstFont) og derefter pege på skriftfilen.

Tip:URL'en til skriften skal bruge små bogstaver. Store bogstaver kan føre til uventede resultater i IE!

For at bruge skriften i HTML-elementer, henvis til skriftens navn gennem font-family-attributten (myFirstFont):

div {
  font-family: myFirstFont;
}

Se også:

CSS tutorial:CSS Web Fonts

实例

Specificer en skrift med navnet "myFirstFont" og angiv URL'en, hvor den kan findes:

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

亲自试一试

Du kan finde flere TIY eksempler nedenfor på siden.

CSS syntaks

@font-face {
  font-properties
}
skriftbeskrivelse værdi beskrivelse
font-family name påkrævet. Definer skriftens navn.
src URL påkrævet. Definer URL'en til at downloade skriften.
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"。

更多实例

实例

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

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

亲自试一试

文件 "sansation_bold.woff" 是另一个字体文件，其中包含 Sansation 字体的粗体字符。

每当设置字体族 "myFirstFont" 的一段文本应呈现为粗体时，浏览器就会使用它。

这样，您可以为同一字体设置多个 @font-face 规则。

浏览器支持

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

表格中的数字说明了完全支持字体格式的首个浏览器版本。

字体格式
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG 不支持 不支持 不支持 3.2 不支持
EOT 6.0 不支持 不支持 不支持 不支持

* Edge 和 IE: 字体格式仅在设置为 "installable" 时有效

* Firefox：标准情况下是禁用的，但可以启用（需要将标志设置为 "true" 才能使用 WOFF2）。