Typora与它的主题
Markdown这种格式被许多写作网站支持，简书对于新用户虽然没有将Markdown作为默认的文字编辑格式，但是可以通过设置，将常用的文字编辑器修改为Markdown。
不过，在线写Markdown总有许多的不方便，还是喜欢使用客户端像文本编辑器一样能够随时编辑。在Windows的平台下，尝试用过“马克飞象”、“Cmd Markdown”以及其它几款在线编辑工具。都是各有特色，但都有些使用不方便的地方。最后，也是目前，一直使用“Typora”，Typora的所见即所得、离线编辑让我觉得十分得心应手。
Typora在安装后默认的主题有这么几个：
- Github
- Newsprint
- Night
- Pixyll
- Whitey
不管切换哪一个主题，中文字体都默认显示为“宋体”，真的丑爆了。实在忍受不了这么丑的中文字体，于是去Typora的设置选项找一下，想找到字体的设置方式。结果字体设置没有找到，不过在File -> Preferences 选项中Appearance（外观） -> Custom Themes（自定义主题）下发现了一个Open Theme Folder的按钮。
进入到这个Typora提供的这个自定义主题设置的入口文件夹，发现了与上面各主题对应的*.css格式的配置文件。我只知道CSS能够描述网页的样式，可以和HTML配合使用，但对于CSS的语法是一窍不通。
修改字体为“微软雅黑”
盯着github.css这个文件瞅了半天，文件开始部分：
@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一下，找到了一些别人的经验：
-
一篇Blog：Typora 修改中文字体，相关内容是：
在所有 "font-family" 下添加 '微软雅黑' ，但是 除了 "@font-face{}" 下的 "font-family"。
-
一篇简书：修改 Windows 下 Typora 的中文字体显示，建议基本类似：
可以直接 Ctrl+F 搜索 font-family，在 body{ } 里的 font-family 后添加 ,'微软雅黑'
注意！
不要修改在 @font-face{ }中的 font-family，仅修改在 body{ } 中的。
Try1：按照文章所示方法，添加'微软雅黑'字段
仅在body{}模块的"font-family"后面增加'微软雅黑'设置：
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'
继续Google，找到另一篇相关帖子：
- 另一篇简书：使用第三方Markdown编辑器编辑为知笔记，在"font-family"使用的而是'Microsoft YaHei'而不是'微软雅黑'。
从这篇文章中得到一些启示，字体设置可能不识别'微软雅黑'，但能识别'Microsoft YaHei'。另外，body{}中"font-family:"后面的一长串字体名称，应该是根据先后顺序进行优先查找的，修改如下：
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字体库中有一款“方正苏新诗柳楷简体”，想拿过来用一下。按照上面的经验，修改body{}中"font-family:"后面的'Microsoft YaHei'为'方正苏新诗柳楷简体'。
重启Typora，字体又变回宋体了。。。
考虑原因，好吧，我也不知道准确原因，猜测与不识别'微软雅黑'，但能识别'Microsoft YaHei'的原因一致。
使用官方主题
到目前为止，难道我会满足于'微软雅黑'的字体效果吗，并不会。
将目光转到Typora的官网寻找一些帮助，在Typora的主题页面发现了官方提供的几个主题：
进入第一个主题Catfish，发现主题说明支持中文字体，（大喜）：
无衬线字体，衬线字体和等宽字体分别采用思源黑体，思源宋体， mononoki ，在 Windows 下有良好的中文呈现效果。
Try4：使用官方主题catfish
下载主题压缩包，将压缩包里边的几个文件解压到Typora的自定义主题目录，包括：
- catfish.css
- catfish.styl
- catfish（文件夹）
重启Typora，在主题选项里将Github切换为catfish。
（咦。。。文字都去哪里了。。。）
（什么都没有。。。）
Try5：下载思源黑体、思源宋体
上面提到了这个主题里边使用的字体是思源黑体，思源宋体（这又是什么鬼，自己怎么什么都不知道），好在官方主题catfish说明中刚好给了两个链接：
- source-han-sans（思源黑体）
- source-han-serif（思源宋体）
两个链接分别链接到了Github网站的页面，说明部分（README.md）介绍：思源这个两个字体是开源项目，能够在macOS，Windows，Linux/Unix使用。。。（好吧，我确实也没用过github）由于我不太清楚github应该怎么玩，就直接记录思源黑体、思源宋体字体的下载过程吧：
-
将文件列表上方，Branch选项由'master'切换为'release'branch选择截图.JPG
-
对于source-han-sans项目，点击进入OTF文件夹，然后点击进入SourceHanSansSC.zip，再点击download下载这个压缩包，解压后在SourceHanSansSC文件夹下，得到7种不同粗细思源黑体的*.otf格式的字体文件：
HanSansSC解压.JPG 对于source-han-serif项目，操作方法类似，进入OTF文件夹后，分别下载SourceHanSerifSC_SB-H.zip与SourceHanSerifSC_EL-M.zip两个压缩包，解压得到7种不同粗细的思源宋体的*.otf格式文件。
对于每个*.otf文件，右键->安装，或者双击文件打开后，亦有安装按钮。
至此，安装了思源字体，官方主题catfish是不是应该能正常使用了呢？重启Typora，选择catfish主题，所有文字再次消失。。。
Try6：修改catfish.css
字体装好了，catfish主题也是从官网上下载的，为什么就不能够使用呢？
电脑的系统是WIN8的，是否可能是平台移植性、不兼容的问题呢？
一时也想不到别的原因，google也没什么明确的结果，于是再次打开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"第一默认的字体是"Source Han Sans"，这个肯定是和思源黑体有关的，但貌似不是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");
}
对于第一段设置大胆猜测一下，"font-family: Source Han Sans"以及"font-weight: normal"的字体所在的位置url为"catfish/SourceHanSans-Regular.ttc"。刚好，在自定义主题路径themes中的catfish，找到了"SourceHanSans-Regular.ttc"与"SourceHanSans-Bold.ttc"，但是Windows貌似不识别这种格式。
google一下，TTC与OTF都是字体格式，但是我的WIN8貌似只认识*.otf格式的文件，到这里，我已经大概知道是怎么回事了。
- catfish.css想使用'Source Han Sans'字体，于是去找'catfish'文件夹下找'SourceHanSans-Regular.ttc'的字体文件，字体文件虽然是找到了，但是我的Win8并不认识这种字体，所以Typora切换到catfish主题就什么字都没有了。
- 如果我让Typora按照路径找到 OTF格式的字体，而不是TTC的字体，那么字体应该就可以显示了。
于是，我把上面下载的思源字体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~）
