某天（2016.07.12）发现 GitHub 的字体比原来宽了一些，打开开发者工具一看，字体设置中多了两个奇怪的玩意：

    1. body {
    2.   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    3. }

    -apple-system、BlinkMacSystemFont 是什么东东？根据 Webkit 博客，-apple-system 用于调用系统默认 UI 字体，并且会根据 font-weight 声明选择恰当的变体。system 将来有可能成为标准，-apple- 为过渡阶段的厂商前缀。

    又该去更新字体列表了 :(。

    1. body {
    2.   font-family:
    3.  system, -apple-system, BlinkMacSystemFont,
    4.  "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    5.  "Helvetica Neue", sans-serif;
    6. }

    第一组映射系统 UI 字体：

    • -apple-system：macOS 和 iOS 平台的 Safari 指向 San Francisco，更老版本的 macOS 指向 Neue Helvetica 和 Lucida Grande（中文字体待验证）
    • BlinkMacSystemFont：为 macOS Chrome 应用系统 UI 字体，与上面等同

    第二组定义已知的系统 UI 字体：

    • Segoe UI 面向 Windows 和 Windows Phone
    • Roboto Android 及 较新的 Chrome OS
    • Oxygen 面向 KDE、Ubuntu 等
    • Fira Sans 面向 Firefox OS
    • Droid Sans 面向老版本 Android

    第三组回退处理：

    • Helvetica Neue El Capitan 之前的 macOS 系统 UI 字体
    • sans-serif 字体回退

    考虑到中文字体，最终的列表可能是：

    1. body {
    2.   font-family:
    3.     system, -apple-system, BlinkMacSystemFont,
    4.     "PingFang SC", "Segoe UI", "Microsoft YaHei", "wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    5.     "Helvetica Neue", Helvetica, Arial, sans-serif;
    7. }

    是不是又臭又长？维护这么个列表也够蛋疼的。简单一点，何尝不好：

    1. font-family: sans-serif;

    关于苹方

    可以直接指定具体的字形：

    1. .some-element {
    2.   font-family: "PingFang SC ExtraLight"; 
    3.   font-family: "PingFang SC Light";
    4.   font-family: "PingFang SC"; 
    5.   font-family: "PingFang SC Medium";
    6.   font-family: "PingFang SC Semibold";
    7.   font-family: "PingFang SC Heavy";
    8. }

    或者预先定义好，使用 "PingFang-SC" 引用，浏览器根据 font-weight 去选择不同的变体。

    1. @font-face {
    2.   font-family: "PingFang-SC";
    3.   font-weight: 100;
    4.   src: local("PingFang SC Thin");
    5. }
    7. @font-face {
    8.   font-family: "PingFang-SC";
    9.   font-weight: 300;
    10.   src: local("PingFang SC Light");
    11. }
    13. @font-face {
    14.   font-family: "PingFang-SC";
    15.   font-weight: 400;
    16.   src: local("PingFang SC Regular");
    17. }
    19. @font-face {
    20.   font-family: "PingFang-SC";
    21.   font-weight: 500;
    22.   src: local("PingFang SC Medium");
    23. }
    25. @font-face {
    26.   font-family: "PingFang-SC";
    27.   font-weight: 700;
    28.   src: local("PingFang SC Semibold");
    29. }
    31. @font-face {
    32.   font-family: "PingFang-SC";
    33.   font-weight: 800;
    34.   src: local("PingFang SC Heavy");
    35. }
    37. body {
    38.   font-family: "PingFang-SC", sans-serif;
    39. }

    参考链接：