码农教程 - 一技在手,衣食无忧! tools

目录

CSS 网页字体

❮ 上一节 下一节 ❯

CSS @font-face 规则

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

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

您的 "own" 字体是在 CSS 中定义的@font-face规则。

不同的字体格式

TrueType 字体 (TTF)

TrueType 是 20 世纪 80 年代末由 Apple 和 Microsoft 开发的字体标准。 TrueType 是 Mac OS 和 Microsoft Windows 操作系统最常见的字体格式。

OpenType 字体 (OTF)

OpenType 是一种可缩放计算机字体的格式。它基于 TrueType 构建，是 Microsoft 的注册商标。 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：字体格式仅在设置为"installable"时有效。

使用您想要的字体

在里面@font-face规则;首先为字体定义一个名称（例如myFirstFont），然后指向字体文件。

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

要在 HTML 元素中使用字体，请通过font-family属性：

示例

@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相同字体的规则。

通过练习测试一下

练习:

添加名称为 "sansation" 和 URL "sansation_light.woff" 的网络字体。

<style>
 {
  font-family: ;
  : ;
}

body {
  font-family: sansation;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

开始练习

CSS 字体描述符

下表列出了可以在内部定义的所有字体描述符@font-face规则：

Descriptor Values Description
font-family name Required. Defines a name for the font
src URL Required. Defines the URL of the font file
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. Default is "normal"
font-style normal
italic
oblique		 Optional. Defines how the font should be styled. Default is "normal"
font-weight normal
bold
100
200
300
400
500
600
700
800
900		 Optional. Defines the boldness of the font. Default is "normal"
unicode-range unicode-range Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF"

❮ 上一节 下一节 ❯