為了確保字體在中英文、Mac 和 Windows 系統上都有良好的顯示效果,你可以使用以下通用的 font-family 設置。以下是具體的 CSS 代碼示例:
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", 'Microsoft YaHei', "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
代碼解釋
-apple-system:它能讓 macOS 和 iOS 設備使用系統默認字體,比如 macOS 上的 San Francisco 字體,能保證在蘋果設備上有原生的顯示效果。
BlinkMacSystemFont:同樣是針對蘋果設備,在某些情況下可確保使用系統默認字體,與 -apple-system 配合增強兼容性。
PingFang SC:macOS 中文字體
Microsoft YaHei:Windows 中文字體
"Segoe UI":這是 Windows 系統默認的無襯線字體,在 Windows 系統上能呈現出系統原生的風格。
Roboto:這是 Google 推出的字體,很多 Android 設備和網頁應用都在使用,具有良好的可讀性和現代感。
"Helvetica Neue":蘋果系統常用的字體,提供簡潔、優雅的顯示效果。
Arial:是一種通用的無襯線字體,在大多數操作系統上都有預裝,兼容性非常好。
"Noto Sans":Google 開發的支持多種語言的字體,對中文等非拉丁文字有較好的支持。
sans-serif:這是一個通用的字體族,當上述指定的字體都不可用時,瀏覽器會選擇系統默認的無襯線字體來顯示文本。
"Apple Color Emoji"、"Segoe UI Emoji"、"Segoe UI Symbol" 和 "Noto Color Emoji":這些是用于顯示彩色表情符號和符號的字體,確保在不同系統上都能正確顯示表情符號。
Apple Color Emoji:蘋果系統的彩色表情符號
Segoe UI Emoji:Windows的表情符號字體
Segoe UI Symbol:Windows的符號字體
Noto Color Emoji:Google的開源表情符號字體
通過這樣的設置,能夠在不同操作系統和語言環境下為用戶提供一致且美觀的文本顯示效果。
macOS 系統
在 macOS 系統中,當使用 -apple-system 和 BlinkMacSystemFont 時,中文字體通常會顯示為蘋方(PingFang SC)。蘋方是蘋果為中文設計的字體,具有簡潔、清晰的特點,與系統的整體風格相匹配,能保證在蘋果設備上有良好的視覺體驗。
Windows 系統
在 Windows 系統里,由于 -apple-system 和 BlinkMacSystemFont 并不存在,瀏覽器會按照 font-family 列表依次尋找可用字體。通常會使用 "Segoe UI",不過 "Segoe UI" 主要針對英文設計,對于中文,Windows 系統會使用系統默認的中文字體,一般是微軟雅黑。微軟雅黑是 Windows 系統中常用的中文字體,具有較高的可讀性和美觀度。
總結來說,這段 font-family 設置可以讓不同系統盡量使用各自默認的中文字體,以實現較為統一且符合系統風格的顯示效果。