Web字体用于允许使用CSS中未在本地系统上安装的字体。选择未安装的字体后, 只需将字体文件包含在Web服务器上, 它将在需要时自动下载。
语法如下：
@font-face {
font details
}字体格式的类型：下面列出了许多类型的字体格式：
- TrueType字体(TTF)：无论使用Microsoft操作系统还是Mac操作系统, 最常用的字体格式是TrueType。这是Microsoft和Apple在1980年代后期开发的字体标准。 TrueType字体将每个字形描述为一组路径。路径表示使用点和特定数学指定的闭合曲线。例如, 小写字母" i"有两条路径, 一条用于点, 另一条用于其余路径。像素用于填充路径以创建最终的字母形式。 TrueType字体格式的优点是字形是可缩放的, 这意味着可以将其设置为任意比例和任意大小。
- OpenType字体(OTF)：OpenType是一种基于TrueType的字体格式。 OpenType字体格式由Microsoft和Adobe开发, 但是是Microsoft的注册商标。 OpenType字体中的布局功能是按脚本和语言组织的, 这允许单个字体在同一脚本中支持多个书写系统。 OpenType字体格式旨在实现更好地保护字体数据, 更广泛的跨平台支持等目标。
- Web开放字体格式(WOFF)：WOFF是Mozilla在2009年与Type Supply, LettError和其他组织合作开发的网页中使用的一种字体格式。 WOFF基本上是具有压缩和其他元数据的OpenType或TrueType。 WOFF的目标是通过带宽限制支持通过网络从服务器到客户端的字体分发。 WOFF有两种版本, 分别是WOFF和WOFF2, 它们在使用的压缩算法方面大不相同。它们分别由" woff"和" woff2"格式描述符描述。
- SVG字体/形状：SVG代表可缩放矢量图形。最初指定SVG时, 大多数网络浏览器并不完全支持网络字体。但是为了正确呈现文本, 后来在SVG中添加了字体描述技术来提供此功能。它提供了在渲染时将字形信息嵌入到SVG中的方法。
- 嵌入式OpenType字体(EOT)：嵌入式OpenType文件格式由Microsoft开发。 EOT字体是OpenType字体的紧凑形式, 可用作网页上的嵌入式字体。它的设计目的是使TrueType和OpenType字体可以链接到网页, 以供下载, 以根据用户要求使用该字体呈现网页。
字体描述符：描述符可以在@ font-face规则内定义。现在我们将解释字体描述符的不同类型。
- 字体系列：用于定义字体名称。 Web字体必须运行。
- src：它用于定义从中获取字体的URL。像字体家族一样, 也需要src。除了这两个字段外, 其余描述符都是可选的。
- 字体拉伸：它用于查找应如何扩展字体。正常是默认情况下采用的值。不同的字体拉伸值是正常, 压缩, 半压缩, 超压缩, 超压缩, 扩展, 半扩展, 超扩展和最后超扩展。
- 字体样式：它用于定义不同样式的字体。可以设置的不同样式是倾斜的, 默认样式是正常。
- 字体粗细：可以使用此描述符定义字体的粗细。 font-weight的默认值为" normal"。粗体的不同值是正常, 粗体, 我们还可以给出100到900之间的数值, 以100为增量。
范例1：此示例说明了网络字体的用法。
<!DOCTYPE html>
< html >
< head >
< style >
@font-face{
font-family: monospace;
src:url(sansation_light.woff);
}
/* Sets font family to monospace */
* {
font-family: monospace;
}
</ style >
</ head >
< body >
< div >
< h1 >lsbin</ h1 >
< p >A computer science portal for geeks.</ p >
</ div >
< h1 >Great Geek's font face example.</ h1 >
</ body >
</ html >输出如下：
范例2：此示例说明了网络字体的用法。
<!DOCTYPE html>
< html >
< head >
< style >
@font-face{
/* Set font family to monospace */
font-family:monospace;
src:url(sansation_light.woff);
}
* {
font-family:monospace;
/** font style to italic */
font-style:italic;
font-weight:bold;
}
</ style >
</ head >
< body >
< div >
< h1 >lsbin</ h1 >
< p >A computer science portal for geeks.</ p >
</ div >
< h1 >Great Geek's font face example.</ h1 >
</ body >
</ html >输出如下：
