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

test 62 0
摘要:

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

前言

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

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

操作步骤

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

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

二、打开下载的压缩包文件,找到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以内,文件过大会影响网页加载速度。

发表评论 取消回复
表情 图片 链接 代码

分享