Hexo主题Tranquilpeak代码等宽字体问题研究

Hexo是一个比较火的博客框架（主观），然后我使用了其中的Tranquilpeak主题，但是发现写着写着发现，本来应该等宽的代码部分明显不是等宽的，然后就翻文档

Change global style

If you want to change font families, font size, sidebar color, things like that, take a look at source/_css/utils/_variables.scss file. This file contains global variables used in this theme. Build the theme after changes to see changes.

OK，接着翻源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// Global settings
// --------------------------------------------
// Font families
$open-sans:            'Open Sans';
$open-sans-sans-serif: 'Open Sans', sans-serif;
$merriweather-serif:   'Merriweather', serif;
$menlo:                 Menlo;
$font-family-base: $open-sans-sans-serif;
$font-families: (
   // base
   'headings':          $open-sans-sans-serif,
   // components
   'code':              $menlo,
   'caption':           $merriweather-serif,
   'image-gallery':     $open-sans,
   'post-header-cover': $merriweather-serif,
   'post-meta':         $open-sans-sans-serif,
   'post-content':      $merriweather-serif,
   'post-excerpt-link': $open-sans-sans-serif,
   'highlight':         $menlo,
   // layout
   'sidebar':           $open-sans-sans-serif
);

Menlo这个字体是mono space的呀，怎么显示不对呢，然后我注意到这么一段话:

Menlo是一个无衬线等宽字体，由Jim Lyles设计，首次出现于2009年8月上市的Mac OS X Snow Leopard系统内建字体之一。基于开源字体Bitstream Vera与自由版权字体DejaVu字体改良而来

什么？Mac OS X内建字体？那也就是说本穷用的Windows 10 Home应该是不会有咯。然后本穷就下载，安装，重启浏览器，OK，终于显示正确了。

总结

• Web开发不得不考虑跨平台的问题，所以一定不能在字体这个地方栽跟头，不能说你用的Mac开发的你就用Menlo不管了，好歹加个备选的monospace。

• issue给作者之后发现，问题已经被fix，但是还得等下个版本release才能见到。这又教导我，在issue之前最好好好搜一下已有的issue和pull request，已经有的问题不要重复开issue。

注释和共享