CSS Web 字体

CSS @font-face 规则

Web 字体允许 Web 设计人员使用用户计算机上未安装的字体。

当您找到/购买了想要使用的字体后，只需将字体文件包含在您的 Web 服务器上，它将在需要时自动下载给用户。

您的“自有”字体在 CSS @font-face 规则中进行定义。

不同的字体格式

TrueType 字体 (TTF)

TrueType 是 1980 年代后期由 Apple 和 Microsoft 开发的字体标准。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 字体的紧凑形式，用作网页上的嵌入式字体。

EOT lettertypes zijn een compacte vorm van OpenType lettertypes ontworpen door Microsoft, gebruikt als ingebedde lettertypes op webpagina's.

Browserondersteuning voor lettertypeformaten

De cijfers in de tabel vermelden de eerste browserversie die het lettertypeformaat volledig ondersteunt.
Lettertypeformaat TTF/OTF 9.0* 4.0 3.5 39.0
3.1 WOFF 9.0 5.0 3.6 5.1
11.1 WOFF2 14.0 36.0 39.0 10.0
26.0 6.0 6.0 6.0 SVG 6.0
3.2 EOT 6.0 6.0 6.0 6.0

Niet ondersteund*IE:

Dit lettertypeformaat is alleen geldig wanneer ingesteld op "installable".*Firefox:

Standaard niet ondersteund, maar kan worden ingeschakeld (de flag moet op "true" worden gezet om WOFF2 te gebruiken).

Gebruik het lettertype dat u nodig heeft

Binnen de @font-face regel: definieer eerst de naam van het lettertype (bijvoorbeeld myFirstFont) en wijz naar het lettertypebestand.tip:

De lettertype-URL moet altijd in kleine letters zijn. Hoofdletters kunnen onverwachte resultaten geven in IE.

U moet een andere @font-face regel toevoegen, die de beschrijvers voor vet gedrukte tekst bevat:

voorbeeld
  @font-face {
  Om het lettertype te gebruiken op een HTML-element, verwijz naar de naam van het lettertype via de font-family eigenschap (myFirstFont):
font-weight: bold;
src: url(sansation_light.woff);
  @font-face {
font-weight: bold;

}

div {

Gebruik vetgedrukte tekst

U moet een andere @font-face regel toevoegen, die de beschrijvers voor vet gedrukte tekst bevat:

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

}

Probeer het zelf uit

Het bestand "sansation_bold.woff" is een ander lettertypebestand dat de vetgedrukte karakters van het lettertype Sansation bevat.

Elke keer als een passage met de lettertypefamilie "myFirstFont" vet moet worden weergegeven, gebruikt de browser het. @font-face Op deze manier kunt u meerdere instellingen instellen voor hetzelfde lettertype.

CSS lettertype regels.

De tabel hieronder lijst de lettertypebeschrijvingen die kunnen worden gebruikt in @font-face Alle lettertypebeschrijvers (font descriptor) die binnen de regel zijn gedefinieerd:

beschrijver waarde beschrijving
font-family name verplicht. Definieer de naam van het lettertype.
src URL verplicht. Definieer de URL van het lettertypebestand.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Optional. Defines how the font should be stretched. The default value is "normal".
font-style
  • normal
  • italic
  • oblique
 Optional. Defines the style of the font. The default value is "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Optional. Defines the weight of the font. The default value is "normal".
unicode-range unicode-range Optional. Defines the range of UNICODE characters supported by the font. The default value is "U+0-10FFFF".