Web 字体允许 Web 设计者使用用户计算机上未安装的字体。
当您找到/购买您想要使用的字体时,只需包含该字体即可 文件存储在您的网络服务器上,并在需要时自动下载给用户。
您的“自己的”字体是在 CSS @font-face
规则中定义的。
TrueType 字体 (TTF)
TrueType 是 20 世纪 80 年代末由 Apple 和 Microsoft 开发的字体标准。 TrueType 是 Mac OS 和 Microsoft 最常见的字体格式 Windows 操作系统。
OpenType 字体 (OTF)
OpenType 是一种可缩放计算机字体的格式。它是基于 TrueType 构建的, 是以下公司的注册商标 微软。 OpenType 字体如今在各大专业上广泛使用 计算机平台。
网络开放字体格式 (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 字体的紧凑形式 作为网页上的嵌入字体。
表中的数字指定第一个完全支持的浏览器版本 字体格式。
Font format | |||||
---|---|---|---|---|---|
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 |
*IE:字体格式仅在设置为“可安装”时才有效。
在 @font-face
规则中;首先定义字体的名称(例如 myFirstFont),然后指向字体文件。
提示:字体 URL 始终使用小写字母。大写字母可能会在 IE 中产生意想不到的结果。
要在 HTML 元素中使用字体,请通过 font-family
属性引用字体名称 (myFirstFont):
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The @font-face Rule</h1>
<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>
</body>
</html>
您必须添加另一个包含粗体文本描述符的 @font-face
规则:
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The @font-face Rule</h1>
<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>
</body>
</html>
文件“sansation_bold.woff”是另一个字体文件,其中包含 Sansation 字体的粗体字符。
每当带有字体系列“myFirstFont”的文本应呈现为粗体时,浏览器都会使用此选项。
这样,您可以为同一字体拥有许多 @font-face
规则。
下表列出了可以在 @font-face
规则内定义的所有字体描述符:
描述符:
font-family
价值观:
name
描述:
必需的。定义字体的名称
描述符:
src
价值观:
URL
描述:
必需的。定义字体文件的 URL
描述符:
font-stretch
价值观:
normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
描述:
选修的。定义字体应如何拉伸。默认为“正常”
描述符:
font-style
价值观:
normal
italic
oblique
描述:
选修的。定义字体的样式。默认为“正常”
描述符:
font-weight
价值观:
normal
bold
100
200
300
400
500
600
700
800
900
描述:
选修的。定义字体的粗细。默认为“正常”
描述符:
unicode-range
价值观:
unicode-range
描述:
选修的。定义字体支持的 UNICODE 字符范围。默认为“U+0-10FFFF”