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 |