网站前端字体优化指南
最近更新时间: July 27, 2024
为什么我们要做网站字体优化?主要基于两个方面的原因：1.提高字体的兼容性，使网站字体使用更加规范;2.提升字体的加载速度，尤其是在使用第三方字体的时候，字体需要额外加载后才能使用，如果加载过慢，将会影响网站的打开速度，而通过相关的优化操作，我们可以将这种影响降到最低。
常规的网站字体书写方法：
在默认情况下，网站使用的是系统自带默认的字体，这种字体网站可以直接使用，并且不会对网站打开速度造成不利影响。常规书写方法如下：
body {
font-family:system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,
Arial,Helvetica,
sans-serif;
}
其中：
system-ui：为系统默认字体，兼容性高，支持各平台系统。
-apple-system/BlinkMacSystemFont：属于是对system-ui的补充。针对macOS 和 iOS 系统做兼容。
segoe ui：Windows 平台及 Windows Phone西文字体组，不支持汉字。
Roboto：针对Android 操作系统的字体族。
Arial,Helvetica：Windows默认安装Arial，Mac默认安装Helvetica和Arial字体，主要是针对一些低版本浏览器进行降级(兼容)。
sans-serif：设置默认字体都为无衬线字体。
以上5中字体设置，其主旨是为了使用系统默认的字体，从前往后优先级依次降低(即如果前面的字体设置不能用，会依次往后推直到遇到能用的字体)，涵盖了Windows、MAC OS X、iOS、Android、Windows Phone 几乎所有的主流操作系统。
优化网站字体加载方法：
1.使用系统默认字体
在加载网站时，默认字体不用再额外加载，可以直接使用，我们按照上面介绍的默认字体使用方法进行设置即可，这种方法加载网站字体是最快的。
此外，有时候我们为了网站文字内容效果更加丰富，需要用到一些不是系统默认的字体(第三方字体)，这个时候我们可以通过以下几种方法来改善字体加载速度。
1.减小文字资源体积大小
通常情况下整个网站中只有一小部分会使用到第三方字体，比如在网站活动，专题部分，页面中一些标题为了显得更加醒目而采用第三方字体。如果直接加载这些字体资源，文件会比较大(通常在1M左右或者更多)，因此我们可以设法将用到的第三方文字字符从整个文字资源中挑出来，剩下的不用的第三方文字字符则去掉，然后我们只用加载这部分有用的字体就可以了。
具体实现方法我们可以采用在线工具：transfonter
打开网站页面，将第三方字体上传，然后选择字体格式，比如WOFF,然后在Characters中输入需要使用这种字体的文字，其它选项默认，最后点击转换。
这里需要注意的是，如果源字体文件不是woff,我们在转换的时候可以直接将其格式选择为woff格式，因为这种格式相对来说体积更小,并且兼容性也好。
转换完成之后，会生成相应的文件，包含有demo文件，字体文件，以及css文件，具体到我们网页中，将css文件直接加到我们网站的css文件中，然后在需要用到第三方字体的文字部分调用这种字体，并且将压缩后的字体文件上传到服务器。
@font-face {
font-family: 'Cambria';
src: url('subset-Cambria-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
h1.txt {
font-family: 'Cambria';
}/*假设页面中的h1标题Hello World!使用该字体*/
该种方法操作简单快捷，适用于少量使用第三方字体的页面，因为需要手动操作，所以对于一些需要经常改动字体并且量很大的页面来说，这种方法显得过于繁琐。
2.不要使用过多的自定义字体或者字体样式
过多的使用第三方字体，就需要额外加载更多的字体文件，另外字体样式建议只用常规字体和加粗字体即可，像其它比如下划线，斜体等可以尽量少用或者不用，所以有时候我们也需要在页面显示效果(自定义字体数量、字体样式)和加载速度方面找到一个平衡点。
3.使用 swap 属性优先显示本地系统默认字体
在字体设置中，font-display一共有5个属性值，分别为：
auto：默认值，等同于block，当font-display为该值时，需要等字体加载完成之后才会显示，在加载完成之前会显示空白。
block：同auto。
swap：这个比较常用，即当第三方字体还没有加载完成时，会优先显示系统默认的字体，待其加载完成之后，才会替换为第三方字体。
fallback：该属性值会给第三方字体加载一个时间限制，如果在规定时间内字体还没有加载完成，那么加载就会结束，不会再替换默认字体。
optional：该属性规定如果在限制时间内字体没有加载完成，那么页面会一直使用系统默认字体，同时，第三方字体仍然会继续加载，以便在页面下一次浏览时直接使用该字体。
所以我们可以通过swap属性来优化我们的字体加载，避免在第三方字体没有加载完成时出现空白，影响用户体验。
swap 属性，css 的写法如下：
@font-face {
font-family: 'Cambria';
src: url('subset-Cambria-Bold.woff') format('woff');
font-display: swap;
}
4.preload 字体预加载
通常情况下，@font-face并不能触发字体下载，只有等到页面解析到使用该字体的DOM元素时，相对应的字体才会开始下载，这样就会导致@font-face里面设置的字体加载时间就有可能比较靠后（比如，在第三方字体替换系统默认字体时出现闪烁现象），这时我们可以通过preload来设置文字预加载，顾名思义，不用等到对应的DOM元素，可以在页面开始解析时就进行预加载。设置代码如下：
<head>
<link rel="preload" href="'subset-Cambria-Bold.woff" as="font" crossorigin>
</head>
通过以上几种方法，我们即可以对字体设置和加载做进一步的优化，以提升我们网站的seo优化效果。
版权声明©：希望对您会有所帮助；转载请注明出处。
相关文章
