revision:
- is a shorthand property for: "font-style", "font-variant", "font-weight", "font-size/line-height", "font-family".
The font-size and font-family values are required. If one of the other values is missing, their default value are used.
The "line-height" property sets the space between lines.
Property values:
font-style : specifies the font style. Default value is "normal"
font-variant : specifies the font variant. Default value is "normal"
font-weight : specifies the font weight. Default value is "normal"
font-size/line-height : specifies the font size and the line-height. Default value is "normal"
font-family : specifies the font family. Default value depends on the browser
caption : uses the font that are used by captioned controls (like buttons, drop-downs, etc.)
icon : uses the font that are used by icon labels
menu : uses the fonts that are used by dropdown menus
message-box : uses the fonts that are used by dialog boxes
small-caption : a smaller version of the caption font
status-bar : uses the fonts that are used by the status bar
initial : sets this property to its default value
inherit : inherits this property from its parent element.
example: font property
This is a paragraph. The font size is set to 15 pixels, and the font family is Arial.
This is a paragraph. The font is set to italic and bold, with small-caps (all lowercase letters are converted to uppercase). The font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.
The font used in captioned controls.
The font used in icon labels.
The font used in dropdown menus.
The font used in dialog boxes.
A smaller version of the caption font.
The font used in the status bar.
Note: The result of the font keywords is browser dependent.
<div>
<p class="a">This is a paragraph. The font size is set to 15 pixels, and the font
amily is Arial.</p>
<p class="b">This is a paragraph. The font is set to italic and bold, with small-caps
(all lowercase letters are converted to uppercase). The font size is set to 12 pixels,
the line height is set to 30 pixels, and the font family is Georgia.</p>
<p style="font:caption">The font used in captioned controls.</p>
<p style="font:icon">The font used in icon labels.</p>
<p style="font:menu">The font used in dropdown menus.</p>
<p style="font:message-box">The font used in dialog boxes.</p>
<p style="font:small-caption">A smaller version of the caption font.</p>
<p style="font:status-bar">The font used in the status bar.</p>
<p><b>Note:</b> The result of the font keywords is browser dependent.</p>
</div>
<style>
p.a {font: 15px Arial, sans-serif;}
p.b {font: italic small-caps bold 12px/30px Georgia, serif;}
</style>
- with the @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore.
In the @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file. To use the font for an HTML element, refer to the name of the font (myFirstFont) through the "font-family" property.
Font descriptors:
font-family : values : name; description : required. Defines the name of the font.
src : values : URL; description : Required. Defines the URL(s) where the font should be downloaded from
font-stretch : values : normal, condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded; description : optional. Defines how the font should be stretched. Default value is "normal"
font-style : values : normal, italic, oblique; description : optional. Defines how the font should be styled. Default value is "normal"
font-weight : values : normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900; description : optional. Defines the boldness of the font. Default value is "normal"
unicode-range : values : unicode-range; description : optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF"
example: @font-face rule
<div>
<div id="Div-A">With CSS, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
</div>
<style>
@font-face {font-family: myFirstFont; src: url(sansation_light.woff);}
div {font-family: myFirstFont;}
</style>
- specifies the font for an element. The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
There are two types of font family names: family-name : the name of a font-family, like "times", "courier", "arial", etc.; generic-family :the name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
Separate each value with a comma. If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.
family-name/generic-family : a prioritized list of font family names and/or generic family names
initial : sets this property to its default value
inherit : inherits this property from its parent element.
example: font-family property
This is a paragraph, shown in the Times New Roman font.
This is a paragraph, shown in the Arial font.
<div>
<p class="c">This is a paragraph, shown in the Times New Roman font.</p>
<p class="d">This is a paragraph, shown in the Arial font.</p>
</div>
<style>
p.c {font-family: "Times New Roman", Times, serif;}
p.d {font-family: Arial, Helvetica, sans-serif;}
</style>
- allows control over advanced typographic features in OpenType fonts.
normal : default. Use the default settings to lay out text
feature-value : Format: string [1|0|on|off] Always a string of 4 ASCII characters.
example: font-feature-settings property
<div>
<div class="ex1">This is some text 0123.</div>
<div class="ex2">This is some text 0123.</div>
<div class="ex3">This is some text 0123.</div>
<div class="ex4">This is some text 0123.</div>
</div>
<style>
/* enable small-caps */
.ex1 { font-feature-settings: "smcp" on; }
/* convert both upper and lowercase to small caps */
.ex2 { font-feature-settings: "c2sc", "smcp"; }
/* no common ligatures */
.ex3 { font-feature-settings: "liga" 0; }
/* enable automatic fractions */
.ex4 { font-feature-settings: "frac"; }
</style>
- controls the usage of the kerning information stored in a font. Kerning defines how letters are spaced.
Note: for fonts that do not include kerning data, this property will have no visible effect.
auto : default. The browser determines whether font kerning should be applied or not
normal : specifies that font kerning is applied
none : specifies that font kerning is not applied
example: font-kerning property
<div>
<div class="Div-AA">"STAY 'AWAY'"</div>
<div class="Div-BB">"STAY 'AWAY'"</div>
</div>
<style>
* Specifies that font kerning is applied */
.Div-AA { font-kerning: normal; }
/* Specifies that font kerning is not applied */
.Div-BB { font-kerning: none; }
</style>
- sets the size of a font.
medium : sets the font-size to a medium size. This is default
xx-small : sets the font-size to an xx-small size
x-small : sets the font-size to an extra small size
small : sets the font-size to a small size
large : sets the font-size to a large size
x-large : sets the font-size to an extra large size
xx-large : sets the font-size to an xx-large size
smaller : sets the font-size to a smaller size than the parent element
larger : sets the font-size to a larger size than the parent element
length : sets the font-size to a fixed size in px, cm, etc.
% : sets the font-size to a percent of the parent element's font size.
initial : sets this property to its default value
inherit : inherits this property from its parent element.
example: font-size property
<div>
<div class="aa">This is some text.</div>
<div class="bb">This is some text.</div>
<div class="cc">This is some text.</div>
</div>
<style>
div.aa {font-size: 1vw;}
div.bb {font-size: large;}
div.cc {font-size: 150%;}
</style>
- gives you better control of the font size when the first selected font is not available.
When a font is not available, the browser uses the second specified font. This could result in a big change for the font size. To prevent this, use the "font-size-adjust" property. All fonts have an "aspect value" which is the size-difference between the lowercase letter "x" and the uppercase letter "X". When the browser knows the "aspect value" for the first selected font, the browser can figure out what font-size to use when displaying text with the second choice font.
number : defines the aspect value to use
none : default value. No font size adjustment
initial : sets this property to its default value
inherit : inherits this property from its parent element.
example: font-size-adjust property
<div>
<div id="div1" class="ab">
You control the font size better with the font-size-adjust property.
</div>
<div id="div2" class="ba">
You control the font size better with the font-size-adjust property.
</div>
<h4>Two divs without the font-size-adjust property:</h4>
<div class="ab">
You control the font size better with the font-size-adjust property.
</div>
<div class="ba">
You control the font size better with the font-size-adjust property.
</div>
</div>
<style>
div.ab {font-family: verdana;}
div.ba {font-family: 'times new roman';}
#div1, #div2 {font-size-adjust: 0.58;}
</style>
- allows you to make text narrower (condensed) or wider (expanded).
Note: Some fonts provide additional faces; condensed faces and expanded faces. For these fonts, you can use the font-stretch property to select a normal, condensed, or expanded font face.
Note: This property has no effect if the selected font does not offer condensed or expanded faces!
ultra-condensed : makes the text as narrow as it gets
extra-condensed : makes the text narrower than condensed, but not as narrow as ultra-condensed
condensed : makes the text narrower than semi-condensed, but not as narrow as extra-condensed
semi-condensed : makes the text narrower than normal, but not as narrow as condensed
normal : default value. No font stretching
semi-expanded : makes the text wider than normal, but not as wide as expanded
expanded : makes the text wider than semi-expanded, but not as wide as extra-expanded
extra-expanded : makes the text wider than expanded, but not as wide as ultra-expanded
ultra-expanded : makes the text as wide as it gets
initial : sets this property to its default value
inherit : inherits this property from its parent element.
example: font-stretch property
this is some text: normal
this is some text: ultra-condensed
this is some text: condensed
this is some text: expanded
this is some text: ultra-expanded
this is some text: extra-condensed
this is some text: semi-expanded
<div>
<p id="p1"> this is some text: normal</p>
<p id="p2"> this is some text: ultra-condensed</p>
<p id="p3"> this is some text: condensed</p>
<p id="p4"> this is some text: expanded</p>
<p id="p5"> this is some text: ultra-expanded</p>
<p id="p6"> this is some text: extra-condensed</p>
<p id="p7"> this is some text: semi-expanded</p>
</div>
<style>
#p1 {font-family: "Helvetica Neue", "Lucida Grande", Arial; font-stretch: normal;}
#p2 {font-family: "Helvetica Neue", "Lucida Grande", Arial; font-stretch: ultra-condensed;}
#p3 {font-family: "Helvetica Neue", "Lucida Grande", Arial; font-stretch: condensed;}
#p4 {font-family: "Helvetica Neue", "Lucida Grande", Arial; font-stretch: expanded;}
#p5 {font-family: "Helvetica Neue", "Lucida Grande", Arial; font-stretch: ultra-expanded;}
#p6 {font-family: "Helvetica Neue", "Lucida Grande", Arial; font-stretch: extra-condensed;}
#p7 {font-family: "Helvetica Neue", "Lucida Grande", Arial; font-stretch: semi-expanded;}
</style>
- specifies the font style for a text.
normal : the browser displays a normal font style. This is default
italic : the browser displays an italic font style
oblique : the browser displays an oblique font style
initial : sets this property to its default value
inherit : inherits this property from its parent element.
example: font-style property
this is a paragraph: normal
this is a paragraph: italic
this is a paragraph: oblique
<div>
<p id="p1a"> this is a paragraph: normal</p>
<p id="p2a"> this is a paragraph: italic</p>
<p id="p3a"> this is a paragraph: oblique</p>
</div>
<style>
#p1a {font-family: "Helvetica Neue", "Lucida Grande", Arial; font-style: normal;}
#p2a {font-family: "Helvetica Neue", "Lucida Grande", Arial; font-style: italic;}
#p3a {font-family: "Helvetica Neue", "Lucida Grande", Arial; font-style: oblique;}
</style>
- specifies whether or not a text should be displayed in a small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
normal : the browser displays a normal font. This is default
small-caps : the browser displays a small-caps font
initial : sets this property to its default value
inherit : inherits this property from its parent element.
example: font property
this is a paragraph: normal
this is a paragraph: small-caps
<div>
<p id="p1b"> this is a paragraph: normal</p>
<p id="p2b"> this is a paragraph: small-caps</p>
</div>
<style>
#p1b {font-family: "Helvetica Neue", "Lucida Grande", Arial; font-variant: normal;}
#p2b {font-family: "Helvetica Neue", "Lucida Grande", Arial; font-variant: small-caps;}
</style>
- controls the usage of alternate glyphs for capital letters.
normal : deactivates the use of alternate glyphs
small-caps : displays small capitals
all-small-caps : displays small capitals for both upper and lowercase letters
petite-caps : displays petite capitals
all-petite-caps : displays petite capitals for both upper and lowercase letters
unicase : displays a mix of small capitals for uppercase letters with normal lowercase letters
titling-caps : displays titling capitals
unset :
initial : sets this property to its default value
inherit : inherits this property from its parent element.
example: font property
My name is Kate Winslet.
My name is Kate Winslet.
My name is Kate Winslet.
My name is Kate Winslet.
My name is Kate Winslet.
My name is Kate Winslet.
My name is Kate Winslet.
<div>
<p class="normal">My name is Kate Winslet.</p>
<p class="small">My name is Kate Winslet.</p>
<p class="allsmall">My name is Kate Winslet.</p>
<p class="petite">My name is Kate Winslet.</p>
<p class="allpetite">My name is Kate Winslet.</p>
<p class="unicase">My name is Kate Winslet.</p>
<p class="titling">My name is Kate Winslet.</p>
</div>
<style>
p.normal {font-variant-caps: normal;}
p.small {font-variant-caps: small-caps;}
p.allsmall {font-variant-caps: all-small-caps;}
p.petite {font-variant-caps: petite-caps;}
p.allpetite {font-variant-caps: all-petite-caps;}
p.unicase {font-variant-caps: unicase;}
p.titling {font-variant-caps: titling-caps;}
</style>
- sets how thick or thin characters in text should be displayed.
normal : defines normal characters. This is default
bold : defines thick characters
bolder : defines thicker characters
lighter : defines lighter characters
100, 200, 300, 400, 500, 600, 700, 800, 900 : defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold
initial : sets this property to its default value
inherit : inherits this property from its parent element.
example: font property
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
<div>
<p class="normal-a">This is a paragraph.</p>
<p class="light-a">This is a paragraph.</p>
<p class="thick-a">This is a paragraph.</p>
<p class="thicker-a">This is a paragraph.</p>
</div>
<style>
p.normal-a {font-weight: normal;}
p.light-a {font-weight: lighter;}
p.thick-a {font-weight: bold;}
p.thicker-a {font-weight: 900;}
</style>