首页 > 建站 > 正文

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

建站 | 2023年05月03日17:45:32

前言

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

操作步骤

一、建议在可免费商用的字体网站挑选下载免费字体文件，推荐网站：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以内，文件过大会影响网页加载速度。

字体网页美化 CSS代码

The End

本文标题：网页添加CSS代码引入自定义字体网页增加个性化字体

本文链接：https://www.bufanz.com/post/281.html

上一篇：JS代码网页底部网站运行天数统计网站运营天数

下一篇：GoDaddy域名修改DNS服务器地址的操作步骤

上一个文章

JS代码网页底部网站运行天数统计网站运营天数

下一个文章

GoDaddy域名修改DNS服务器地址的操作步骤

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

前言

操作步骤

建议

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