修复 WordPress 2017 主题中奇怪字形的 Bug

最近国外掀起了一股用 system-font 的热潮(额,好像国内一直都在用系统字体)。最近更新了 WordPress 4.7,并用上了其 2017 主题,这个主题正是使用系统字体。但是在 macOS 上查看发现中文显示的是繁体字形。

实在是太丑了,究其原因,其实是因为新版的主题的 system-font 用的是繁体中文字体:

html[lang^="zh-"] body,
html[lang^="zh-"] button,
html[lang^="zh-"] input,
html[lang^="zh-"] select,
html[lang^="zh-"] textarea {
	font-family: "PingFang TC", "Helvetica Neue", Helvetica, STHeitiTC-Light, Arial, sans-serif;
}

显示效果如下,字形错误明显的已用下划线标出:

看来这是 WordPress 的 Bug,已经提交并修复。在官方修复前,可以在外观的 “自定义” 里面添加以下 CSS 解决此问题:

html[lang="zh-CN"] body,
html[lang="zh-CN"] button,
html[lang="zh-CN"] input,
html[lang="zh-CN"] select,
html[lang="zh-CN"] textarea {
    font-family: "PingFang SC", "Helvetica Neue", Helvetica, STHeitiSC-Light, Arial, sans-serif
}

为什么这次 WordPress 要为每个语言单独指定系统字体呢?因为如果将字体设置为 -apple-system 后,在 Safari 下能够正确显示苹方字体,但是在 Chrome 下显示的还是老的字体。但如果特定指明字体种类,就能正确显示了。

“修复 WordPress 2017 主题中奇怪字形的 Bug”的2个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论可能需要审核才能显示,请尽量让自己的回复能够对别人有帮助

当有人回复你时你会收到邮件通知,你所回复的人能够看到你的电子邮件地址。