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。