css字重-使用合适的字体回退机制(Fallback)来改善Windows平台上网页的字体

昨天在群里,提到了中一宋字体在Windows平台上的疗效的悲催。 今天突然想起来我的博客在Windows平台上也是粗体显示的。 当然,这不是我的错。 在原来的字体机制中,博主会依次选择无衬线字体,直到别无选择,只能使用系统默认的无衬线字体。 然而,骗人胜过骗人命的云都死亡系统,却把中易宋体这个字体加了衬线(好吧,严格来说,英语没有这个概念,我们也勉强效仿西方语言这么亲切地称呼它)进去。 超越系统无衬线字体系列。 结果,简直不能更丑了。

作为一名强迫症患者,我们来看看如何解决这个问题。

字体选择

配置字体回退机制,主要有两个原则:

这两种原则的共同作用是在尽可能多的平台上获得相对较好的字体屏幕显示效果。

对于操作系统中安装的主流宋体英文来说,屏幕显示的效果大致如下:

其中,冬青松体和中文细黑是OS X操作系统上默认安装的; 微软雅黑和中易松体主要安装在Windows操作系统上; 《思源黑体》和《温泉一米黑》是Linux系统中主流的英文歌体。

参考这样的屏幕效果排序,结合一些实际情况(例如在OS X操作系统中css字重,可能因为安装MS Office而得到微软雅黑和中一黑),我们给出了这样的字体回退机制:

Hiragino Sans GBSTSXiheiSource Han Sans CNMicrosoft YaHeiWenQuanYi Micro HeiSimHei

这样,结合西方字体和系统默认的无衬线字体,我们就得到了完整的后备字体列表:

1

css不换行与css换行_css字后面加半透明的框_css字重

font-sans = "Helvetica Neue", "Helvetica", "Hiragino Sans GB", "Source Han Sans CN", "STXihei", "Microsoft YaHei", "WenQuanYi Micro Hei", "SimHei", "Arial", sans-serif

修改modernist主题的字体后备配置

网页的字体后备机制通常写在样式表(CSS)文件中。 hexo的样式表文件是由一些styl文件组成的,每个主题的styl文件结构都不同,所以本文是基于我使用的modernist。

css字后面加半透明的框_css不换行与css换行_css字重

Modernist的作者很细心,将一些可能需要个性化配置的变量存储在一个名为variable.styl的文件中。 这个文件位于./theme/modernist/source/css/_base/variable.stylcss字重,我们打开它,然后将font-default和font-title的值更改为:

1

"Helvetica Neue", "Helvetica", "Hiragino Sans GB", "Source Han Sans CN", "STXihei", "Microsoft YaHei", "WenQuanYi Micro Hei", "SimHei", "Arial", sans-serif

css字后面加半透明的框_css不换行与css换行_css字重

之后我们在命令行运行

1

hexo clean && hexo d -g

然后可以将修补后的 CSS 文件推送到存储库。

在Windows中打开后,会按照上述字体顺序检索字体。 对于新版本的Windows系统,一般会用微软雅黑打开; 对于老版本的Windows字体,一般会用中一黑打开。