CSS 教程

CSS 教程 CSS 简介 CSS 语法 CSS 选择器 CSS 如何使用 CSS 注释 CSS 颜色 CSS 背景 CSS 边框 CSS 外边距 CSS 内边距 CSS 高度/宽度 CSS Box 模型 CSS 轮廓 CSS 文本 CSS 字体 CSS 图标 CSS 链接 CSS 列表 CSS 表格 CSS Display CSS Max-width CSS 定位 CSS 溢出 CSS 浮动 CSS Inline-block CSS 对齐 CSS 组合器 CSS 伪类 CSS 伪元素 CSS 不透明度 CSS 导航栏 CSS 下拉菜单 CSS 图片库 CSS 图像拼合技术 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网站布局 CSS 单位 CSS 特异性

CSS3 高级教程

CSS3 高级教程 CSS3 简介 CSS3 圆角 CSS3 边框图像 CSS3 多重背景 CSS3 颜色 CSS3 渐变 CSS3 阴影 CSS3 文本效果 CSS3 网络字体 CSS3 2D 转换 CSS3 3D 转换 CSS3 过渡 CSS3 动画 CSS3 提示框 CSS3 样式图像 CSS3 object-fit CSS3 按钮 CSS3 分页 CSS3 多列 CSS3 用户界面 CSS3 变量 CSS3 盒子大小 CSS3 媒体查询 CSS3 媒体查询实例 CSS3 弹性盒子

CSS 响应式

RWD 简介 RWD 视口 RWD 网格视图 RWD 媒体查询 RWD 图像 RWD 视频 RWD 框架 RWD 模板

CSS 网格视图

Grid 网络简介 Grid 网格容器 Grid 网格项目

CSS 实例

CSS 模板 CSS 实例 CSS 测验 CSS 练习

CSS 参考手册

CSS 参考手册 CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 网络安全字体 CSS 动画相关属性 CSS 单位 CSS PX-EM 单位转换 CSS 颜色 CSS 颜色值 CSS 默认值 CSS 实体 CSS 听觉


CSS3 Web 字体

CSS3 @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 字体的紧凑形式,用作网页上的嵌入式字体。



对字体格式的浏览器支持

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

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 属性引用字体名称(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 规则。


CSS3 习题和测验


CSS3 字体描述

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

Descriptor Values 描述
font-family name 必需。定义字体名称。
src URL 必需。定义字体文件的 URL。
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
可选。定义应如何拉伸字体。默认值是 "normal"。
font-style normal
italic
oblique
可选。定义字体的样式。默认值是 "normal"。
font-weight normal
bold
100
200
300
400
500
600
700
800
900
可选。定义字体的粗细。默认值是 "normal"。
unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认值是 "U+0-10FFFF"。