Font
div{font: italic 1.2em "Fira Sans", serif;
font: italic small-caps bold 16px/2 cursive;
font-family: serif;
font-size: 12px;
font-size: 80%;
font-stretch: condensed;
font-style: italic;
font-style: oblique 40deg;
font-weight: 400;// normal
font-weight: 700;// bold
}
The font property is shorthand for most useful font properties. Below formal syntax:
[[font-style|[normal|small-caps]|font-weight|font-stretch]?font-size[/line-height]? font-family]
| property | description |
|---|---|
| font-family | Specifies a prioritized list of one or more font family names and/or generic family names for the selected element. |
| font-size | Sets the size of the font. |
| font-stretch | Selects a normal, condensed, or expanded face from a font. Possible values are:
|
| font-style | Sets whether a font should be styled with a normal, italic, or oblique face from its font-family. Possible values are:
|
| font-weight | Sets the weight of the font. The weights available depend on the font-family that is currently set. Possible values are numbers from 100 to 900 or one of the values listed below:
|
| line-height | Sets the height of a line box. It's commonly used to set the distance between lines of text.
You can specify the value in given units or as a percentage relative to the font size of the element itself. Value without unit will be multiplied by the element's own font size. In most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance. |
generic family names
Generic family names are keywords and must not be quoted. A generic font family should be the last item in the list of font family names. Used when no other fonts are available.
| name | description |
|---|---|
| serif | Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings, for example "Lucida Bright", "Palatino", "Palladio", "serif". |
| sans-serif | Glyphs have stroke endings that are plain, for example "Arial", "Verdana", "Helvetica", "Trebuchet MS". |
| monospace | All glyphs have the same fixed width, for example "DejaVu Sans Mono", "Courier New", "Lucida Console". |
| cursive | Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork. |
| fantasy | Fantasy fonts are primarily decorative fonts that contain playful representations of characters, for example "Papyrus". |
| 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. |
| emoji | Fonts that are specifically designed to render emoji. |
| math | This is for the particular stylistic concerns of representing mathematics: superscript and subscript, brackets that cross several lines, nesting expressions, and double struck glyphs with distinct meanings. |
| fangsong | A particular style of Chinese characters that are between serif-style Song and cursive-style Kai forms. This style is often used for government documents. |