前言

typora是一款非常方便的书写markdown文本的编辑器。官网:https://www.typora.io/

对于字体强迫症患者来说,不把字体改成微软雅黑+Consolas,那是相当难受。本文教大家一个简单粗暴的方法修改typora字体。

本人环境:win10 + typora 0.9.48

对于高手一句话总结,只需修改如下两个文件。

  1. C:\Users\sheng7k\AppData\Roaming\Typora\conf\conf.user.json
  2. C:\Users\sheng7k\AppData\Roaming\Typora\themes\github.css

看不懂 ? 那就对了,下面内容,小白专用。

步骤

打开Typora软件,主题选择Github。

文件 >> 偏好设置 >> 打开主题文件夹

接下来我们只需要修改这个关键的github.css文件即可,有前端开发经验的修改这个就很简单了,当然没有也没关系。

为确保安全,强烈建议大家github.css文件先备份一份到别处存放,然后打开github.css文本文件开始修改(最好用专业点的文本编辑器打开,当然记事本问题也不大。)熟悉CSS代码的一看就懂,不熟悉的话,先观察下代码,可以发现基本都是名字加上一对大括号的形式,首先忽略所有@符号开头的,然后把所有带font-family这一行,修改为font-family: Consolas,"Microsoft Yahei",Arial,sans-serif;

解释下这行代码,font-family代表此处控制的是字体,一种逗号代表一个字体,这里我们写了4个字体,其中最后两种字体不重要,删去也可。我们这句话的意思就是遇到一个字体,如果是英文选用Consolas,因为它在前面,如果是中文就选用Microsoft Yahei(微软雅黑)字体,Consolas是不包含中文字体的。

纯小白(非互联网行业,完全看不懂,怎么办 ?)

很简单,修改字体等样式就是修改,github.css文件,下面是我修改后的github.css文件内容,如果你的Typora版本和我的一样,则可以完全复制粘贴来更改自己的github.css文件,当然最好还是自己比对下,我的这份和自己的那份有什么区别。

  1. /* C:\Users\sheng7k\AppData\Roaming\Typora\themes\github.css */
  2. :root {
  3. --side-bar-bg-color: #fafafa;
  4. --control-text-color: #777;
  5. }
  6. @include-when-export url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);
  7. @font-face {
  8. font-family: 'Open Sans';
  9. font-style: normal;
  10. font-weight: normal;
  11. src: local('Open Sans Regular'),url('./github/400.woff') format('woff')
  12. }
  13. @font-face {
  14. font-family: 'Open Sans';
  15. font-style: italic;
  16. font-weight: normal;
  17. src: local('Open Sans Italic'),url('./github/400i.woff') format('woff')
  18. }
  19. @font-face {
  20. font-family: 'Open Sans';
  21. font-style: normal;
  22. font-weight: bold;
  23. src: local('Open Sans Bold'),url('./github/700.woff') format('woff')
  24. }
  25. @font-face {
  26. font-family: 'Open Sans';
  27. font-style: italic;
  28. font-weight: bold;
  29. src: local('Open Sans Bold Italic'),url('./github/700i.woff') format('woff')
  30. }
  31. html {
  32. font-size: 16px;
  33. }
  34. body {
  35. font-family: Consolas,"Microsoft Yahei",Arial,sans-serif;
  36. color: rgb(51, 51, 51);
  37. line-height: 1.6;
  38. }
  39. #write{
  40. max-width: 860px;
  41. margin: 0 auto;
  42. padding: 20px 30px 40px 30px;
  43. padding-top: 20px;
  44. padding-bottom: 100px;
  45. }
  46. #write > ul:first-child,
  47. #write > ol:first-child{
  48. margin-top: 30px;
  49. }
  50. body > *:first-child {
  51. margin-top: 0 !important;
  52. }
  53. body > *:last-child {
  54. margin-bottom: 0 !important;
  55. }
  56. a {
  57. color: #4183C4;
  58. }
  59. h1,
  60. h2,
  61. h3,
  62. h4,
  63. h5,
  64. h6 {
  65. position: relative;
  66. margin-top: 1rem;
  67. margin-bottom: 1rem;
  68. font-weight: bold;
  69. line-height: 1.4;
  70. cursor: text;
  71. }
  72. h1:hover a.anchor,
  73. h2:hover a.anchor,
  74. h3:hover a.anchor,
  75. h4:hover a.anchor,
  76. h5:hover a.anchor,
  77. h6:hover a.anchor {
  78. /*background: url("../../images/modules/styleguide/para.png") no-repeat 10px center;*/
  79. text-decoration: none;
  80. }
  81. h1 tt,
  82. h1 code {
  83. font-size: inherit;
  84. }
  85. h2 tt,
  86. h2 code {
  87. font-size: inherit;
  88. }
  89. h3 tt,
  90. h3 code {
  91. font-size: inherit;
  92. }
  93. h4 tt,
  94. h4 code {
  95. font-size: inherit;
  96. }
  97. h5 tt,
  98. h5 code {
  99. font-size: inherit;
  100. }
  101. h6 tt,
  102. h6 code {
  103. font-size: inherit;
  104. }
  105. h1 {
  106. padding-bottom: .3em;
  107. font-size: 2.25em;
  108. line-height: 1.2;
  109. border-bottom: 1px solid #eee;
  110. }
  111. h2 {
  112. padding-bottom: .3em;
  113. font-size: 1.75em;
  114. line-height: 1.225;
  115. border-bottom: 1px solid #eee;
  116. }
  117. h3 {
  118. font-size: 1.5em;
  119. line-height: 1.43;
  120. }
  121. h4 {
  122. font-size: 1.25em;
  123. }
  124. h5 {
  125. font-size: 1em;
  126. }
  127. h6 {
  128. font-size: 1em;
  129. color: #777;
  130. }
  131. p,
  132. blockquote,
  133. ul,
  134. ol,
  135. dl,
  136. table{
  137. margin: 0.8em 0;
  138. }
  139. li>ol,
  140. li>ul {
  141. margin: 0 0;
  142. }
  143. hr {
  144. height: 4px;
  145. padding: 0;
  146. margin: 16px 0;
  147. background-color: #e7e7e7;
  148. border: 0 none;
  149. overflow: hidden;
  150. box-sizing: content-box;
  151. border-bottom: 1px solid #ddd;
  152. }
  153. body > h2:first-child {
  154. margin-top: 0;
  155. padding-top: 0;
  156. }
  157. body > h1:first-child {
  158. margin-top: 0;
  159. padding-top: 0;
  160. }
  161. body > h1:first-child + h2 {
  162. margin-top: 0;
  163. padding-top: 0;
  164. }
  165. body > h3:first-child,
  166. body > h4:first-child,
  167. body > h5:first-child,
  168. body > h6:first-child {
  169. margin-top: 0;
  170. padding-top: 0;
  171. }
  172. a:first-child h1,
  173. a:first-child h2,
  174. a:first-child h3,
  175. a:first-child h4,
  176. a:first-child h5,
  177. a:first-child h6 {
  178. margin-top: 0;
  179. padding-top: 0;
  180. }
  181. h1 p,
  182. h2 p,
  183. h3 p,
  184. h4 p,
  185. h5 p,
  186. h6 p {
  187. margin-top: 0;
  188. }
  189. li p.first {
  190. display: inline-block;
  191. }
  192. ul,
  193. ol {
  194. padding-left: 30px;
  195. }
  196. ul:first-child,
  197. ol:first-child {
  198. margin-top: 0;
  199. }
  200. ul:last-child,
  201. ol:last-child {
  202. margin-bottom: 0;
  203. }
  204. blockquote {
  205. border-left: 4px solid #dddddd;
  206. padding: 0 15px;
  207. color: #777777;
  208. }
  209. blockquote blockquote {
  210. padding-right: 0;
  211. }
  212. table {
  213. padding: 0;
  214. word-break: initial;
  215. }
  216. table tr {
  217. border-top: 1px solid #cccccc;
  218. margin: 0;
  219. padding: 0;
  220. }
  221. table tr:nth-child(2n) {
  222. background-color: #f8f8f8;
  223. }
  224. table tr th {
  225. font-weight: bold;
  226. border: 1px solid #cccccc;
  227. border-bottom: 0;
  228. text-align: left;
  229. margin: 0;
  230. padding: 6px 13px;
  231. }
  232. table tr td {
  233. border: 1px solid #cccccc;
  234. text-align: left;
  235. margin: 0;
  236. padding: 6px 13px;
  237. }
  238. table tr th:first-child,
  239. table tr td:first-child {
  240. margin-top: 0;
  241. }
  242. table tr th:last-child,
  243. table tr td:last-child {
  244. margin-bottom: 0;
  245. }
  246. .CodeMirror-gutters {
  247. border-right: 1px solid #ddd;
  248. }
  249. .md-fences,
  250. code,
  251. tt {
  252. border: 1px solid #ddd;
  253. background-color: #f8f8f8;
  254. border-radius: 3px;
  255. padding: 0;
  256. font-family: Consolas,"Microsoft Yahei",Arial,sans-serif;
  257. padding: 2px 4px 0px 4px;
  258. font-size: 0.9em;
  259. }
  260. .md-fences {
  261. margin-bottom: 15px;
  262. margin-top: 15px;
  263. padding: 0.2em 1em;
  264. padding-top: 8px;
  265. padding-bottom: 6px;
  266. }
  267. .md-task-list-item > input {
  268. margin-left: -1.3em;
  269. }
  270. @media screen and (min-width: 914px) {
  271. /*body {
  272. width: 854px;
  273. margin: 0 auto;
  274. }*/
  275. }
  276. @media print {
  277. html {
  278. font-size: 13px;
  279. }
  280. table,
  281. pre {
  282. page-break-inside: avoid;
  283. }
  284. pre {
  285. word-wrap: break-word;
  286. }
  287. }
  288. .md-fences {
  289. background-color: #f8f8f8;
  290. }
  291. #write pre.md-meta-block {
  292. padding: 1rem;
  293. font-size: 85%;
  294. line-height: 1.45;
  295. background-color: #f7f7f7;
  296. border: 0;
  297. border-radius: 3px;
  298. color: #777777;
  299. margin-top: 0 !important;
  300. }
  301. .mathjax-block>.code-tooltip {
  302. bottom: .375rem;
  303. }
  304. #write>h3.md-focus:before{
  305. left: -1.5625rem;
  306. top: .375rem;
  307. }
  308. #write>h4.md-focus:before{
  309. left: -1.5625rem;
  310. top: .285714286rem;
  311. }
  312. #write>h5.md-focus:before{
  313. left: -1.5625rem;
  314. top: .285714286rem;
  315. }
  316. #write>h6.md-focus:before{
  317. left: -1.5625rem;
  318. top: .285714286rem;
  319. }
  320. .md-image>.md-meta {
  321. /*border: 1px solid #ddd;*/
  322. border-radius: 3px;
  323. font-family: Consolas,"Microsoft Yahei",Arial,sans-serif;
  324. padding: 2px 0px 0px 4px;
  325. font-size: 0.9em;
  326. color: inherit;
  327. }
  328. .md-tag{
  329. color: inherit;
  330. }
  331. .md-toc {
  332. margin-top:20px;
  333. padding-bottom:20px;
  334. }
  335. .sidebar-tabs {
  336. border-bottom: none;
  337. }
  338. #typora-quick-open {
  339. border: 1px solid #ddd;
  340. background-color: #f8f8f8;
  341. }
  342. #typora-quick-open-item {
  343. background-color: #FAFAFA;
  344. border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;
  345. border-style: solid;
  346. border-width: 1px;
  347. }
  348. #md-notification:before {
  349. top: 10px;
  350. }
  351. /** focus mode */
  352. .on-focus-mode blockquote {
  353. border-left-color: rgba(85, 85, 85, 0.12);
  354. }
  355. header, .context-menu, .megamenu-content, footer{
  356. font-family: Consolas,"Microsoft Yahei",Arial,sans-serif;
  357. }
  358. .file-node-content:hover .file-node-icon,
  359. .file-node-content:hover .file-node-open-state{
  360. visibility: visible;
  361. }
  362. .mac-seamless-mode #typora-sidebar {
  363. background-color: #fafafa;
  364. background-color: var(--side-bar-bg-color);
  365. }
  366. .md-lang {
  367. color: #b4654d;
  368. }
  369. .html-for-mac .context-menu {
  370. --item-hover-bg-color: #E6F0FE;
  371. }

注意用这种简单的方案,自定义typora样式,如果typora软件版本更新后,则样式会被替换从而失效,因此注意备份。

源码模式字体的修改

经过一波折腾,发现在typora源码模式下,字体还是没能修改过来,怎么回事,不要着急。

文件 >> 偏好设置 >> 打开高级设置 ,这是会来到下面这个文件目录。

懂JSON的人可能一看就明白的,不懂也没关系,英文好点,一看也就明白啦,什么,啥都不会,没办法了,解释下,这两个文本文件都是配置文件,conf.user.json显示就是用户配置文件了,另一个则是默认配置文件,初始状态下,两则的内容时一样的,现在我们修改conf.user.json内容如下

  1. /* C:\Users\sheng7k\AppData\Roaming\Typora\conf\conf.user.json */
  2. /** For advanced users. */
  3. {
  4. "defaultFontFamily": {
  5. "standard": "Microsoft Yahei", //String - Defaults to "Times New Roman".
  6. "serif": "Microsoft Yahei", // String - Defaults to "Times New Roman".
  7. "sansSerif": "Consolas", // String - Defaults to "Arial".
  8. "monospace": "Consolas" // String - Defaults to "Courier New".
  9. },
  10. "autoHideMenuBar": false, //Boolean - Auto hide the menu bar unless the `Alt` key is pressed. Default is false.
  11. // Array - Search Service user can access from context menu after a range of text is selected. Each item is formatted as [caption, url]
  12. "searchService": [
  13. ["Search with Google", "https://google.com/search?q=%s"]
  14. ],
  15. // Custom key binding, which will override the default ones.
  16. "keyBinding": {
  17. // for example:
  18. // "Always on Top": "Ctrl+Shift+P"
  19. },
  20. "monocolorEmoji": false, //default false. Only work for Windows
  21. "autoSaveTimer" : 3, // Deprecidated, Typora will do auto save automatically. default 3 minutes
  22. "maxFetchCountOnFileList": 500
  23. }

OK,这样就可以确保,无论是在源码模式,还是在预览模式,我们的Typora,中文字体始终是微软雅黑,英文字体始终是Consolas。

参考链接

How to write a theme http://theme.typora.io/doc/Write-Custom-Theme/

How to install a theme http://theme.typora.io/doc/Install-Theme/

把typora改为微软雅黑+Consolas的更多相关文章

  1. ubuntu安装苹果Windows以及微软雅黑consolas字体

    ubuntu安装苹果Windows以及微软雅黑consolas字体 ubuntu安装苹果字体 wget http://drive.noobslab.com/data/Mac/macfonts.zip ...

  2. XP win2003系统 微软雅黑字体的使用方法

    微软雅黑是微软公司为其新一代操作系统Vista开发的中文字体,据说它将是迄今为止个人电脑上可以显示的最清晰的中文字体.       微软公司表示,在新一代操作系统中为了能够更加清晰的显示文字,目前正在 ...

  3. kindeditor编辑器微软雅黑样式font-family值变成"

    http://www.100cm.cn/article-126-764.html kindeditor编辑器中选中文字, 修改字体(字体名称中带有空格, 例如"Microsoft YaHei ...

  4. 在 Win10 命令行使用 Consolas + 微软雅黑

    这个过程挺神奇的,步骤参考了下面两篇文章,但是过程很曲折: 1. 使用Monaco和微软雅黑字体美化cmd和PowerShell 2. [zz]Windows的cmd.exe使用consolas加中文 ...

  5. Ubuntu 14 安装 “宋体,微软雅黑,WPS Office的symbol、wingdings、wingdings 2、wingdings 3、webding字体,Consolas雅黑混合版编程字体” 等 Windows 7 下的字体

    Windows平台下,“宋体”.“微软雅黑”.“Courier New(编程字体)”用的比较多,看的也习惯了.那如何在 Ubuntu下也安装这些字体呢? 操作步骤如下: 第一步:从 Windows 7 ...

  6. 解决 Eclipse Indigo 3.7、ADT 中文字体偏小,完美 Consolas 微软雅黑混合字体!

    Eclipse是著名的跨平台的自由集成开发环境(IDE).6月22日Eclipse 3.7 正式发布,代号是 Indigo . 在 Windows 7 下初始后化,发现界面变化不大,但中文字体却面目全 ...

  7. 轻松解决 Eclipse Indigo 3.7 中文字体偏小,完美 Consolas 微软雅黑混合字体!(转)

    在 Windows 7 下初始后化,发现界面变化不大,但中文字体却面目全非,小得根本看不见,而且也看起来很不爽.其实这是 Eclipse 的默认字体换了,以前的一直是 Courier New ,这次e ...

  8. Ubuntu 安装 “宋体,微软雅黑,WPS Office的symbol、wingdings、wingdings 2、wingdings 3、webding字体,Consolas雅黑混合版编程字体” 等 Windows 7 下的字体(转)

    Windows平台下,"宋体"."微软雅黑"."Courier New(编程字体)"用的比较多,看的也习惯了.那如何在 Ubuntu下也安装 ...

  9. Ubuntu16.04 安装 “宋体,微软雅黑,Consolas雅黑混合版编程字体” 等 Windows 7 下的字体

    Windows平台下,“宋体”.“微软雅黑”.“Courier New(编程字体)”用的比较多,看的也习惯了.那如何在 Ubuntu下也安装这些字体呢? 操作步骤如下: 第一步:从 Windows 7 ...

随机推荐

  1. jQuery 插件设置cookie

    对cookies的操作在当访问一个网站就无时无刻的都伴随着我们,记录着我们的一举一动,并将不危害用户隐私的信息,将以保存,这样用户就不用去从新再次操作重复的步骤,这样大大方便了客户,也增加了客户对网站 ...

  2. Ubuntu16.04+cuda8.0+cuDNNV5.1 + Tensorflow+ GT 840M安装小结

    最近重装系统,安装了tensorflow的配置环境 总结一下. 参考资料 http://blog.csdn.net/ZWX2445205419/article/details/69429518 htt ...

  3. [web开发] php优势 - PHP与ASP.NET的比较

    php 优势 - PHP与ASP.NET的比较 如今当提到 Web 开发时,您有许多选择.这些方法中许多都涉及到预处理 — 即,利用特定的标记将代码嵌入到 HTML 页面中,这些标记告诉预处理器,它们 ...

  4. 函数 free 的原型

    函数 free 的原型如下: void free( void * memblock ); 为什么 free 函数不象 malloc 函数那样复杂呢? 这是因为指针 p 的类型以及它所指 的内存的容量事 ...

  5. 【BZOJ】1693: [Usaco2007 Demo]Asteroids(匈牙利)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1693 裸匈牙利.. #include <cstdio> #include <cst ...

  6. 多线程编程(三)--创建线程之Thread VS Runnable

    前面写过一篇基础的创建多线程的博文: 那么本篇博文主要来对照一下这两种创建线程的差别. 继承Thread类: 还拿上篇博客的样例来说: 四个线程各自卖各自的票,说明四个线程之间没有共享,是独立的线程. ...

  7. 【Python】用文本打印树

    From:http://zhidao.baidu.com/link?url=O8U5TynGBMojDw2iFhlghPPf5_ZE1X8CAQMrK19pv-KxhvKCc6Z2yzsoQaukgN ...

  8. jQuery实现瀑布流布局详解(PC和移动端)

    首先我们将如下样式的若干个单元写进body中,并将“box”向左浮动: <div class="box">  <img class="img" ...

  9. C#中Uri类的解释

    URI,是uniform resource identifier,统一资源标识符,用来唯一的标识一个资源.而URL是uniform resource locator,统一资源定位器,它是一种具体的UR ...

  10. 第二篇:CUDA 并行编程简介

    前言 并行就是让计算中相同或不同阶段的各个处理同时进行. 目前有很多种实现并行的手段,如多核处理器,分布式系统等,而本专题的文章将主要介绍使用 GPU 实现并行的方法. 参考本专题文章前请务必搭建好 ...