Yzy's blog
0%

Typora修改字体以及关闭连字

发表于

一、前言

Typora修改字体可在css文件中改动字体，我的环境如下：

1
2
3
系统：Windows 10 家庭中文版
客户端：Typora for Windows 0.11.18
主题：Drake

二、修改字体样式

将如下文件中的--monospace改为想要的字体，按顺序进行优先启用字体。我这里采用Fira Code Retina为英文字体，Noto Serif SC作为中文字体。

注意：需要安装对应字体，字体文件解压到drake主题文件夹内，或者win平台下载字体后双击进行安装。

1
2
3
4
/* theme/drake.css */
::root {
    --monospace: "Fira Code Retina", "Noto Serif SC"; /*code font*/
}

三、修改代码块字体大小

我的字体在Typora中设置为18px，因为是笔记本2k屏，16px会有点小。下面是代码块的设置，改动了代码块字体为正文字体的95%，并且调整代码块行高为1.6rem，总体看着比较舒服。

1
2
3
4
5
6
7
8
9
10
11
12
/* theme/drake.css */
/*code block*/
.md-fences {
    font-size: 0.95rem; /* 修改了代码块字体大小，和正文字体大小有所区分 */
    padding: 0.5rem !important;
    border-radius: 2px;
    word-wrap: normal;
    background-color: var(--code-block-bg-color);
    color: var(--code-block-color);
    border: none;
    line-height: 1.6rem; /* 修改了代码块行高 */
}

四、Fira Code Close ligatures 关闭连字

连字这个特性有的程序员喜欢，有的不喜欢。这里给出两种关闭的方式：

1. 代码块启用连字，正文关闭连字

首先在theme/drake.css文件中将-webkit-font-feature-settings: "liga" on, "calt" on;此句话注释掉。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* theme/drake.css */
body {
    font-family: var(--text-font) !important;
    color: var(--text-color);
    /* 注释此处
    -webkit-font-feature-settings: "liga" on, "calt" on;
    */
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden;
    line-height: 1.8rem;
}

然后在theme文件夹中新建base.user.css文件，添加如下代码，即可实现代码块启动连字，正文关闭连字

1
2
3
p {
    font-variant-ligatures: none !important;
}

2. 正文和代码块完全关闭连字

在theme/drake.css文件中，将-webkit-font-feature-settings:的liga和calt属性都改为off，即可实现完全关闭连字。

1
2
3
4
5
6
7
8
9
10
11
12
/* theme/drake.css */
body {
    font-family: var(--text-font) !important;
    color: var(--text-color);
    -webkit-font-feature-settings: "liga" off, "calt" off;
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden;
    line-height: 1.8rem;
}