Typora与它的主题

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一下,找到了一些别人的经验:

  1. 一篇Blog:Typora 修改中文字体,相关内容是:

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

  2. 一篇简书:修改 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;
}

重启Typora之后发现中文字体依然是默认'宋体':

image

Try2:修改'微软雅黑'为'Microsoft YaHei'

继续Google,找到另一篇相关帖子:

  1. 另一篇简书:使用第三方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;
}

重启Typora之后,中文字体终于变了:

image

Try3:修改字体为其它windows中文字体

'微软雅黑'的中文字体感觉上只是没有那么丑,但依然不是很好看。我的Windows字体库中有一款“方正苏新诗柳楷简体”,想拿过来用一下。按照上面的经验,修改body{}中"font-family:"后面的'Microsoft YaHei'为'方正苏新诗柳楷简体'。

重启Typora,字体又变回宋体了。。。

考虑原因,好吧,我也不知道准确原因,猜测与不识别'微软雅黑',但能识别'Microsoft YaHei'的原因一致。


使用官方主题

到目前为止,难道我会满足于'微软雅黑'的字体效果吗,并不会。

将目光转到Typora的官网寻找一些帮助,在Typora的主题页面发现了官方提供的几个主题:

image

进入第一个主题Catfish,发现主题说明支持中文字体,(大喜):

无衬线字体,衬线字体和等宽字体分别采用思源黑体,思源宋体, mononoki ,在 Windows 下有良好的中文呈现效果。

Try4:使用官方主题catfish

下载主题压缩包,将压缩包里边的几个文件解压到Typora的自定义主题目录,包括:

  • catfish.css
  • catfish.styl
  • catfish(文件夹)

重启Typora,在主题选项里将Github切换为catfish。

(咦。。。文字都去哪里了。。。)

(什么都没有。。。)

Try5:下载思源黑体、思源宋体

上面提到了这个主题里边使用的字体是思源黑体,思源宋体(这又是什么鬼,自己怎么什么都不知道),好在官方主题catfish说明中刚好给了两个链接:

两个链接分别链接到了Github网站的页面,说明部分(README.md)介绍:思源这个两个字体是开源项目,能够在macOS,Windows,Linux/Unix使用。。。(好吧,我确实也没用过github)由于我不太清楚github应该怎么玩,就直接记录思源黑体、思源宋体字体的下载过程吧:

  1. 将文件列表上方,Branch选项由'master'切换为'release'

    image
  2. 对于source-han-sans项目,点击进入OTF文件夹,然后点击进入SourceHanSansSC.zip,再点击download下载这个压缩包,解压后在SourceHanSansSC文件夹下,得到7种不同粗细思源黑体的*.otf格式的字体文件:

    image
  3. 对于source-han-serif项目,操作方法类似,进入OTF文件夹后,分别下载SourceHanSerifSC_SB-H.zipSourceHanSerifSC_EL-M.zip两个压缩包,解压得到7种不同粗细的思源宋体的*.otf格式文件。

  4. 对于每个*.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~)

image
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容