| Property | Value | Example | Special Notes |
|---|---|---|---|
| font | The font property specifies the font for an element. | font: italic small-caps bold 12px/30px Georgia, serif; | Shorthand for style variant weight size/line family. |
| @font-face | With the @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore. | @font-face {font-family: myFirstFont;src: url(sansation_light.woff);} | You must first define a name for the font (e.g. myFirstFont), and then point to the font file. |
| family | The font-family property specifies the font for an element. | font-family: "Times New Roman", Times, serif; | 2 types family-name - The name of a font- family.like "times", "courier", "arial".generic-family: like "serif", "sans-serif", "cursive", "fantasy", "monospace". |
| feature-settings | The font-feature-settings property allows control over advanced typographic features in OpenType fonts. | /* enable small-caps */ .ex1 { font-feature-settings: "smcp" on; } | font-feature-settings: normal|feature-value; |
| kerning | Kerning defines how letters are spaced. | font-kerning: auto|normal|none; | Fonts that do not include kerning data, this property will have no visible effect |
| size | The font-size property sets the size of a font. | font-size: 15px; | font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit; |
| size-adjust | The font-size-adjust property gives you better control of the font size when the first selected font is not available | div { font-size-adjust: 0.58; } | font-size-adjust: number|none|initial|inherit; |
| stretch | The font-stretch property allows you to make text narrower (condensed) or wider (expanded). | div { font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial; font-stretch: expanded; } | font-stretch:ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit; |
| style | The font-style property specifies the font style for a text. | font-style: normal; | font-style: normal|italic|oblique|initial|inherit; |
| variant | The font-variant property specifies whether or not a text should be displayed in a small-caps font. | p.small { font-variant: small-caps; } | font-variant: normal|small-caps|initial|inherit; |
| variant-caps | The font-variant-caps property controls the usage of alternate glyphs for capital letters. | p.small {font-variant-caps: small-caps;} | font-variant-caps: normal|small-caps|all-small-caps|petite-caps|all-petite-caps|unicase|titling-caps|initial|inherit|unset; |
| weight | The font-weight property sets how thick or thin characters in text should be displayed. | p.thick { font-weight: bold; } | font-weight: normal|bold|bolder|lighter|number|initial|inherit; Nb: number = 400 900 |