CSS如何使用Web字体（详细代码示例）

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); }/* Setsfont 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 >

【CSS如何使用Web字体（详细代码示例）】输出如下：