Why are some of the font-families here different colors than the others?
Also, are “system” and “BlinkMacSystemFont” fonts?
Lastly, what role is “-apple-” playing here?
Thank you!
Why are some of the font-families here different colors than the others?
Also, are “system” and “BlinkMacSystemFont” fonts?
Lastly, what role is “-apple-” playing here?
Thank you!
This is your editor theme.
The code above is saying:
-apple-system
(the default MacOS font). If this doesn’t exist, then:BlinkMacSystemFont
(the default MacOS fonts on older versions of MacOS). If this doesn’t exist, then:Segoe UI
. If this doesn’t exist … so on.sans-serif
font available on the persons machine.If the font has a space inside it, it must be wrapped in quotes (which is why your editor is colouring them differently)
Thank you! But then why is Roboto also colored?
Just a matter of semantics and presentation I believe. It would work without the quotes, the same with the Arial
font. Here’s a good guide on font-family: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family.
PS: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#Valid_family_names says that Gill Sans Extrabold, sans-serif;
is valid. While this is true, it may cause breakage in some older browsers which is why it’s always always good practice to wrap fonts you know are actual fonts and not fallback mechanisms (like sans-serif) in quotes.
I imported the same font family you had into my IDE and I got the following:
Some information for you:
-apple-system
targets San Francisco
in Safari (on Mac OS X and iOS), and it targets Neue Helvetica
and Lucida Grande
on older versions of Mac OS X. It properly selects between San Francisco Text
and San Francisco Display
depending on the text’s size.system-ui
represents the default UI font on a given platform.BlinkMacSystemFont
is the equivalent for Chrome on Mac OS X.Segoe UI
targets Windows and Windows Phone.Roboto
targets Android and newer Chrome OS. It is deliberately listed after Segoe UI
so that if you’re an Android developer on Windows and have Roboto
installed, Segoe UI
will be used instead.Chrome and Safari have recently shipped “system-ui” which is a generic font family that can be used in place of “-apple-system” and “BlinkMacSystemFont”.