CSS @font-face-sääntö

Määrittely ja käyttö

Käyttämällä @font-face-sääntöä web-taiteilijat eivät enää tarvitse käyttää mitään "sécurité"-kirjastimia.

Fontti-ominaisuudessa @font-face-säännöissä sinun täytyy ensin määritellä kirjasimen nimi (esim. myFirstFont) ja sitten osoittaa fonttiedostoon.

Vinkki:Kirjasimen URL:n kirjaimet ovat pieniä. Isot kirjaimet voivat aiheuttaa odottamattomia tuloksia IE:ssä!

Jos haluat käyttää kirjastinta HTML-elementissä, viittaa kirjasimen nimeen (myFirstFont) font-family-ominaisuuden avulla:

div {
  font-family: myFirstFont;
}

Katso myös:

CSS-opas:CSS Web-fontit

实例

Määritä nimi "myFirstFont" oleva kirjasin ja määritä sen löydettävän URL:n osoite:

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

亲自试一试

Lisää TIY-esimerkkejä löytyy sivun alalta.

CSS-grammatiikka

@font-face {
  font-properties
}
Fonttikuvauksia Arvo Kuvaus
font-family name Välttämätön. Määritä kirjasimen nimi.
src URL Välttämätön. Määritä ladattavan kirjasimen 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"。

更多实例

实例

您必须添加另一个 @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 Not supported Not supported Not supported 3.2 Not supported
EOT 6.0 Not supported Not supported Not supported Not supported

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

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