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字体可以链接到网页, 以供下载, 以根据用户要求使用该字体呈现网页。
- 字体系列:用于定义字体名称。 Web字体必须运行。
- src:它用于定义从中获取字体的URL。像字体家族一样, 也需要src。除了这两个字段外, 其余描述符都是可选的。
- 字体拉伸:它用于查找应如何扩展字体。正常是默认情况下采用的值。不同的字体拉伸值是正常, 压缩, 半压缩, 超压缩, 超压缩, 扩展, 半扩展, 超扩展和最后超扩展。
- 字体样式:它用于定义不同样式的字体。可以设置的不同样式是倾斜的, 默认样式是正常。
- 字体粗细:可以使用此描述符定义字体的粗细。 font-weight的默认值为" normal"。粗体的不同值是正常, 粗体, 我们还可以给出100到900之间的数值, 以100为增量。
<
!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字体(详细代码示例)】输出如下:
文章图片
推荐阅读
- Python Tkinter如何使用标签小工具(示例)
- JavaScript如何使用Date now()方法()
- PHP如何使用parse_url()函数(代码示例)
- Windows系统优化5大秘技
- Windows加速更新换代,给人们带来啥
- CPU占用率过高的9大原因及处理方案
- 如何保障硬盘数据安全?TrueCrypt软件帮你忙
- 针对ASP木马的10大防范措施
- 8大缘由促使你的爱机网速变慢