<meta name="keywords" content="typecho,css,typecho修改字体" /> [TOC] ## Typecho 博客 Handsome主题 更换字体 本篇文章中将会介绍一下Typecho更换网站/博客字体的三种方法，Typecho默认使用的字体看着太难受了，虽然不需要多么花里胡哨，但默认的字体确实有点让人难以接受了。不过，网上说更换字体集后会使网页加载速度变慢，原因应该就是需要传输字体集数据吧。 ### 1. 更换方式 #### 1.1 通过AliceStyle插件进行字体更换 ##### 1.1.1 安装AliceStyle插件 前往兔子的网站下载插件：[AliceStyle美化插件](https://racns.com/article/5.html "AliceStyle美化插件") 插件版本最新为：**AliceStyle插件 `3.4.0`** **简介**： - 内置16个优美的动态背景（还会再增加的） - 全局主题提供透明模式和默认模式，增加了小清新的白色主题 - 自带两种返回顶部按钮（拉姆雷姆和夏目的猫） - 后台标题显示插件更新信息 - 插件最大亮点：全网唯一的，自带检测更新的，独一无二的主题美化插件 - 自带夜间模式和后台美化 至于插件安装方法就不在这里赘述了，兔子的博客里有**食用说明**。 ##### 1.1.2 前往相应字体网站下载字体集 大家可以前往[鸿蒙开发者网站](https://developer.harmonyos.com/cn/docs/design/des-guides/font-0000001157868583 "HarmonyOS Developer")进行下载。 <div align=center> <img src="https://www.xn--7et36u.com/usr/uploads/2022/06/3879514099.png" alt="字体下载" style="zoom:50%;" style=""> </div> 字体集下载完成后是一个文件夹，我只用了其中的一个： <div align=center> </div> ##### 1.1.3 字体文件格式转换 由于`.tff`格式文件比较大，所以我们可以将其格式转换为`.woff`格式，`.woff`格式文件相对较小一点，附加字体文件格式[转换网站](https://convertio.co/zh/font-converter/ "Convertio在线字体文件转换器")。 ##### 1.1.4 文件放置和使用 之后将转换后的文件存放在网站目录内可以取到的地方，比如我是放在： /网页根目录/font/HarmonyOS_Sans_SC_Medium.woff 对应使用链接为： `https://www.xn--7et36u.com/Font/HarmonyOS_Sans_SC_Medium.woff` 如果你的网站没有进行静态设置，那么连接应该是： `https://www.xn--7et36u.com/index.php/Font/HarmonyOS_Sans_SC_Medium.woff` 最后进入插件设置，将这个链接放在AliceStyle插件的字体美化内，保存关闭，然后进入网站刷新页面，即可看到新的字体生效。 <div align=center> </div> #### 1.2 通过Handsome主题进行字体更换 也可以使用Handsome主题的开发者设置进行字体更换。 ##### 1.2.1 准备代码 我们继续使用上面**1.1.4**中准备好的字体文件`HarmonyOS_Sans_SC_Medium.woff`将其配入一下代码（`1.1.1`-`1.1.3`为准备工作）： ```css @font-face{font-family:HarmonyOS_Sans_SC_Medium;font-size:16px;font-style:normal;font-display:swap; src:url(https://www.xn--7et36u.com/Font/HarmonyOS_Sans_SC_Medium) format('woff')} *{font-family:HarmonyOS_Sans_SC_Medium} body {font-family: HarmonyOS!important;} ``` ##### 1.2.2 设置代码 `复制代码—>进入后台—>设置外观—>开发者设置—>自定义CSS—>粘贴代码—>保存关闭` 将上方代码段放入Handsome外观设置的自定义CSS中，保存后关闭，然后进入网站刷新页面，即可看到新的字体生效。 #### 3. 通过博客源码进行字体更换 如果你熟悉web开发知识的话也可以将`1.2.1`中的@ font-face复制到主题文件夹内的 `style.css`文件中，再将上方的body中的声明加入`style.css`文件的body内，也可以进行字体更换。 ### 2.字体集 #### 2.1 HarmonyOS字体 [HarmonyOS字体官网下载](https://developer.harmonyos.com/cn/docs/design/des-guides/font-0000001157868583 "HarmonyOS Developer") #### 2.2 苹果系统内置字体 如果你有Mac电脑的话可以从电脑中直接获取字体文件，Mac系统内置字体高达300多种： <div align=center> <img src="https://www.xn--7et36u.com/usr/uploads/2022/06/1303182045.png" alt="Mac系统字体" align=center title="Mac系统字体" style=""> </div> 这些字体都可以在Mac字体册中预览，Mac字体册可以通过启动台搜索栏进行搜索： <div align=center> <img src="https://www.xn--7et36u.com/usr/uploads/2022/06/2098230975.png" alt="Mac字体册" title="Mac字体册" style="zoom:50%;" style=""> </div> 字体集文件路径为：`/System/Library/Fonts` #### 2.3 OPPO Sans字体 [OPPO Sans 字体官网下载](https://open.oppomobile.com/bbs/forum.php?mod=viewthread&tid=2274 "OPPO Sans 字体下载") **版权：**OPPO Sans 是OPPO的品牌定制字体，是一款授权全社会免费使用的字体 最后修改：2022 年 06 月 09 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 8 如果觉得我的文章对你有用，请随意赞赏
4 条评论
感谢分享OωO
defined() expects exactly 1 argument, 2 given AliceStyle插件启动打开报错呢，知道咋回事吗
插件作者：
针对不使用本插件中"后台美化"功能的小伙伴，我们建议您注释插件文件内的三行代码，以免导致后台崩溃。
应该本插件的后台美化功能是对那些无改的用户开发的，所以自己改过后台的，启用本插件后会导致后台样式错乱，修改的操作如下
https://inis.cn/article/5.html
你是不是更换了Typecho的后台主题?我更换后台主题后再开启AliceStyle插件也会报这个错，所以我是通过第二种方法修改的字体