68 lines
2.7 KiB
Markdown
68 lines
2.7 KiB
Markdown
---
|
||
title: 自定义字体
|
||
categories: 建站手札
|
||
series: webcustom
|
||
tags: 网站
|
||
cover: https://pic.biss.click/image/6c4f9470-3917-44fb-ba10-30f3c4147592.webp
|
||
abbrlink: b5601a7e
|
||
summary: >-
|
||
这篇文章讨论了如何自定义网站字体，以提升网站的美观性和用户体验。作者首先提到了在移动端和电脑上使用woff或woff2字体能够完美显示的重要性，并提到谷歌字体库可能已经可以直接在中国大陆访问，这使得自定义字体的需求可能不再那么迫切。接着，文章详细介绍了如何在网上寻找并下载喜欢的字体，包括字体格式的转换方法。然后，展示了如何在CSS文件中添加字体，包括如何声明字体族和指定字体文件的路径。最后，文章还提供了关于其他字体格式的参考，并指导如何在主题文件的font配置区域修改字体设置。
|
||
date: 2026-01-16 07:47:15
|
||
---
|
||
|
||
今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示
|
||
{% note no-icon %}
|
||
2026年2月3日更新：好像谷歌字体库可以在大陆直连了，速度也很快，所以这篇文章好像没什么必要了。
|
||
{% endnote %}
|
||
# 选择字体
|
||
|
||
首先在网上查找自己喜欢的字体，这里有一个网站
|
||
{% link 中文开源字体集 Open Source Fonts Collection for Chinese,开源字体,https://drxie.github.io/OSFCC/ %}
|
||
找到一个自己喜欢的，如果有woff或者woff2格式下载下载保存。没有也没关系，转换网站：
|
||
{% link 转换网站,ttf2woff2,https://products.groupdocs.app/zh/conversion/ttf-to-woff2 %}
|
||
利用这个网站把下载的ttf字体文件转换成woff2格式。
|
||
|
||
# 添加字体
|
||
|
||
新建一个css文件
|
||
|
||
```css
|
||
@font-face {
|
||
font-family: 'CascadiaCodePL';
|
||
font-display: swap;
|
||
src: url('/butterflyChange/fonts/font.woff2') format("woff2");
|
||
}
|
||
```
|
||
|
||
其中 `font.woff2`改成自己的文件名。
|
||
其他字体格式参考
|
||
|
||
```css
|
||
@font-face {
|
||
font-family: 'webfont';
|
||
font-display: swap;
|
||
src: url('.eot'); /*IE9*/
|
||
src: url('.eot') format('embedded-opentype'), /* IE6-IE8 */
|
||
url('.woff2') format('woff2'),
|
||
url('.woff') format('woff'), /*chrome、firefox */
|
||
url('.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
||
url('.svg') format('svg'); /* iOS 4.1- */
|
||
}```
|
||
然后在`_config.butterfly.yml`里面引用这个css
|
||
```yml
|
||
- <link rel="stylesheet" href="/css/font.css">
|
||
```
|
||
|
||
在主题文件的font配置区域修改字体：
|
||
|
||
```yml
|
||
font:
|
||
global_font_size: 110%
|
||
code_font_size: 100%
|
||
font_family: # ，全局字体，不带后缀名
|
||
code_font_family: # 这是代码使用的字体
|
||
```
|
||
|
||
# 参考链接
|
||
|
||
{% link Ordis的博客,ordis,https://blog.imbhj.com/archives/0rIzmBIn %} |