CSS Web-fontit

CSS @font-face-sääntö

Web-fontit mahdollistavat web-suunnittelijoiden käytön käyttäjän tietokoneessa asentamattomia fontteja.

Kun löydät/ostat haluamasi fontin, sinun tarvitsee vain sisällyttää fonttitiedosto verkkopalvelimesi, ja se ladataan automaattisesti käyttäjälle tarvittaessa.

Omat fonttisi CSS:ssä @font-face säännellään.

Eri fonttipoolit

TrueType-fontti (TTF)

TrueType on Apple ja Microsoftin kehittämä fonttistandardi 1980-luvun lopulla. TrueType on Mac OS ja Microsoft Windows -käyttöjärjestelmien yleisimmin käytetty fonttipooli.

OpenType-fontti (OTF)

OpenType on skaalautuva tietokonefonttien muoto. Se rakentuu TrueType-pohjalle ja on Microsoftin rekisteröity tavaramerkki. Tänään OpenType-fontit ovat yleisesti käytössä tärkeimmillä tietokonealustoilla.

Web Open Font Format (WOFF)

WOFF on fonttipooli, joka käytetään verkkosivuilla. Sitä kehitettiin vuonna 2009 ja se on nyt W3C:n suositeltu standardi. WOFF on itse asiassa kompressoituja ja mukana meta-dateja sisältävä OpenType tai TrueType. Tavoitteena on tukea fonttien jakelua palvelimelta asiakasohjelmaan bändirajoitettujen verkkoyhteyksien yllä.

Web Open Font Format (WOFF 2.0)

TrueType/OpenType-fontit tarjoavat paremman kompressoinnin kuin WOFF 1.0.

SVG-fontit/muodot

SVG-fontit mahdollistavat SVG:n käytön kirjasintyypeinä näytettäessä tekstiä. SVG 1.1-standardeissa määritellään fonttimoduuli, joka mahdollistaa kirjasinten luomisen SVG-dokumentissa. Voit myös soveltaa CSS:ää SVG-dokumentteihin, ja @font-face-sääntöä voidaan soveltaa SVG-dokumenttien tekstiin.

Sisäänrakennettu OpenType-Fontti (EOT)

EOT字体是Microsoft设计的OpenType字体的紧凑形式，用作网页上的嵌入式字体。

对字体格式的浏览器支持

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

字体格式
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 不支持 不支持 不支持 不支持

*IE：该字体格式仅在设置为 "installable" 时有效。

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

使用您需要的字体

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

提示：字体 URL 始终使用小写字母。大写字母可能会在 IE 中产生意外结果。

如需将字体用于 HTML 元素，请通过 font-family 属性引用字体名称（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 字体的粗体字符。

每当带有 "myFirstFont" 字体族的一段文本应呈现粗体时，浏览器都会使用它。

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

CSS 字体描述

下表列出了能够在 @font-face 规则内定义的所有字体描述符（font descriptor）：

描述符 值 描述
font-family name 必需。定义字体名称。
src URL 必需。定义字体文件的 URL。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Valinnainen. Määrittää, kuinka fonttia venytetään. Oletusarvo on "normal".
font-style
  • normal
  • italic
  • oblique
 Valinnainen. Määrittää fontin tyylin. Oletusarvo on "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Valinnainen. Määrittää fontin paksuuden. Oletusarvo on "normal".
unicode-range unicode-range Valinnainen. Määrittää fontin tukeman UNICODE-merkkien alueen. Oletusarvo on "U+0-10FFFF".