title: “Hugo博客自定义字体” date: 2022-05-05T00:17:58+08:00 lastmod: 2022-05-05T00:17:58+08:00
author: [“Sulv”]
keywords: categories: tags: [建站]
description: ""
weight: slug: "" draft: true # 是否为草稿 comments: true reward: true # 打赏 mermaid: true #是否开启mermaid showToc: true # 显示目录 TocOpen: true # 自动展开目录 hidemeta: false # 是否隐藏文章的元信息，如发布日期、作者等 disableShare: true # 底部不显示分享栏 showbreadcrumbs: true #顶部显示路径 cover: image: "" #图片路径例如：posts/tech/123/123.png caption: "" #图片底部描述 alt: "" relative: false
1. 字体资源
去网上找到字体资源，即ttf结尾的文件，放到static/fonts/文件夹下，如下图
2. 引用字体
在css文件中引用字体如下图
3. 使用字体样式
比如我想要修改文章内的文字样式，找到对应的的class名称或id名称，然后用font-family这个属性指定使用什么字体，下图使用的是我们刚才指定的字体，第一个是中文字体，只对中文起效果，第二个是英文字体，只对英文起效果，第三个是默认字体，读取顺序优先从左到右读
展示效果如下
title: “Hugo博客自定义字体” date: 2022-05-05T00:17:58+08:00 lastmod: 2022-05-05T00:17:58+08:00
author: [“Sulv”]
keywords: categories: tags: [建站]
description: ""
weight: slug: "" draft: true # 是否为草稿 comments: true reward: true # 打赏 mermaid: true #是否开启mermaid showToc: true # 显示目录 TocOpen: true # 自动展开目录 hidemeta: false # 是否隐藏文章的元信息，如发布日期、作者等 disableShare: true # 底部不显示分享栏 showbreadcrumbs: true #顶部显示路径 cover: image: "" #图片路径例如：posts/tech/123/123.png caption: "" #图片底部描述 alt: "" relative: false
1. 字体资源
去网上找到字体资源，即ttf结尾的文件，放到static/fonts/文件夹下，如下图
2. 引用字体
在css文件中引用字体如下图
3. 使用字体样式
比如我想要修改文章内的文字样式，找到对应的的class名称或id名称，然后用font-family这个属性指定使用什么字体，下图使用的是我们刚才指定的字体，第一个是中文字体，只对中文起效果，第二个是英文字体，只对英文起效果，第三个是默认字体，读取顺序优先从左到右读
展示效果如下
可以看到，我们只指定了文章内的字体，也起效果了，而没有指定左侧目录的字体样式，所以用默认的
...