Typora的Github主题美化

Huazzi_

已于 2025-02-22 13:19:52 修改

阅读量1.4k

点赞数 18

分类专栏：效率工具文章标签： github Typora

于 2025-02-21 23:32:59 首次发布

本文链接：https://blog.csdn.net/m0_74412436/article/details/145787825

版权

[!note]

Typora的Github主题进行一些自己喜欢的修改，主要包括：字体、代码块、表格样式

美化前：

美化前

美化后：
在这里插入图片描述

一、字体更换

之前便看上了「中文网字计划」的「朱雀仿宋」字体，于是一直想更换字体，奈何自己拖延症作祟，直到今天才开始行动。

关于「中文网字计划」

「中文网字计划」是一个致力于优化中文字体在互联网中应用的开源项目，通过Web Font技术为开发者提供便捷、免费的中文字体解决方案。其核心特点包括：

字体分包技术：将庞大的字体文件切割为小型静态分包，利用全球CDN加速加载，解决中文字体文件体积大、加载慢的问题；
丰富字体库：收录了霞鹛文楷、京華老宋体等众多字体，支持在线预览和按需调用；
开源工具链：提供字体分析工具（如font-analyze）、在线分包工具（在线切割）及NPM包（@konghayao/cn-font-split），方便开发者自定义字体优化；
全字符集渲染：支持OpenType特性，可自动按页面内容加载所需字符区间，兼顾渲染速度与完整性。

项目官网为https://chinese-font.netlify.app/，GitHub仓库见chinese-free-web-font-storage。

需注意部分字体授权信息需自行确认，建议优先选用明确开源授权的字体（如霞鹛文楷）。

中文网字计划是支持直接使用它提供的CDN的，但是由于不知道怎么在主题的CSS中使用，于是选择使用更为直接的方法：从中文网字计划的Github仓库中下载下来这个字体的.ttf文件，然后在CSS中使用该字体。

具体实现步骤

下载字体文件

下载自己想要的字体文件，例如朱雀仿宋；
并将字体文件放到合适的目录位置，这个文件路径之后要用得到，例如我就是直接放到主题css文件的同一目录下，故引用的时候就直接使用相对路径./字体文件名。

修改主题的css文件

引入本地字体

/* 添加以下代码，引入本地字体 */
@font-face {
   
  /* 自定义字体名称 */
  font-family: "自定义字体";
  /* 字体文件路径 */
  src: url('./ZhuqueFangsong-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

将需要的内容设置成自定义字体

/* 将 body 设置为自定义字体 */
body {
   
  font-family: "自定义字体", "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, 'Segoe UI Emoji', sans-serif;
  color: rgb(51, 51, 51);
  line-height: 1.6;
}

/* 将标题设置为自定义字体 */
h1,
h2,
h3,
h4,
h5,
h6 {
   
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: bold;
  line-height: 1.4;
  cursor: text;
  font-family: "自定义字体"

最低0.47元/天解锁文章