前,浏览器只能展示本地安装的字体。如果字体未安装,网页显示效果会大打折扣。
为了解决这个问题,CSS 引入 web 字体,允许浏览器从服务器下载字体,下载完成后再重新渲染字体。
使用 web 字体前,需要了解常用的字体文件格式。
TTF 字体文件,即 TrueType 字体,是由苹果和微软在 20 世纪 80 年代末开发的字体标准。它是 macOS 和 Windows 操作系统使用最广泛的字体格式。
OTF 字体文件,即 OpenType 字体,是一种可缩放的计算机字体格式。它建立在 TrueType 基础上,是微软的注册商标。OpenType 字体目前在主要的计算机平台上广泛使用。
WOFF 字体文件,即 The Web Open Font Format 字体,是一种用于网页的字体格式,2009 年开发,如今是 W3C(万维网联盟)的推荐标准。WOFF 本质是 OpenType 或 TrueType 字体,但是经过压缩并附加额外的元数据。在带宽受限的网络中,WOFF 能更好的支持从服务器到客户端的字体传输。
WOFF 2.0 字体文件,相比于 WOFF,提供了更高的压缩效率。
SVG 字体,将 SVG 用作显示文本时的字形。SVG 1.1 规范定义了一个字体规范,允许在 SVG 文档中创建字体。
EOT 字体文件,即 Embedded OpenType Fonts 文件,是微软设计的一种用于网页的嵌入式字体,它是 OpenType 字体的紧凑形式。
不同字体格式的浏览器兼容性下图所示:
不同字体格式的浏览器兼容性,截图数据来自 w3schools.com
使用 @font-face CSS 指令定义自定义字体。使用前需要把字体文件放在服务器目录,然后定义新的字体名称,并指向字体所在位置。
以京華老宋体为例,这是一款可以免费商用的中文字体。下载字体文件后,放到和 index.html 同级的目录,重命名为 jh-song.ttf。
下载字体文件
在 @font-face 指令内,使用 font-family 定义字体名称,src 属性定义字体文件路径。
定义 web 字体
然后,像使用普通字体一样,使用自定义字体样式:
使用 web 字体
完
ont 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写,或将元素的字体设置为系统字体。
font-family写法示例:
<style>
p{
font-family: "幼圆";
}
</style>
</head>
<body>
<p>19级启嘉班</p>
</body>
效果:
*请认真填写需求信息,我们会在24小时内与您取得联系。