网页添加CSS代码引入自定义字体网页增加个性化字体

前言

网页上显示不一样的字体样式，提升了页面的美观度，也提升了用户的浏览交互性

操作步骤

一、建议在可免费商用的字体网站挑选下载免费字体文件，推荐网站：https://www.maoken.com/freefonts

二、打开下载的压缩包文件，找到woff或woff2格式的字体文件，上传到网站目录内，如果你有对象存储，也可以上传到对象存储内。

如果压缩文件内没有woff或woff2格式的文件，到在线转换格式的网站将ttf格式文件转换为woff2格式：https://products.aspose.app/font/zh/conversion/ttf-to-woff2

三、在网页通用顶部，在<head>和</head>之间添加以下代码并修改字体文件的地址：

<style>
@font-face {
  font-family: 'family-name';
  src: url('https://域名/字体文件名.woff2');
  font-display: swap;
}
*{font-family: "family-name"}
</style>

建议

woff或woff2字体文件大小尽量控制在1M以内，文件过大会影响网页加载速度