optimize images and move posts to subfolders

source/_posts/2025/2025.08/custom-font.md

@@ -0,0 +1,64 @@
+---
+title: 自定义字体
+categories: 建站手札
+series: webcustom
+tags: 网站
+cover: https://pic.biss.click/i/2025/08/30/mb76x4.png
+summary: 介绍如何自定义网站字体
+abbrlink: b5601a7e
+date: 2025-08-12 10:57:21
+---
+今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示
+
+# 选择字体
+
+首先在网上查找自己喜欢的字体，这里有一个网站
+{% 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 %}