網頁使用哪些字體方案能讓其在 macOS 和 Windows 下都良好呈現？

目標語言：中文（簡繁體），英文。

作如下猜想：

1、可能使用兩個系統共同自帶的字體；

2、不使用共同自帶的字體，但精心排列 font-family 的先後順序；

3、使用 font-face 定義理想字體。

請推薦較為通用、能準確傳達文字信息、優雅的字體方案，讓網頁瀏覽效果在兩個系統中均達到最佳狀態（不考慮特定風格的字體使用，只建立通用、耐看且優雅的字體方案）。

---

邀請我幹啥, 給你們看我網站的蛋疼 CSS:

@font-face {
font-family: "localsans-win-light";
src: local("Microsoft YaHei Light"), local("Microsoft JhengHei");
}
@font-face {
font-family: "localsans-win";
src: local("Microsoft YaHei");
}
@font-face {
font-family: "localsans-win-bold";
font-weight: bold;
src: local("Microsoft YaHei Bold"), local("Microsoft YaHei");
}
@font-face {
font-family: "localsans-mac-light";
src: local("PingFangSC-Light"), local("HiraginoSansGB-W3");
}
@font-face {
font-family: "localsans-mac";
src: local("PingFangSC-Regular"), local("HiraginoSansGB-W3");
}
@font-face {
font-family: "localsans-mac-bold";
src: local("PingFangSC-Semibold"), local("HiraginoSansGB-W6");
}

/* 使用的時候 */

body {
font-family: "localsans-mac", "localsans-win", sans-serif;
}


---

macos和windows上面最好的字體都是獨佔的，所以你可以兩個一起寫，這樣在不同的系統上就會選擇自己的字體。

---

一般都是兩個系統的最佳字體都寫在font-family中，兩個系統會從左往右依次選擇，類似這樣：

font-family: "Helvetica Neue", Helvetica, "Microsoft Yahei", Arial, sans-serif;


要使用非系統自帶的字體，英文可以直接使用web font，中文可以使用「閹割」的web font來裝飾一些標題、短語等少量文字，但是需要提前生成。生成這樣數量有限的中文字體文件可以使用一些在線字體服務，例如，www.iconfont.cn/webfont。最終使用類似這樣：

@font-face {font-family: "webfont-fine";
src: url("http://at.alicdn.com/t/ockji0xhuyn1att9.eot");
src: url("http://at.alicdn.com/t/ockji0xhuyn1att9.eot?#iefix") format("embedded-opentype"),
url("http://at.alicdn.com/t/ockji0xhuyn1att9.woff") format("woff"),
url("http://at.alicdn.com/t/ockji0xhuyn1att9.ttf") format("truetype"),
url("http://at.alicdn.com/t/ockji0xhuyn1att9.svg#思源黑體-細") format("svg");
}


當然，也可以放在自己伺服器上。

---

啥現在還有這問題？

這年頭不都是直接上 webfont 嗎？

---

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


我不太講究的時候就寫上這麼一串，省事。

---

根據自己具體情況選擇前三種

---

最近使用noto字體，感覺不錯，不過macOS和win下也是兩套，一套unhinted另一套hinted

---

推薦閱讀：