50 lines
2.3 KiB
Plaintext
50 lines
2.3 KiB
Plaintext
== Why is this an issue?
|
|
|
|
The `font-family` (and the shorthand `font`) CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
|
|
|
|
|
|
If none of the font names defined in a `font` or `font-family` declaration are available on the browser of the user, the browser will display the text using its default font. It's recommended to always define a generic font family for each declaration of `font` or `font-family` to get a less degraded situation than relying on the default browser font. This lets the browser select an acceptable fallback font when necessary.
|
|
|
|
The list of generic font families is as follows:
|
|
|
|
* ``++serif++``: Glyphs have finishing strokes, flared or tapering ends, or actual serifed endings.
|
|
* ``++sans-serif++``: Glyphs have plain stroke endings.
|
|
* ``++cursive++``: Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces.
|
|
* ``++fantasy++``: Fantasy fonts are primarily decorative fonts that contain playful representations of characters.
|
|
* ``++monospace++``: All glyphs have the same fixed width.
|
|
* ``++system-ui++``: Glyphs are taken from the default user interface font on a given platform.
|
|
* ``++ui-serif++``: The default user interface serif font.
|
|
* ``++ui-sans-serif++``: The default user interface sans-serif font.
|
|
* ``++ui-monospace++``: The default user interface monospace font.
|
|
* ``++ui-rounded++``: The default user interface font that has rounded features.
|
|
|
|
== How to fix it
|
|
|
|
You should always include at least one generic family name in a `font-family` list, since there's no guarantee that any given font is available.
|
|
|
|
=== Code examples
|
|
|
|
==== Noncompliant code example
|
|
|
|
[source,css,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
a {
|
|
font-family: Helvetica, Arial, Verdana, Tahoma; /* Noncompliant; there is no generic font family in the list */
|
|
}
|
|
----
|
|
|
|
==== Compliant solution
|
|
|
|
[source,css,diff-id=1,diff-type=compliant]
|
|
----
|
|
a {
|
|
font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
|
|
}
|
|
----
|
|
|
|
|
|
== Resources
|
|
=== Documentation
|
|
* CSS Specification - https://www.w3.org/TR/CSS2/fonts.html#generic-font-families[Generic font families]
|
|
* MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/font-family[``++font-family++``]
|
|
* MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/font[``++font++``] |