Desktop email clients | Result |
Apple Mail | Font renders |
Entourage 2008 | Fallback font displayed |
Lotus Notes 6, 7 and 8.5 | Fallback font displayed |
Outlook 2007 | Fallback font displayed |
Outlook 2003 | Fallback font displayed |
Thunderbird | Fallback font displayed |
Windows Mail | Fallback font displayed |
Web-based email clients | Result |
AOL Web | Fallback font displayed |
Gmail | Fallback font displayed |
Hotmail | Fallback font displayed |
MobileMe | Fallback font displayed |
MySpace | Fallback font displayed |
Mobile email clients | Result |
iPhone | Font renders |
100
400
100
200
400
100
300
400
100
400
700
100
500
700
100
600
900
400
700
900
400
800
900
700
900
900
700
The table above is equivalent to selecting the next relative bolder or lighter face, given a font family containing normal and bold faces along with a thin and a heavy face. Authors who desire finer control over the exact weight values used for a given element should use numerical values instead of relative weights.
There is no guarantee that there will be a darker face for each of the 'font-weight' values; for example, some fonts may have only a normal and a bold face, while others may have eight face weights. There is no guarantee on how a UA will map font faces within a family to weight values. The only guarantee is that a face of a given value will be no less dark than the faces of lighter values.
Note: A set of nested elements that mix 'bolder' and 'lighter' will give unpredictable results depending on the UA, OS, and font availability. This behavior will be more precisely defined in CSS3.
CSS 2.1 does not specify how the computed value of font-weight is represented internally or externally.
15.7
Font sizethe 'font-size' property
- 'font-size'
Value: <absolute-size> | <relative-size> | <length> | <percentage> | inherit Initial: medium Applies to: all elements Inherited: yes Percentages: refer to inherited font size Media: visual Computed value: absolute length
The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares. Values have the following meanings:
- <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 ]The following table provides user agent guidelines for the absolute-size mapping to HTML heading and absolute font-sizes. The 'medium' value is the user's preferred font size and is used as the reference middle value.CSS absolute-size values xx-small x-small small medium large x-large xx-large HTML font sizes 1 2 3 4 5 6 7 Implementors should build a table of scaling factors for absolute-size keywords relative to the 'medium' font size and the particular device and its characteristics (e.g., the resolution of the device).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.Note 1. To preserve readability, a UA applying these guidelines should nevertheless avoid creating font-size resulting in less than 9 pixels per EM unit on a computer display.Note 2. In CSS1, the suggested scaling factor between adjacent indexes was 1.5, which user experience proved to be too large. In CSS2, the suggested scaling factor for a computer screen between adjacent indexes was 1.2, which still created issues for the small sizes. Implementation experience has demonstrated that a fixed ratio between adjacent absolute-size keywords is problematic, and this specification does not recommend such a fixed ratio. - <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 computed font size of the current element. On the 'font-size' property, these length units refer to the computed 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: 16px; } @media print { p { font-size: 12pt; } } blockquote { font-size: larger } em { font-size: 150% } em { font-size: 1.5em }
15.8
'font' property- 'font'
Value: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit Initial: see individual properties Applies to: all elements Inherited: yes Percentages: see individual properties Media: visual Computed value: see individual properties
The 'font' property is, except as described below, 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.
All font-related properties are first reset to their initial values, including those listed in the preceding paragraph. Then, those properties that are given explicit values in the 'font' shorthand are set to those values. For a definition of allowed and initial values, see the previously defined properties.
p { font: 12px/14px 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'.
The following values refer to system fonts:
- caption
- The font used for captioned controls (e.g., buttons, drop-downs, etc.).
- icon
- The font used to label icons.
- menu
- The font used in menus (e.g., dropdown menus and menu lists).
- message-box
- The font used in dialog boxes.
- small-caption
- The font used for labeling small controls.
- status-bar
- The font used in window status bars.
This document was successfully checked as HTML5!
Everything 'Inline CSS' AND 'Posterous ' OR Email
You EVER wanted to know about 'Why It WON'T Work'
...but wereTOOConfused to Ask!
This document was successfully checked as HTML5!
We recently did a round of testing with the help of the Typekit team to see if there was a viable way to get @font-face working in popular email clients. Given the rate of image blocking in email, @font-face support would be an awesome technique to style the text in your email without the need for images.
Imagine sending an email like the one above that rendered like this in popular email clients even with images disabled.
How we tested
For testing purposes, we tried the following @font-face techniques:
- Traditional method of declaring the @font-face and the element to use that font family in
<style>
in the <head>
<style>
in the <head>
and then called it inline using style="font-family:..."
<style>
in the <head>
and <body>
using encoded data URIs and used the 2 combinations above to tie it to an element.
Because of the syntax of @font-face, there is no way to embed a font inline using
src: url("...")
.The results
Result: |
---|
Result: |
---|
Desktop email clients | Result |
Apple Mail | Font renders |
Entourage 2008 | Fallback font displayed |
Lotus Notes 6, 7 and 8.5 | Fallback font displayed |
Outlook 2007 | Fallback font displayed |
Outlook 2003 | Fallback font displayed |
Thunderbird | Fallback font displayed |
Windows Mail | Fallback font displayed |
Web-based email clients | Result |
AOL Web | Fallback font displayed |
Gmail | Fallback font displayed |
Hotmail | Fallback font displayed |
MobileMe | Fallback font displayed |
MySpace | Fallback font displayed |
Mobile email clients | Result |
iPhone | Font renders |
We'll be keeping a sharp eye on how @font-face and other style rules shape up in the future - until then, it's better to stick to the web fonts you love and know. Of course, if you use our
email client reportsand a large percentage of your subscribers use Apple Mail and the iPhone, this might be a cool way to add some extra flair to your next email design.
via campaignmonitor.com
W3C CSS Validator results for TextArea (CSS level 2.1)
Sorry! We found the following errors (12)
URI : TextArea
2 | Value Error : font-family Property font-family doesn't exist in CSS level 2.1 but exists in : 'Candal' 'Candal' | |
3 | Value Error : font-style Property font-style doesn't exist in CSS level 2.1 but exists in : normal normal | |
4 | Value Error : font-weight Property font-weight doesn't exist in CSS level 2.1 but exists in : normal normal | |
5 | Property src doesn't exist : local('Candal'),url('http://themes.googleusercontent.com/font?kit=9lf13JfVkaPvqypoC0K2XQ') format('truetype') local('Candal'),url('http://themes.googleusercontent.com/font?kit=9lf13JfVkaPvqypoC0K2XQ') format('truetype') | |
2 | Value Error : font-family Property font-family doesn't exist in CSS level 2.1 but exists in : 'Candal' 'Candal' | |
3 | Value Error : font-style Property font-style doesn't exist in CSS level 2.1 but exists in : normal normal | |
4 | Value Error : font-weight Property font-weight doesn't exist in CSS level 2.1 but exists in : normal normal | |
5 | Property src doesn't exist : local('Candal'),url('http://themes.googleusercontent.com/font?kit=9lf13JfVkaPvqypoC0K2XQ') format('truetype') local('Candal'),url('http://themes.googleusercontent.com/font?kit=9lf13JfVkaPvqypoC0K2XQ') format('truetype') | |
2 | Value Error : font-family Property font-family doesn't exist in CSS level 2.1 but exists in : 'Candal' 'Candal' | |
3 | Value Error : font-style Property font-style doesn't exist in CSS level 2.1 but exists in : normal normal | |
4 | Value Error : font-weight Property font-weight doesn't exist in CSS level 2.1 but exists in : normal normal | |
5 | Property src doesn't exist : local('Candal'),url('http://themes.googleusercontent.com/font?kit=9lf13JfVkaPvqypoC0K2XQ') format('truetype') local('Candal'),url('http://themes.googleusercontent.com/font?kit=9lf13JfVkaPvqypoC0K2XQ') format('truetype') |
Warnings (4)
URI : TextArea
8 | No declarations in the rule |
URI : TextArea
6 | No declarations in the rule | |
6 | No declarations in the rule | |
6 | No declarations in the rule |
Valid CSS information
@font-face { }
@font-face {
{ }
}
body {
font-family : 'Candal', serif;
}
@font-face {
{ }
}
@font-face {
{ }
}<!-- @font-face { } body { font-family : 'Candal', serif; } -->
<!-- .c4 {font-family: 'Candal', serif; font-size: 17px; font-style: normal; font-weight: 400; text-decoration: none; text-transform: none; letter-spacing: 0; word-spacing: 0; line-height: 1.2;} div.c3 {font-family: 'Candal', serif; font-size: 17px; font-style: normal; font-weight: 400; text-decoration: none; text-transform: none; letter-spacing: 0; word-spacing: 0; line-height: 1.2;} .c2 {font-family : 'Candal', serif;font-family : 'Candal', serif; font-size : 17px; font-style : normal; font-weight : 400; text-decoration : none; text-transform : none; letter-spacing : 0; word-spacing : 0; line-height : 1.2;} div.c1 {font-family : 'Candal', serif; font-size : 17px; font-style : normal; font-weight : 400; text-decoration : none; text-transform : none; letter-spacing : 0; word-spacing : 0; line-height : 1.2;} -->
15 Fonts
Setting font properties will be among the most common uses of style sheets. Unfortunately, there exists no well-defined and universally accepted taxonomy for classifying fonts, and terms that apply to one font family may not be appropriate for others. E.g., 'italic' is commonly used to label slanted text, but slanted text may also be labeled as being Oblique, Slanted, Incline, Cursive or Kursiv. Therefore it is not a simple problem to map typical font selection properties to a specific font.
15.2 Font matching algorithm
Because there is no accepted, universal taxonomy of font properties, matching of properties to font faces must be done carefully. The properties are matched in a well-defined order to insure that the results of this matching process are as consistent as possible across UAs (assuming that the same library of font faces is presented to each of them).- The User Agent makes (or accesses) a database of relevant CSS 2.1 properties of all the fonts of which the UA is aware. If there are two fonts with exactly the same properties, the user agent selects one of them.
- At a given element and for each character in that element, the UA assembles the font properties applicable to that element. Using the complete set of properties, the UA uses the 'font-family' property to choose a tentative font family. The remaining properties are tested against the family according to the matching criteria described with each property. If there are matches for all the remaining properties, then that is the matching font face for the given element or character.
- If there is no matching font face within the 'font-family' being processed by step 2, and if there is a next alternative 'font-family' in the font set, then repeat step 2 with the next alternative 'font-family'.
- If there is a matching font face, but it does not contain a glyph for the current character, and if there is a next alternative 'font-family' in the font sets, then repeat step 2 with the next alternative 'font-family'.
- If there is no font within the family selected in 2, then use a UA-dependent default 'font-family' and repeat step 2, using the best match that can be obtained within the default font. If a particular character cannot be displayed using this font, then the UA may use other means to determine a suitable font for that character. The UA should map each character for which it has no suitable font to a visible symbol chosen by the UA, preferably a "missing character" glyph from one of the font faces available to the UA.
The per-property matching rules from (2) above are as follows:
- 'font-style' is tried first. 'italic' will be satisfied if there is either a face in the UA's font database labeled with the CSS keyword 'italic' (preferred) or 'oblique'. Otherwise the values must be matched exactly or font-style will fail.
- 'font-variant' is tried next. 'small-caps' matches (1) a font labeled as 'small-caps', (2) a font in which the small caps are synthesized, or (3) a font where all lowercase letters are replaced by upper case letters. A small-caps font may be synthesized by electronically scaling uppercase letters from a normal font. 'normal' matches a font's normal (non-small-caps) variant. A font cannot fail to have a normal variant. A font that is only available as small-caps shall be selectable as either a 'normal' face or a 'small-caps' face.
- 'font-weight' is matched next, it will never fail. (See 'font-weight' below.)
- 'font-size' must be matched within a UA-dependent margin of tolerance. (Typically, sizes for scalable fonts are rounded to the nearest whole pixel, while the tolerance for bitmapped fonts could be as large as 20%.) Further computations, e.g., by 'em' values in other properties, are based on the computed value of 'font-size'.
15.3 Font family: the 'font-family' property
- 'font-family'
Value: [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit Initial: depends on user agent Applies to: all elements Inherited: yes Percentages: N/A Media: visual Computed value: as specified
body { font-family: Gill, Helvetica, sans-serif }Although many fonts provide the "missing character" glyph, typically an open box, as its name implies this should not be considered a match for characters that cannot be found in the font. (It should, however, be considered a match for U FFFD, the "missing character" character's code point). There are two types of font family names:
- <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)
For example, the following declarations are invalid:
font-family: Red/Black, sans-serif; font-family: "Lucida" Grande, sans-serif; font-family: Ahem!, sans-serif; font-family: test@foo, sans-serif; font-family: #POUND, sans-serif; font-family: Hawaii 5-0, sans-serif;If a sequence of identifiers is given as a font family name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces.
To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens:
body { font-family: "New Century Schoolbook", serif } <BODY STYLE="font-family: '21st Century', fantasy">Font family names that happen to be the same as a keyword value ('inherit', 'serif', 'sans-serif', 'monospace', 'fantasy', and 'cursive') must be quoted to prevent confusion with the keywords with the same names. The keywords 'initial' and 'default' are reserved for future use and must also be quoted when used as font names. UAs must not consider these keywords as matching the '<family-name>' type.
15.3.1 Generic font families
Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in the worst case when none of the specified fonts can be selected. For optimum typographic control, particular named fonts should be used in style sheets.All five generic font families are defined to exist in all CSS implementations (they need not necessarily map to five distinct actual fonts). User agents should provide reasonable default choices for the generic font families, which express the characteristics of each family as well as possible within the limits allowed by the underlying technology.
User agents are encouraged to allow users to select alternative choices for the generic fonts.
15.3.1.1 serif
Glyphs of serif fonts, as the term is used in CSS, tend to have finishing strokes, flared or tapering ends, or have actual serifed endings (including slab serifs). Serif fonts are typically proportionately-spaced. They often display a greater variation between thick and thin strokes than fonts from the 'sans-serif' generic font family. CSS uses the term 'serif' to apply to a font for any script, although other names may be more familiar for particular scripts, such as Mincho (Japanese), Sung or Song (Chinese), Totum or Kodig (Korean). Any font that is so described may be used to represent the generic 'serif' family.Examples of fonts that fit this description include:
Latin fonts | Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit |
Greek fonts | Bitstream Cyberbit |
Cyrillic fonts | Adobe Minion Cyrillic, Excelsior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinist |
Hebrew fonts | New Peninim, Raanana, Bitstream Cyberbit |
Japanese fonts | Ryumin Light-KL, Kyokasho ICA, Futo Min A101 |
Arabic fonts | Bitstream Cyberbit |
Cherokee fonts | Lo Cicero Cherokee |
15.3.1.2 sans-serif
Glyphs in sans-serif fonts, as the term is used in CSS, tend to have stroke endings that are plain -- with little or no flaring, cross stroke, or other ornamentation. Sans-serif fonts are typically proportionately-spaced. They often have little variation between thick and thin strokes, compared to fonts from the 'serif' family. CSS uses the term 'sans-serif' to apply to a font for any script, although other names may be more familiar for particular scripts, such as Gothic (Japanese), Kai (Chinese), or Pathang (Korean). Any font that is so described may be used to represent the generic 'sans-serif' family.Examples of fonts that fit this description include:
Latin fonts | MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica |
Greek fonts | Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek |
Cyrillic fonts | Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion |
Hebrew fonts | Arial Hebrew, MS Tahoma |
Japanese fonts | Shin Go, Heisei Kaku Gothic W5 |
Arabic fonts | MS Tahoma |
15.3.1.3 cursive
Glyphs in cursive fonts, as the term is used in CSS, generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork. Fonts for some scripts, such as Arabic, are almost always cursive. CSS uses the term 'cursive' to apply to a font for any script, although other names such as Chancery, Brush, Swing and Script are also used in font names.Examples of fonts that fit this description include:
Latin fonts | Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery |
Cyrillic fonts | ER Architekt |
Hebrew fonts | Corsiva |
Arabic fonts | DecoType Naskh, Monotype Urdu 507 |
15.3.1.4 fantasy
Fantasy fonts, as used in CSS, are primarily decorative while still containing representations of characters (as opposed to Pi or Picture fonts, which do not represent characters). Examples include:Latin fonts | Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz |
15.3.1.5 monospace
The sole criterion of a monospace font is that all glyphs have the same fixed width. (This can make some scripts, such as Arabic, look most peculiar.) The effect is similar to a manual typewriter, and is often used to set samples of computer code.Examples of fonts which fit this description include:
Latin fonts | Courier, MS Courier New, Prestige, Everson Mono |
Greek Fonts | MS Courier New, Everson Mono |
Cyrillic fonts | ER Kurier, Everson Mono |
Japanese fonts | Osaka Monospaced |
Cherokee fonts | Everson Mono |
15.4 Font styling: the 'font-style' property
- 'font-style'
Value: normal | italic | oblique | inherit Initial: normal Applies to: all elements Inherited: yes Percentages: N/A Media: visual Computed value: as specified
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.
15.5 Small-caps: the 'font-variant' property
- 'font-variant'
Value: normal | small-caps | inherit Initial: normal Applies to: all elements Inherited: yes Percentages: N/A Media: visual Computed value: as specified
A value of 'normal' selects a font that is not a small-caps font, 'small-caps' selects a small-caps font. It is acceptable (but not required) in CSS 2.1 if the small-caps font is a created by taking a normal font and replacing the lower case letters by scaled uppercase characters. As a last resort, uppercase letters will be used as replacement for a small-caps font.
The following example results in an 'H3' element in small-caps, with any emphasized words in oblique, and any emphasized words within an 'H3' oblique small-caps:
h3 { font-variant: small-caps } em { font-style: oblique }There may be other variants in the font family as well, such as fonts with old-style numerals, small-caps numerals, condensed or expanded letters, etc. CSS 2.1 has no properties that select those.
Note: insofar as this property causes text to be transformed to uppercase, the same considerations as for 'text-transform' apply.
15.6 Font boldness: the 'font-weight' property
- 'font-weight'
Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit Initial: normal Applies to: all elements Inherited: yes Percentages: N/A Media: visual Computed value: see text
p { font-weight: normal } /* 400 */ h1 { font-weight: 700 } /* bold */The 'bolder' and 'lighter' values select font weights that are relative to the weight inherited from the parent:
strong { font-weight: bolder }Fonts (the font data) typically have one or more properties whose values are names that are descriptive of the "weight" of a font. There is no accepted, universal meaning to these weight names. Their primary role is to distinguish faces of differing darkness within a single font family. Usage across font families is quite variant; for example, a font that one might think of as being bold might be described as being Regular, Roman, Book, Medium, Semi- or DemiBold, Bold, or Black, depending on how black the "normal" face of the font is within the design. Because there is no standard usage of names, the weight property values in CSS 2.1 are given on a numerical scale in which the value '400' (or 'normal') corresponds to the "normal" text face for that family. The weight name associated with that face will typically be Book, Regular, Roman, Normal or sometimes Medium.
The association of other weights within a family to the numerical weight values is intended only to preserve the ordering of darkness within that family. However, the following heuristics tell how the assignment is done in this case:
- If the font family already uses a numerical scale with nine values (like e.g., OpenType does), the font weights should be mapped directly.
- If there is both a face labeled Medium and one labeled Book, Regular, Roman or Normal, then the Medium is normally assigned to the '500'.
- The font labeled "Bold" will often correspond to the weight value '700'.
- If the desired weight is less than 400, weights below the desired weight are checked in descending order followed by weights above the desired weight in ascending order until a match is found.
- If the desired weight is greater than 500, weights above desired weight are checked in ascending order followed by weights below the desired weight in descending order until a match is found.
- If the desired weight is 400, 500 is checked first and then the rule for desired weights less than 400 is used.
- If the desired weight is 500, 400 is checked first and then the rule for desired weights less than 400 is used.
Assume four weights in the "Rattlesnake" family, from lightest to darkest: Regular, Medium, Bold, Heavy.
Available faces | Assignments | Filling the holes |
---|---|---|
"Rattlesnake Regular" | 400 | 100, 200, 300 |
"Rattlesnake Medium" | 500 | |
"Rattlesnake Bold" | 700 | 600 |
"Rattlesnake Heavy" | 800 | 900 |
Assume six weights in the "Ice Prawn" family: Book, Medium, Bold, Heavy, Black, ExtraBlack. Note that in this instance the user agent has decided not to assign a numeric value to "Ice Prawn ExtraBlack".
Values of 'bolder' and 'lighter' indicate values relative to the weight of the parent element. Based on the inherited weight value, the weight used is calculated using the chart below. Child elements inherit the calculated weight, not a value of 'bolder' or 'lighter'.Available faces | Assignments | Filling the holes |
---|---|---|
"Ice Prawn Book" | 400 | 100, 200, 300 |
"Ice Prawn Medium" | 500 | |
"Ice Prawn Bold" | 700 | 600 |
"Ice Prawn Heavy" | 800 | |
"Ice Prawn Black" | 900 | |
"Ice Prawn ExtraBlack" | (none) |
Inherited value | bolder | lighter |
---|---|---|
100 | 400 | 100 |
200 | 400 | 100 |
300 | 400 | 100 |
400 | 700 | 100 |
500 | 700 | 100 |
600 | 900 | 400 |
700 | 900 | 400 |
800 | 900 | 700 |
900 | 900 | 700 |
There is no guarantee that there will be a darker face for each of the 'font-weight' values; for example, some fonts may have only a normal and a bold face, while others may have eight face weights. There is no guarantee on how a UA will map font faces within a family to weight values. The only guarantee is that a face of a given value will be no less dark than the faces of lighter values.
Note: A set of nested elements that mix 'bolder' and 'lighter' will give unpredictable results depending on the UA, OS, and font availability. This behavior will be more precisely defined in CSS3.
CSS 2.1 does not specify how the computed value of font-weight is represented internally or externally.
CSS 2.1 does not specify how the computed value of font-weight is represented internally or externally.
15.7
Font sizethe 'font-size' property
- 'font-size'
Value: <absolute-size> | <relative-size> | <length> | <percentage> | inherit Initial: medium Applies to: all elements Inherited: yes Percentages: refer to inherited font size Media: visual Computed value: absolute length
- <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 ]
The following table provides user agent guidelines for the absolute-size mapping to HTML heading and absolute font-sizes. The 'medium' value is the user's preferred font size and is used as the reference middle value.
CSS absolute-size values xx-small x-small small medium large x-large xx-large HTML font sizes 1 2 3 4 5 6 7 - <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.
Negative values are not allowed.
On all other properties, 'em' and 'ex' length values refer to the computed font size of the current element. On the 'font-size' property, these length units refer to the computed 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: 16px; } @media print { p { font-size: 12pt; } } blockquote { font-size: larger } em { font-size: 150% } em { font-size: 1.5em }
15.8
Shorthand font property: the 'font' property- 'font'
Value: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit Initial: see individual properties Applies to: all elements Inherited: yes Percentages: see individual properties Media: visual Computed value: see individual properties
All font-related properties are first reset to their initial values, including those listed in the preceding paragraph. Then, those properties that are given explicit values in the 'font' shorthand are set to those values. For a definition of allowed and initial values, see the previously defined properties.
p { font: 12px/14px 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'.
The following values refer to system fonts:
- caption
- The font used for captioned controls (e.g., buttons, drop-downs, etc.).
- icon
- The font used to label icons.
- menu
- The font used in menus (e.g., dropdown menus and menu lists).
- message-box
- The font used in dialog boxes.
- small-caption
- The font used for labeling small controls.
- status-bar
- The font used in window status bars.
This document was successfully checked as HTML5!
Take me off this list now, Please!