Property: |
font |
Values: |
<font-style>, <font-variant>, <font-weight>
<font-size> <line-height> <font-family>
|
Initial: |
not defined for shorthand properties |
Inherited: |
yes |
The 'font' property is a shorthand property for setting
'font-style'
'font-variant'
'font-weight'
'font-size',
'line-height' and
'font-family' at the same place in the style sheet. The syntax of this
property is based on a traditional typographical shorthand notation to set
multiple properties related to fonts.
For a definition of allowed and initial values, see the previously defined
properties. Properties for which no values are given are set to their initial
value.
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
|
In the second rule, the font size percentage value ('80%') refers to the font
size of the parent element. In the third rule, the line height percentage refers
to the font size of the element itself.
In the first three rules above, the 'font-style', 'font-variant' and
'font-weight' are not explicitly mentioned, which means they are all three set
to their initial value ('normal'). The fourth rule sets the 'font-weight' to
'bold', the 'font-style' to 'italic' and implicitly sets 'font-variant' to
'normal'.
The fifth rule sets the 'font-variant' ('small-caps'), the 'font-size' (120%
of the parent's font), the 'line-height' (120% times the font size) and the
'font-family' ('fantasy'). It follows that the keyword 'normal' applies to the
two remaining properties: 'font-style' and 'font-weight'.
Property: |
font-family |
Values: |
<family-name>, <generic-family> |
Initial: |
UA specific |
Inherited: |
yes |
The value is a prioritized list of font family names and/or generic family
names. Unlike most other CSS1 properties, values are separated by a comma to
indicate that they are alternatives:
BODY { font-family: gill, helvetica, sans-serif }
There are two types of list values:
- <family-name>
- The name of a font family of choice. In the last example, "gill" and "helvetica"
are font families.
- <generic-family>
- In the example above, the last value is a generic family name. The
following generic families are defined:
- 'serif' (e.g. Times)
- 'sans-serif' (e.g. Helvetica)
- 'cursive' (e.g. Zapf-Chancery)
- 'fantasy' (e.g. Western)
- 'monospace' (e.g. Courier)
Style sheet designers are encouraged to offer a generic font family as a
last alternative.
Font names containing whitespace should be quoted:
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">
If quoting is omitted, any whitespace characters before and after the font
name are ignored and any sequence of whitespace characters inside the font name
is converted to a single space.
Property: |
font-size |
Values: |
<absolute-size>, <relative-size>, <length>,
<percentage> |
Initial: |
medium |
Inherited: |
yes |
- <absolute-size>
- An <absolute-size> keyword is an index to a table of font sizes computed
and kept by the UA. Possible values are: [ xx-small | x-small | small |
medium | large | x-large | xx-large ]. On a computer screen a scaling factor
of 1.5 is suggested between adjacent indexes; if the 'medium' font is 10pt,
the 'large' font could be 15pt. Different media may need different scaling
factors. Also, the UA should take the quality and availability of fonts into
account when computing the table. The table may be different from one font
family to another.
- <relative-size>
- A <relative-size> keyword is interpreted relative to the table of font
sizes and the font size of the parent element. Possible values are: [ larger
| smaller ]. For example, if the parent element has a font size of 'medium',
a value of 'larger' will make the font size of the current element be
'large'. If the parent element's size is not close to a table entry, the UA
is free to interpolate between table entries or round off to the closest
one. The UA may have to extrapolate table values if the numerical value goes
beyond the keywords.
Length and percentage values should not take the font size table into account
when calculating the font size of the element.
Negative values are not allowed.
On all other properties, 'em' and 'ex' length values refer to the font size
of the current element. On the 'font-size' property, these length units refer to
the font size of the parent element.
Note that an application may reinterpret an explicit size, depending on the
context. E.g., inside a VR scene a font may get a different size because of
perspective distortion.
Examples:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
|
If the suggested scaling factor of 1.5 is used, the last three declarations
are identical.
Property: |
font-style |
Values: |
normal, italic, oblique |
Initial: |
normal |
Inherited: |
yes |
The 'font-style' property selects between normal (sometimes referred to as
"roman" or "upright"), italic and oblique faces within a font family.
A value of 'normal' selects a font that is classified as 'normal' in the UA's
font database, while 'oblique' selects a font that is labeled 'oblique'. A value
of 'italic' selects a font that is labeled 'italic', or, if that is not
available, one labeled 'oblique'.
The font that is labeled 'oblique' in the UA's font database may actually
have been generated by electronically slanting a normal font.
Fonts with Oblique, Slanted or Incline in their names will typically be
labeled 'oblique' in the UA's font database. Fonts with Italic, Cursive
or Kursiv in their names will typically be labeled 'italic'.
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
In the example above, emphasized text within 'H1' will appear in a normal
face.
|
