/ 软件 / 1710阅

对WordPress 4.6使用原生字体代替谷歌字体的改进

在常阳时光的博文《WordPress 4.6 将使用原生字体代替谷歌字体》中提到:

WordPress 4.6 将使用原生字体代替谷歌字体,所选用字体覆盖了所有主流操作系统,包括:安卓,苹果iOS,Windows,苹果macOS,以及Linux。

完整的CSS代码如下:

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

其中:

  • -apple-system: 用于 Safari 浏览器(iOS 及 Mac OS),和 Firefox (Mac OS);BlinkMacSystemFont: 用于 Chrome 浏览器(Mac OS);
  • Segoe UI: 用于微软 Windows 系统;
  • Roboto: 用于安卓系统及 Chrome OS 系统;
  • Oxygen-Sans: 用于 KDE 系统;
  • Ubuntu: 用于 Ubuntu 系统;
  • Cantarell: 用于 GNOME 系统;
  • Helvetica Neue: 用于 Mac OS 10.11 之前的版本;
  • sans-Serif: 标准回滚字体,以上都没有的话,用这个字体。

经试验,在比如Windows XP等系统下显示中文仍然为传统的SimSun字体,比较难看。因此根据经验加入了微软雅黑Light、微软雅黑、华文细黑。

font-family: -apple-system,BlinkMacSystemFont,"Microsoft Yahei UI Light","Microsoft YaHei",STXihei,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
# 写于八年前,改于二年前
           

8

  1. 不亦乐乎

    居然放弃谷歌字体了,functions文件又可以删几行代码了,好事。

    Chromium 51 · Ubuntu
    1. S̆̈

      @不亦乐乎对的!用系统的字体最省事了。

      Google Chrome 48 · Mac OS X 10.11
  2. stan

    终于不用google字体了,谢天谢地了要

    Safari 9 · Mac OS X 10.11
    1. S̆̈

      @stan嗯,速度好加快点了

      Google Chrome 48 · Mac OS X 10.11
  3. 老杨

    XP 并不自带雅黑吧?

    Safari 8 · iPhone iOS 8.3
    1. S̆̈

      @老杨你这么一说好像是的。xp要自己安装字体的。是不是sp3之类开始才带?

      Wordpress App 6 · iPhone iOS 10.0
      1. 老杨

        @S̆̈记得是任何版本都不带…

        Safari 8 · iPhone iOS 8.3
        1. S̆̈

          @老杨只能自己装了……STXihei应该有。

          Wordpress App 6 · iPhone iOS 10.0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注