整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

如何在网页中使用 web 字体?

前,浏览器只能展示本地安装的字体。如果字体未安装,网页显示效果会大打折扣。

为了解决这个问题,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 属性:设置HTML页面中的字体
  • font-size 属性:设置字体大小
  • font-weight 属性:设置字体的粗细程度
  • font-style 属性:设置指定字体样式

font-family写法示例:

 <style>
         p{
             font-family: "幼圆";
         }
     </style>
 </head>
 <body>
     <p>19级启嘉班</p>
 </body>

效果: