[cc lang=”css”]body {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;
}[/cc]
[cc lang=”css”]
body {
font-family:
/* 1 */ system, -apple-system, BlinkMacSystemFont,
/* 2 */ “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”,
/* 3 */ “Helvetica Neue”, sans-serif;
}[/cc]
第一组映射系统 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 字体回退
考虑到中文字体，最终的列表可能是：
[cc lang=”css”]
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;
}[/cc]
关于平方
预先定义好，使用 “PingFang-SC” 引用，浏览器根据 font-weight 去选择不同的变体。
[cc lang=”css”]
@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;
}[/cc]