Typora與它的主題
Markdown這種格式被許多寫作網(wǎng)站支持，簡(jiǎn)書對(duì)于新用戶雖然沒有將Markdown作為默認(rèn)的文字編輯格式复隆，但是可以通過設(shè)置拨匆，將常用的文字編輯器修改為Markdown。
不過挽拂，在線寫Markdown總有許多的不方便惭每，還是喜歡使用客戶端像文本編輯器一樣能夠隨時(shí)編輯。在Windows的平臺(tái)下亏栈，嘗試用過“馬克飛象”台腥、“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è)置沒有找到柜思，不過在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)頁的樣式，可以和HTML配合使用矾湃，但對(duì)于CSS的語法是一竅不通亡脑。
修改字體為“微軟雅黑”
盯著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;
}
（后面不貼了...）
無果。Google一下霉咨，找到了一些別人的經(jīng)驗(yàn)：
-
一篇Blog：Typora 修改中文字體蛙紫，相關(guān)內(nèi)容是：
在所有 "font-family" 下添加 '微軟雅黑' ，但是 除了 "@font-face{}" 下的 "font-family"途戒。
-
一篇簡(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;
}
Try2：修改'微軟雅黑'為'Microsoft YaHei'
繼續(xù)Google浆西，找到另一篇相關(guān)帖子：
- 另一篇簡(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;
}
Try3：修改字體為其它windows中文字體
'微軟雅黑'的中文字體感覺上只是沒有那么丑，但依然不是很好看管毙。我的Windows字體庫(kù)中有一款“方正蘇新詩(shī)柳楷簡(jiǎn)體”腿椎，想拿過來用一下。按照上面的經(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的主題頁面發(fā)現(xiàn)了官方提供的幾個(gè)主題：
進(jìn)入第一個(gè)主題Catfish际长，發(fā)現(xiàn)主題說明支持中文字體耸采，（大喜）：
無襯線字體，襯線字體和等寬字體分別采用思源黑體工育，思源宋體虾宇， mononoki ，在 Windows 下有良好的中文呈現(xiàn)效果如绸。
Try4：使用官方主題catfish
下載主題壓縮包嘱朽，將壓縮包里邊的幾個(gè)文件解壓到Typora的自定義主題目錄，包括：
- catfish.css
- catfish.styl
- catfish（文件夾）
重啟Typora怔接，在主題選項(xiàng)里將Github切換為catfish搪泳。
（咦。蜕提。森书。文字都去哪里了。谎势。凛膏。）
（什么都沒有。脏榆。猖毫。）
Try5：下載思源黑體、思源宋體
上面提到了這個(gè)主題里邊使用的字體是思源黑體须喂，思源宋體（這又是什么鬼吁断，自己怎么什么都不知道），好在官方主題catfish說明中剛好給了兩個(gè)鏈接：
- source-han-sans（思源黑體）
- source-han-serif（思源宋體）
兩個(gè)鏈接分別鏈接到了Github網(wǎng)站的頁面坞生，說明部分（README.md）介紹：思源這個(gè)兩個(gè)字體是開源項(xiàng)目仔役，能夠在macOS，Windows是己，Linux/Unix使用又兵。。卒废。（好吧沛厨，我確實(shí)也沒用過github）由于我不太清楚github應(yīng)該怎么玩，就直接記錄思源黑體摔认、思源宋體字體的下載過程吧：
-
將文件列表上方逆皮，Branch選項(xiàng)由'master'切換為'release'branch選擇截圖.JPG
-
對(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格式的字體文件：
HanSansSC解壓.JPG 對(duì)于source-han-serif項(xiàng)目辰企，操作方法類似风纠，進(jìn)入OTF文件夾后，分別下載SourceHanSerifSC_SB-H.zip與SourceHanSerifSC_EL-M.zip兩個(gè)壓縮包牢贸，解壓得到7種不同粗細(xì)的思源宋體的*.otf格式文件竹观。
對(duì)于每個(gè)*.otf文件，右鍵->安裝潜索，或者雙擊文件打開后臭增，亦有安裝按鈕。
至此竹习，安裝了思源字體誊抛，官方主題catfish是不是應(yīng)該能正常使用了呢？重啟Typora整陌，選擇catfish主題拗窃，所有文字再次消失。泌辫。随夸。
Try6：修改catfish.css
字體裝好了，catfish主題也是從官網(wǎng)上下載的震放，為什么就不能夠使用呢宾毒？
電腦的系統(tǒng)是WIN8的，是否可能是平臺(tái)移植性殿遂、不兼容的問題呢诈铛？
一時(shí)也想不到別的原因，google也沒什么明確的結(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主題就什么字都沒有了崖蜜。
- 如果我讓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~）
