Hugo博客自定义字体

2023-01-16 14:07:46 浏览数 (3)

1. 字体资源#

去网上找到字体资源,即ttf结尾的文件,放到static/fonts/文件夹下,如下图

2. 引用字体#

在css文件中引用字体如下图

3. 使用字体样式#

比如我想要修改文章内的文字样式,找到对应的的class名称或id名称,然后用font-family这个属性指定使用什么字体,下图使用的是我们刚才指定的字体,第一个是中文字体,只对中文起效果,第二个是英文字体,只对英文起效果,第三个是默认字体,读取顺序优先从左到右读

展示效果如下

可以看到,我们只指定了文章内的字体,也起效果了,而没有指定左侧目录的字体样式,所以用默认的

1 人点赞