如何指定系統的默認serif和sans-serif字體系列？

當我得知CSS在十多年前，標準（只）使用「默認字體」（這意味着什麼）的方式是：如何指定系統的默認serif和sans-serif字體系列？

font-family: serif; 
font-family: sans-serif;

然後，去年，蘋果增加了一個custom syntax for their new system font，並如果我沒有記錯的話，Blink做了類似的事情。

是否有人可以通過CSS更新最新的內容總結我的font-family屬性應該看起來像當我只想使用默認的sans-serif或serif字體？（我特別不希望網絡字體。）

來源

2016-10-22 Stefan Majewsky

是不是已經在你的問題的答案？這個相關的問題似乎是關於所謂的「舊金山」字體不再暴露。 – Oriol

@Oriol你是什麼意思？鏈接的問題說，我需要一種不同的語法來訪問Mac上的系統字體，我基本上想知道我需要在其他平臺上考慮哪些其他例外。 –

當你說「默認字體」時，你是指給定平臺上的默認UI字體嗎？ – Oriol

的CSS字體模塊級別4條草案引入了new generic font families

對於大多數的語言和文字，現有仿製藥可以映射到東西相媲美的腳本。這對網絡非常有用，因此類似serif和sans-serif可以映射到與內容的語言無關的合理的。但印刷傳統在世界各地差異很大，許多腳本有各種常見的字體設計，不能幹淨地映射到這些現有的泛型。在各種平臺使用類似字體的情況下，擴展一組預定義的CSS通用字體系列以覆蓋這些類型樣式很有用。

如果你想獲得「那種感覺的字體最小外的地方對目標platfom」，這將是system-ui：

system-ui字體家族代表在默認的UI字體給定的平臺

來源

2016-10-22 19:54:48 Oriol

聽起來不錯。我會跟着這個去等Safari來跟上它。 –

下面是一個CSS代碼段默認爲系統字體，在大多數平臺（OSX，iOS版時，Windows，Windows手機，安卓）：

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;

-apple-system - Safari中的舊金山（在Mac OS X和iOS上）; Neue Helvetica和Lucida Grande在舊版本的Mac OS X上。
system-ui - 給定平臺上的默認UI字體。
BlinkMacSystemFont - 的-apple-system當量，Chrome瀏覽器在Mac OS X
"Segoe UI" - 的Windows（Vista的+）和Windows Phone。
Roboto - Android（冰淇淋三明治（4.0）+）和Chrome操作系統。

片段本身，從以下issue on github借來的。

您可以在此article on css-tricks中查找其他操作系統或其舊版本的字體。

來源

2017-12-19 05:35:00

如何指定系統的默認serif和sans-serif字體系列？

回答

相關問題