CSS 网页字体


目录

    显示目录


CSS @font-face 规则

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 规则。



CSS 字体描述符

下表列出了可以在 @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”