在常阳时光的博文《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

    回复

    • S

      江苏

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

      九年前 Google Chrome 48 · Mac OS X 10.11

      回复

  2. stan

    上海

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

    九年前 Safari 9 · Mac OS X 10.11

    回复

    • S

      江苏

      @stan 嗯,速度好加快点了

      九年前 Google Chrome 48 · Mac OS X 10.11

      回复

  3. 老杨

    广东

    XP 并不自带雅黑吧?

    九年前 Safari 8 · iPhone iOS 8.3

    回复

    • S

      上海

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

      九年前 Wordpress App 6 · iPhone iOS 10.0

      回复

      • 老杨

        广东

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

        九年前 Safari 8 · iPhone iOS 8.3

        回复

        • S

          江苏

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

          九年前 Wordpress App 6 · iPhone iOS 10.0

          回复

       

发表评论

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