Hexo博客字体的调整

不同系统、平台的字体并不统一,在不同的平台上显示效果也不一样。
修改Hexo博客的字体,取一个自己喜欢的折中效果。

现在使用的主题是next,修改字体样式的文件路径是:
themes/next/source/css/_variables/base.styl

Mac上怎么调整都不会难看,Windows和安卓上怎么调都感觉不好看。应该是显示效果的差距摆在那里,苹果屏幕素质实在太优秀。试了挺多个字体和大小。最终取折中的结果,配置内容主要修改如下:

// Font families.
$font-family-chinese = Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei";

$font-family-base = $font-family-chinese, sans-serif
// $font-family-base = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global')

$font-family-logo = $font-family-base
$font-family-logo = get_font_family('logo'), $font-family-base if get_font_family('logo')

$font-family-headings = $font-family-base
// $font-family-headings = get_font_family('headings'), $font-family-base if get_font_family('headings')

$font-family-posts = $font-family-base
// $font-family-posts = get_font_family('posts'), $font-family-base if get_font_family('posts')

$font-family-monospace = Menlo, consolas, $font-family-chinese, monospace
// $font-family-monospace = get_font_family('codes'), Menlo, consolas, $font-family-chinese, monospace if get_font_family('codes')

$font-family-icons = 'FontAwesome'

$font-size-base = 16px
$table-font-size = 15px
$font-size-headings-base = 22px
$code-font-size = 14px
$line-height-code-block = 1.6