在网站建设过程中，很多时候我们不希望使用默认的字体而使用更加个性化的字体，它能使网站的字体显示更加丰富多样，而这种字体是本地系统所没有的内置字体，使用css的@font-face 属性在网页中嵌入自定义字体成为最佳选择。

字体下载

这里推荐使用有字体，注册就能使用自带CDN加速，如果在网上下载的字体，通常只有一种格式需要进行字体转换为浏览器所识别格式。

CSS声明使用该字体

1
2
3
4
5
6
7
8
9
10
@font-face {
font-family: "Normal";
src: local('PingFang SC'),local('Hiragino Sans GB'),local('Microsoft YaHei'),
url(/blockdole.woff2) format("woff2"),
url(/blockdole.woff) format("woff"),
url(/blockdole.eot) format("embedded-opentype"),
url('/Normal.ttf') format('truetype'),
url('/Normal.svg#Normal') format('svg');
font-display: swap;
}

全局使用

1
body {font-family: Normal!important;}

在需要到地方调用，比如在footer底部使用自定义字体

1
2
3
.footer p{
font-family: ‘Normal!important’;
}

[alt type=”warning”]

  • font-family 表示自定义字体名称
  • .WOFF 或 .WOFF2 格式字体，适用于各大主流浏览器
  • .TTF 或.OTF 格式字体，适用于 Firefox 3.5、Safari、Opera 浏览器
  • .EOT 格式字体，适用于 Internet Explorer 4.0+浏览器
  • .SVG 格式字体，适用于 Chrome、IPhone 浏览器
    [/alt]

字体沾染优化

1
font-display: swap;

swap告诉浏览器使用字体的文本应立即使用系统字体显示。自定义字体准备好后，它将替换系统字体。避免显示隐形文字。

字体加载优化

使用提前预加载，可以用于更早的获取到字体文件。需要在网站haed头部中插入一下字体外链代码。

1
2
3
<!-- laod fonts -->
<link rel="preload" href="/Normal.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/Normal.woff" as="font" type="font/woff2" crossorigin>

crossorigin属性表示允许接受不同CROS域请求资源，如果不设置浏览器可能会把预加载字体忽略掉，如果字体放在本地，可以不用设置。

as = “font” type =” font / woff2” 属性告诉浏览器以字体形式下载此资源。