Typora 如何自定义自己个性化样式

1、首先来欣赏一个非常不错的 LXGW WenKai 字体

你本地要是没有下面这个漂亮的字体，可以通过下面这种方式下载好哈。

霞鹜文楷（LXGW WenKai）是一款开源中文字体，基于 FONTWORKS 出品字体 Klee One 衍生。该字体由LXGW自 Klee 增补。

本文就如何在网页、博客、站点中使用霞鹜文楷，做简单指引。

Chawye Hsu 制作了适用于网页端的 lxgw-wenkai-webfont。使用方法与添加 Google Font 等网页字体无异，先引入 Web Font CSS 样式，然后在自己的样式表中设置字体即可。

首先，在网页的标签内适当位置引入字体 CSS。如果你希望使用屏幕阅读优化版本，请使用第二行。第一行为原始字体文件。二者引入其一即可。

注意: 以下代码是 web 网页上可以复制引用即可。改 Typora 不太一样，请继续看后面内容

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-webfont/1.6.0/style.min.css" />
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css" />

CSS 镜像地址的源在 cdnjs，上方的代码 href 采用了中国大陆的 BootCDN 的源。如果你喜欢其他的 cdnjs 下游源，可以自己替换下。

接着，在你的 CSS 中设置字体。这根据上方引入何版本字体，设置不同的字体名称。同样地，二者选其一。

body {
    /* 原版 */
    font-family: "LXGW WenKai", sans-serif;
    /* 屏幕优化版 */
    font-family: "LXGW WenKai Screen", sans-serif;
}

清除你的浏览器缓存，即可看到效果。

点击下载个性化字体

2、Mac 上面可以查看到你的字体。

当时你下载好的字体也可以放到字体册中，这样在你的整个 Mac 系统其他地方都可以使用。不过我不想。我这里只想修改 Typora 的字体。

如何在Mac上安装、停用和移除字体呢
点击字体册 ，然后右键可以做相应操作。

3、开始修改 Typeora Css 文件(博主主要是修改字体)

–> Step 1 进入"偏好设置"
Step 2 找到主题文件夹
Step 3 创建"base.user.css"新建一个空白文档，取名为"base.user.css"，要把后缀txt改成css
Step 4 设置样式复制下面的代码，保存到"base.user.css"就可以font-family: xxxx这里设置你想要的字体修改完成，重启Typora,即可生效。body { font-family :JetBrains Mono; }

当然这里改了之后，还需要再下面的 github.css文件也行要修改下。

typora配置字体

我们的目标要在 typora 中，以githubd主题为基础，更改字体（LXGWWenKai）

修改正文字体偏好设置 → 外观 → 打开主题文件夹

里面的css文件即为主题文件为了防止修改错误，或者保留原来的github.css，我们复制出一个my_github.css将字体文件LXGWWenKai-Regular.ttf放在特定目录，此处我放在新建的font目录下修改my_github.css，在其中新定义一个@font-face

@font-face {
    font-family: 'LXGWWenKai';
    font-style: normal;
    font-weight: normal;
    src: url("font/LXGWWenKai-Regular.ttf");  /*字体路径*/
}

搜索body {, 在font-family:前两项添加字体

body {
    font-family: "Consolas", "LXGWWenKai", "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, 'Segoe UI Emoji', sans-serif;
    color: rgb(51, 51, 51);
    line-height: 1.6;
}

修改图如下：

此时重启 typora，并将外观设置为mygithub，可看到正文字体的更改（代码块字体并未更改）

修改代码块字体
修改my_github.css，搜索code，在tt {下加上font-family字段

.md-fences,
code,
tt {
    border: 1px solid #e7eaed;
    background-color: #f8f8f8;
    border-radius: 3px;
    padding: 0;
    padding: 2px 4px 0px 4px;
    font-size: 0.9em;
    font-family: "Consolas", "LXGWWenKai";
}

修改图如下：

此时重启typora，可看到代码段字体的更改

修改标题字体
修改my_github.css，搜索header，在font-family:前两项添加字体

header,
.context-menu,
.megamenu-content,
footer {
    font-family: "Consolas", "LXGWWenKai", "Segoe UI", "Arial", sans-serif;
}

修改图如下：

此时重启typora，可看到左侧列表字体的更改。但此时，软件/编辑器的字体还是原来的，但平常可忽略。

修改左侧目录缩进

打开调试者模式：文件 → 偏好设置 → 通用 → 高级设置 → 开启调试模式

用浏览器方式进行元素定位：视图 → 开发者工具，可能为 base.css 920 行附近

打开 安装路径/resources/style/base.css，找到920行发现下面有h1,h2…h6,表示6个标题的缩进，将之前的0,1,2,3,4,5, 改为1,2,4,6,8,10,则可将缩进调大，也可按喜好更改。重启typora，可观察变化。

参考链接
1、如何使用 Typora 打造完美文本编辑器？
2、Typora 主题配置