问题
When I learned CSS over a decade ago, the standard (and only) way to use the "default fonts" (whatever that means) was:
font-family: serif;
font-family: sans-serif;
Then, last year, Apple added a custom syntax for their new system font, and Blink did something similar if I remember correctly.
Can someone who's more up-to-date with CSS summarize how my font-family property should look like when I just want the default sans-serif or serif font? (I specifically don't want webfonts.)
回答1:
The CSS Fonts Module Level 4 draft introduces new generic font families
For most languages and scripts, existing generics can be mapped to something comparable to that script. That’s useful for the web so that generics like
serifandsans-serifmap to something reasonable independent of the language of the content. But typographic traditions vary widely across the world and many scripts have a variety of common typeface designs that don’t map cleanly into these existing generics. In situations where a similar typeface is used across a wide variety of platforms, it’s useful to extend the set of predefined CSS generic font families to cover these type styles.
If you want to get "the font that feels the least out-of-place on the target platfom", that would be system-ui:
system-ui font family representing the default UI font on a given platform
回答2:
Here is a css snippet to default to system font, on most platforms (OSX, iOS, Windows, Windows Phone, Android):
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
-apple-system— San Francisco in Safari (on Mac OS X and iOS); Neue Helvetica and Lucida Grande on older versions of Mac OS X.system-ui— default UI font on a given platform.BlinkMacSystemFont— equivalent of-apple-system, for Chrome on Mac OS X."Segoe UI"— Windows (Vista+) and Windows Phone.Roboto— Android (Ice Cream Sandwich (4.0)+) and Chrome OS.
Snippet itself, borrowed from the following issue on github.
You can look up fonts for other OS or older versions of them in this article on css-tricks.
来源：https://stackoverflow.com/questions/40196232/how-to-specify-the-system-s-default-serif-and-sans-serif-font-family