CSS FONT REFERENCE


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