楔子

Landscape-plus是我正在用的主题 根据中国的国情进行了一些修改 但字体配置仍有提升的空间 我感觉问题有下面几个

  • 微软雅黑排在前面
  • 英文字体放在中文字体后面
  • 使用了衬线(serif)字体

第一个 虽说Windows用户占了大多数 可微软雅黑这个字体并不是最好的 有追求的用户及Mac用户会装冬青黑体 而把冬青黑体放在前面对于没装它的用户来说没有什么影响 所以我们要对顺序进行一些调整以兼顾不同平台 让网站在不同平台的效果都是最优的

类似的 英文字体应该排在中文字体前面

衬线字体 我不大喜欢 全部改掉了

修改

改字体

landscape-plus/source/css/_variables.styl

1
2
3
4
5
6
7
// Fonts
//font-sans = "微软雅黑","Microsoft Yahei", "Droid Sans", Helvetica Neue, Helvetica, Arial, sans-serif
font-sans = Inconsolata, Helvetica Neue, Helvetica, Arial, "Hiragino Sans GB", "微软雅黑", "Microsoft Yahei", "WenQuanYi Micro Hei", "Droid Sans", sans-serif
//font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif
font-serif = "Droid Serif", Georgia, Serif
font-mono = Inconsolata, "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
//font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace

注意注释掉的部分

衬线改非衬线

landscape-plus/source/css/_extend.styl

1
2
3
4
5
$base-style
  h1, h2, h3, h4, h5, h6 
    font-weight: bold; 
    color: color-default 
    font-family: font-sans

/landscape-plus/source/css/_partial/article.styl

1
2
blockquote
  font-family: font-sans

后记

扩展阅读

如何保证网页的字体在各平台都尽量显示为最高质量的黑体？里梁海的回答