Typora of Chinese font solutions

First statement:

This is my first time writing blog might write more ugly, hope forgive me. I will try to clear the problem.

-------------------------------------------------- -----------Dividing line------------------------------------- -----------------------------------
Typora is a good Markdown editor, especially for like I am such a person is a little obsessive-compulsive disorder. Be sure to ask simple, elegant. Even though I am cooking. . .

Since it is obsessive-compulsive disorder, it is not allowed to have flaws, such as - rigid font

In fact, there are some online articles about Typora change fonts, but most of them have a problem - Chinese font, where I will give solutions.

Well ado, the tutorial.

-------------------------------------------------- -----------Dividing line------------------------------------- -----------------------------------

Typora various attributes are defined in the theme file, the browser is actually Typora with editing function, which is a theme file a .css file

Knowing this, the front learned friends might understand, though I never learned the front. . Just a little knowledge of rendering some pages of principle.
Open Typora theme folder
in the File -> Preferences inside the screen, press Ctrl +, you can also call up the interface, button red circle is open theme folder (this step there are many other tutorials in here not wordy)
Here Insert Picture Description
Here are a few subfolders and several .css files in this folder, which in fact is the theme css file name is the subject name
(there are a few that I try to write their own theme, you are not )
Here Insert Picture Description
just open a theme, I am here to open a GitHub.css
front is to define several font-face, it is estimated to load some font files
Here Insert Picture Description
then there is a body which defines a font-family in the following lines, this is the font defines Here Insert Picture Description
plus an own font try later font-family? For example, "Arial" like this

Note the double quotes and commas! !

body {
    font-family: "宋体", "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: rgb(51, 51, 51);
    line-height: 1.6;
}

Restart Typora and select github theme, you will find that the fonts did not change, because typora now did not know Chinese. Other tutorials say is the English name of the font, such as "Microsoft elegant black" is the "Microsoft Yahei"

- this is definitely a solution, but I personally think that Microsoft elegant black does not look good.
So, after an afternoon spent in the study of the way of other themes to change the font, I found - Other topics are all ™ is English. . . So he tried a lot of programs in the trial process stumbled inside the browser source code which can have Chinese notes, the browser is how Chinese know it?
Baidu, found css front of the document character set declaration, the browser can recognize Chinese, like this

@charset "gb2312"

Here Insert Picture Description

VScode can see at the bottom of the document character set is GB2312, then add

@charset "gb2312"

I may have inadvertently changed during the editing process, you and I may be different, it is best to confirm their own, if you are utf-8

That plus

@charset "UTF-8"

Note ";" was not out

Restart Typora look? Sure enough, it becomes infected SongHere Insert Picture Description

And so on, as long as you inside some computer fonts, it can be used.

-------------------------------------------------- -----------Dividing line------------------------------------- -----------------------------------

Here are a few small precautions, recommended reading.

Modify the above operation, only body font, which is the common font editing area into a "Arial", but there are still some areas of the original, such as
Here Insert Picture Description
the code block font Times New Roman is certainly not what we set, then how to change it? (Although this good looking font, which looks like a MAC is this font)
continue to study for some time to find the code fonts are limited elsewhere, plus anywhere github.css of this section

.CodeMirror div.CodeMirror-code {
    background-color: rgb(195, 195, 195);
    font-family: "宋体";
}

Wherein the background-color block the background color is set, the effect is so
Here Insert Picture Description

Color code block is more prominent, and how? Is not that great?

Published an original article · won praise 0 · Views 2

Guess you like

Origin blog.csdn.net/qq_40522908/article/details/104218707