Typora與它的主題

Markdown這種格式被許多寫作網(wǎng)站支持，簡(jiǎn)書對(duì)于新用戶雖然沒(méi)有將Markdown作為默認(rèn)的文字編輯格式，但是可以通過(guò)設(shè)置，將常用的文字編輯器修改為Markdown。

不過(guò)，在線寫Markdown總有許多的不方便，還是喜歡使用客戶端像文本編輯器一樣能夠隨時(shí)編輯。在Windows的平臺(tái)下，嘗試用過(guò)“馬克飛象”、“Cmd Markdown”以及其它幾款在線編輯工具。都是各有特色，但都有些使用不方便的地方。最后，也是目前，一直使用“Typora”，Typora的所見即所得、離線編輯讓我覺得十分得心應(yīng)手。

Typora在安裝后默認(rèn)的主題有這么幾個(gè)：

• Github
• Newsprint
• Night
• Pixyll
• Whitey

不管切換哪一個(gè)主題，中文字體都默認(rèn)顯示為“宋體”，真的丑爆了。實(shí)在忍受不了這么丑的中文字體，于是去Typora的設(shè)置選項(xiàng)找一下，想找到字體的設(shè)置方式。結(jié)果字體設(shè)置沒(méi)有找到，不過(guò)在File -> Preferences 選項(xiàng)中Appearance（外觀） -> Custom Themes（自定義主題）下發(fā)現(xiàn)了一個(gè)Open Theme Folder的按鈕。

進(jìn)入到這個(gè)Typora提供的這個(gè)自定義主題設(shè)置的入口文件夾，發(fā)現(xiàn)了與上面各主題對(duì)應(yīng)的*.css格式的配置文件。我只知道CSS能夠描述網(wǎng)頁(yè)的樣式，可以和HTML配合使用，但對(duì)于CSS的語(yǔ)法是一竅不通。

修改字體為“微軟雅黑”

盯著github.css這個(gè)文件瞅了半天，文件開始部分：

@include-when-export url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);

/**
 * css forked from https://github.com/GitbookIO/gitbook 
 * www.gitbook.com
 * Apache License
 * https://github.com/GitbookIO/gitbook/blob/master/LICENSE
 **/

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans Regular'),url('./github/400.woff') format('woff')
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: normal;
    src: local('Open Sans Italic'),url('./github/400i.woff') format('woff')
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: bold;
    src: local('Open Sans Bold'),url('./github/700.woff') format('woff')
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: bold;
    src: local('Open Sans Bold Italic'),url('./github/700i.woff') format('woff')
}

html {
    font-size: 16px;
}

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

（后面不貼了...）

無(wú)果。Google一下，找到了一些別人的經(jīng)驗(yàn)：

1. 一篇Blog：Typora 修改中文字體，相關(guān)內(nèi)容是：

   在所有 "font-family" 下添加 '微軟雅黑' ，但是 除了 "@font-face{}" 下的 "font-family"。

2. 一篇簡(jiǎn)書：修改 Windows 下 Typora 的中文字體顯示，建議基本類似：

   可以直接 Ctrl+F 搜索 font-family，在 body{ } 里的 font-family 后添加 ,'微軟雅黑'
   注意！
   不要修改在 @font-face{ }中的 font-family，僅修改在 body{ } 中的。

Try1：按照文章所示方法，添加'微軟雅黑'字段

僅在body{}模塊的"font-family"后面增加'微軟雅黑'設(shè)置：

body {
    font-family:"Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif,'微軟雅黑';
    color: rgb(51, 51, 51);
    line-height: 1.6;
}

重啟Typora之后發(fā)現(xiàn)中文字體依然是默認(rèn)'宋體'：

image

Try2：修改'微軟雅黑'為'Microsoft YaHei'

繼續(xù)Google，找到另一篇相關(guān)帖子：

3. 另一篇簡(jiǎn)書：使用第三方Markdown編輯器編輯為知筆記，在"font-family"使用的而是'Microsoft YaHei'而不是'微軟雅黑'。

從這篇文章中得到一些啟示，字體設(shè)置可能不識(shí)別'微軟雅黑'，但能識(shí)別'Microsoft YaHei'。另外，body{}中"font-family:"后面的一長(zhǎng)串字體名稱，應(yīng)該是根據(jù)先后順序進(jìn)行優(yōu)先查找的，修改如下：

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

重啟Typora之后，中文字體終于變了：

image

Try3：修改字體為其它windows中文字體

'微軟雅黑'的中文字體感覺上只是沒(méi)有那么丑，但依然不是很好看。我的Windows字體庫(kù)中有一款“方正蘇新詩(shī)柳楷簡(jiǎn)體”，想拿過(guò)來(lái)用一下。按照上面的經(jīng)驗(yàn)，修改body{}中"font-family:"后面的'Microsoft YaHei'為'方正蘇新詩(shī)柳楷簡(jiǎn)體'。

重啟Typora，字體又變回宋體了。。。

考慮原因，好吧，我也不知道準(zhǔn)確原因，猜測(cè)與不識(shí)別'微軟雅黑'，但能識(shí)別'Microsoft YaHei'的原因一致。

使用官方主題

到目前為止，難道我會(huì)滿足于'微軟雅黑'的字體效果嗎，并不會(huì)。

將目光轉(zhuǎn)到Typora的官網(wǎng)尋找一些幫助，在Typora的主題頁(yè)面發(fā)現(xiàn)了官方提供的幾個(gè)主題：

image

進(jìn)入第一個(gè)主題Catfish，發(fā)現(xiàn)主題說(shuō)明支持中文字體，（大喜）：

無(wú)襯線字體，襯線字體和等寬字體分別采用思源黑體，思源宋體， mononoki ，在 Windows 下有良好的中文呈現(xiàn)效果。

Try4：使用官方主題catfish

下載主題壓縮包，將壓縮包里邊的幾個(gè)文件解壓到Typora的自定義主題目錄，包括：

• catfish.css
• catfish.styl
• catfish（文件夾）

重啟Typora，在主題選項(xiàng)里將Github切換為catfish。

（咦。。。文字都去哪里了。。。）

（什么都沒(méi)有。。。）

Try5：下載思源黑體、思源宋體

上面提到了這個(gè)主題里邊使用的字體是思源黑體，思源宋體（這又是什么鬼，自己怎么什么都不知道），好在官方主題catfish說(shuō)明中剛好給了兩個(gè)鏈接：

• source-han-sans（思源黑體）
• source-han-serif（思源宋體）

兩個(gè)鏈接分別鏈接到了Github網(wǎng)站的頁(yè)面，說(shuō)明部分（README.md）介紹：思源這個(gè)兩個(gè)字體是開源項(xiàng)目，能夠在macOS，Windows，Linux/Unix使用。。。（好吧，我確實(shí)也沒(méi)用過(guò)github）由于我不太清楚github應(yīng)該怎么玩，就直接記錄思源黑體、思源宋體字體的下載過(guò)程吧：

1. 將文件列表上方，Branch選項(xiàng)由'master'切換為'release'

   image

2. 對(duì)于source-han-sans項(xiàng)目，點(diǎn)擊進(jìn)入OTF文件夾，然后點(diǎn)擊進(jìn)入SourceHanSansSC.zip，再點(diǎn)擊download下載這個(gè)壓縮包，解壓后在SourceHanSansSC文件夾下，得到7種不同粗細(xì)思源黑體的*.otf格式的字體文件：

   image

3. 對(duì)于source-han-serif項(xiàng)目，操作方法類似，進(jìn)入OTF文件夾后，分別下載SourceHanSerifSC_SB-H.zip與SourceHanSerifSC_EL-M.zip兩個(gè)壓縮包，解壓得到7種不同粗細(xì)的思源宋體的*.otf格式文件。

4. 對(duì)于每個(gè)*.otf文件，右鍵->安裝，或者雙擊文件打開后，亦有安裝按鈕。

至此，安裝了思源字體，官方主題catfish是不是應(yīng)該能正常使用了呢？重啟Typora，選擇catfish主題，所有文字再次消失。。。

Try6：修改catfish.css

字體裝好了，catfish主題也是從官網(wǎng)上下載的，為什么就不能夠使用呢？

電腦的系統(tǒng)是WIN8的，是否可能是平臺(tái)移植性、不兼容的問(wèn)題呢？

一時(shí)也想不到別的原因，google也沒(méi)什么明確的結(jié)果，于是再次打開catfish.css文件。

catfish.css文件的body{}部分是這樣的

body {
  background: #fff;
  font-family: Source Han Sans, Noto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Arial, sans-serif;
  color: #555;
}

"font-family"第一默認(rèn)的字體是"Source Han Sans"，這個(gè)肯定是和思源黑體有關(guān)的，但貌似不是Windows字體文件夾Font下面的字體名稱。

在css文件中搜索下"Source Han Sans"，在CSS文檔開始出：

@font-face {
  font-family: Source Han Sans;
  font-weight: normal;
  src: local('Source Han Sans Regular'), url("catfish/SourceHanSans-Regular.ttc");
}
@font-face {
  font-family: Source Han Sans;
  font-weight: bold;
  src: local('Source Han Sans Bold'), url("catfish/SourceHanSans-Bold.ttc");
}

對(duì)于第一段設(shè)置大膽猜測(cè)一下，"font-family: Source Han Sans"以及"font-weight: normal"的字體所在的位置url為"catfish/SourceHanSans-Regular.ttc"。剛好，在自定義主題路徑themes中的catfish，找到了"SourceHanSans-Regular.ttc"與"SourceHanSans-Bold.ttc"，但是Windows貌似不識(shí)別這種格式。

google一下，TTC與OTF都是字體格式，但是我的WIN8貌似只認(rèn)識(shí)*.otf格式的文件，到這里，我已經(jīng)大概知道是怎么回事了。

• catfish.css想使用'Source Han Sans'字體，于是去找'catfish'文件夾下找'SourceHanSans-Regular.ttc'的字體文件，字體文件雖然是找到了，但是我的Win8并不認(rèn)識(shí)這種字體，所以Typora切換到catfish主題就什么字都沒(méi)有了。
• 如果我讓Typora按照路徑找到 OTF格式的字體，而不是TTC的字體，那么字體應(yīng)該就可以顯示了。

于是，我把上面下載的思源字體copy到themes/catfish的文件夾下面，然后修改catfish.css文檔，修改了'Source Han Sans'與'Source Han Serif'指向的四處url：

@font-face {
  font-family: Source Han Sans;
  font-weight: normal;
  src: local('Source Han Sans Regular'), url("catfish/SourceHanSansSC-Regular.otf");
}
@font-face {
  font-family: Source Han Sans;
  font-weight: bold;
  src: local('Source Han Sans Bold'), url("catfish/SourceHanSansSC-Bold.otf");
}
@font-face {
  font-family: Source Han Serif;
  font-weight: normal;
  src: local('Source Han Serif Regular'), url("catfish/SourceHanSerifSC-Regular.otf");
}
@font-face {
  font-family: Source Han Serif;
  font-weight: bold;
  src: local('Source Han Serif Bold'), url("catfish/SourceHanSerifSC-Bold.otf");
}

重啟Typora，主題選擇catfish。。。（Nice~）

image