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

-apple-system、BlinkMacSystemFont 是什么東東？根據(jù) Webkit 博客，-apple-system 用于調(diào)用系統(tǒng)默認(rèn) UI 字體，并且會(huì)根據(jù) font-weight 聲明選擇恰當(dāng)?shù)淖凅w。system 將來有可能成為標(biāo)準(zhǔn)，-apple- 為過渡階段的廠商前綴。

又該去更新字體列表了 :(。

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

第一組映射系統(tǒng) UI 字體：

• -apple-system：macOS 和 iOS 平臺(tái)的 Safari 指向 San Francisco，更老版本的 macOS 指向 Neue Helvetica 和 Lucida Grande（中文字體待驗(yàn)證）
• BlinkMacSystemFont：為 macOS Chrome 應(yīng)用系統(tǒng) UI 字體，與上面等同

第二組定義已知的系統(tǒng) 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 系統(tǒng) UI 字體
• sans-serif 字體回退

考慮到中文字體，最終的列表可能是：

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

}

是不是又臭又長(zhǎng)？維護(hù)這么個(gè)列表也夠蛋疼的。簡(jiǎn)單一點(diǎn)，何嘗不好：

font-family: sans-serif;

關(guān)于蘋方

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

.some-element {
  font-family: "PingFang SC ExtraLight"; /* 或者 "PingFang SC Thin" */
  font-family: "PingFang SC Light";
  font-family: "PingFang SC"; /* 或者 "PingFang SC Regular" */
  font-family: "PingFang SC Medium";
  font-family: "PingFang SC Semibold";
  font-family: "PingFang SC Heavy";
}

或者預(yù)先定義好，使用 "PingFang-SC" 引用，瀏覽器根據(jù) font-weight 去選擇不同的變體。

@font-face {
  font-family: "PingFang-SC";
  font-weight: 100;
  src: local("PingFang SC Thin");
}

@font-face {
  font-family: "PingFang-SC";
  font-weight: 300;
  src: local("PingFang SC Light");
}

@font-face {
  font-family: "PingFang-SC";
  font-weight: 400;
  src: local("PingFang SC Regular");
}

@font-face {
  font-family: "PingFang-SC";
  font-weight: 500;
  src: local("PingFang SC Medium");
}

@font-face {
  font-family: "PingFang-SC";
  font-weight: 700;
  src: local("PingFang SC Semibold");
}

@font-face {
  font-family: "PingFang-SC";
  font-weight: 800;
  src: local("PingFang SC Heavy");
}

body {
  font-family: "PingFang-SC", sans-serif;
}