-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathfonts.html
More file actions
780 lines (698 loc) · 36.2 KB
/
fonts.html
File metadata and controls
780 lines (698 loc) · 36.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
8000
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Fonts</title>
<link rel="stylesheet" href="style/default.css" type="text/css">
<link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" type="text/css">
<link rel="prev" href="colors.html">
<link rel="next" href="text.html">
<link rel="contents" href="cover.html#minitoc">
<link rel="CSS-properties" href="propidx.html" title="properties">
<link rel="index" href="indexlist.html" title="index">
<link rel="first" href="cover.html">
<meta name="editor" lang="tr" content="Tantek Çelik">
<style type="text/css">
#AutoNumber2 td { text-align:center }
</style>
<style type="text/css">
.current,.proposed,span.delcurrent { background:#feb }
ins.proposed,span.insproposed { background:#bfb }
del.proposed,span.delproposed { background:#fbb }
span.insproposed { text-decoration:underline }
span.delproposed,span.delcurrent { text-decoration:line-through }
body>del,body>ins {display:block}
</style>
</head>
<body>
<div class="navbar">
<p><a href="colors.html">previous</a>
<a href="text.html">next</a>
<a href="cover.html#minitoc">contents</a>
<a href="propidx.html">properties</a>
<a href="indexlist.html">index</a>
</div>
<hr class="navbar">
<h1><a name="q0">15 Fonts</a></h1>
<div class="subtoc">
<p><strong>Contents</strong>
<ul class="toc">
<li class="tocline2"><a href="fonts.html#q1" class="tocxref">15.1 Introduction</a>
<li class="tocline2"><a href="fonts.html#algorithm" class="tocxref">15.2 Font matching algorithm</a>
<li class="tocline2"><a href="fonts.html#font-family-prop" class="tocxref">15.3 Font family: the <span class="propinst-font-family">'font-family'</span> property</a>
<li class="tocline2"><a href="fonts.html#font-styling" class="tocxref">15.4 Font styling: the <span class="propinst-font-style">'font-style'</span> property</a>
<li class="tocline2"><a href="fonts.html#small-caps" class="tocxref">15.5 Small-caps: the <span class="propinst-font-variant">'font-variant'</span> property</a>
<li class="tocline2"><a href="fonts.html#font-boldness" class="tocxref">15.6 Font boldness: the <span class="propinst-font-weight">'font-weight'</span> property</a>
<li class="tocline2"><a href="fonts.html#font-size-props" class="tocxref">15.7 Font size: the <span class="propinst-font-size">'font-size'</span> property</a>
<li class="tocline2"><a href="fonts.html#font-shorthand" class="tocxref">15.8 Shorthand font property: the <span class="propinst-font">'font'</span> property</a>
</ul>
</div>
<h2><a name="q1">15.1 Introduction</a></h2>
<p>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 <em>Oblique, Slanted, Incline, Cursive</em> or
<em>Kursiv</em>. Therefore it is not a simple problem to map typical
font selection properties to a specific font.
</p>
<h2>15.2 <a name="algorithm">Font matching algorithm</a></h2>
<p>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).
</p>
<ol>
<li>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.
</li>
<li>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.
</li>
<li>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'.
</li>
<li>If there is a matching font face, but it doesn't 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'.
</li>
<li>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 has no 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.
</li>
</ol>
<p>(The above algorithm can be optimized to avoid having to revisit
the CSS 2.1 properties for each character.)
</p>
<p>The per-property matching rules from (2) above are as follows:
</p>
<ol>
<li><a href="fonts.html#propdef-font-style" class="noxref"><span class="propinst-font-style">'font-style'</span></a> 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.
</li>
<li><a href="fonts.html#propdef-font-variant" class="noxref"><span class="propinst-font-variant">'font-variant'</span></a> 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.
</li>
<li><a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight">'font-weight'</span></a> is matched next, it will
never fail. (See 'font-weight' below.)
</li>
<li><a href="fonts.html#propdef-font-size" class="noxref"><span class="propinst-font-size">'font-size'</span></a> 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'.
</li>
</ol>
<h2>15.3 <a name="font-family-prop">Font family</a>: the <a href="fonts.html#propdef-font-family" class="noxref"><span
class="propinst-font-family">'font-family'</span></a> property</h2>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-family'"><a name="propdef-font-family" class="propdef-title"><strong>'font-family'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em> <td>[[ <a href="fonts.html#value-def-family-name" class="noxref"><span class="value-inst-family-name"><family-name></span></a> | <a href="fonts.html#value-def-generic-family" class="noxref"><span class="value-inst-generic-family"><generic-family></span></a> ] [, <a href="fonts.html#value-def-family-name" class="noxref"><span class="value-inst-family-name"><family-name></span></a>| <a href="fonts.html#value-def-generic-family" class="noxref"><span class="value-inst-generic-family"><generic-family></span></a>]* ] | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em> <td>depends on user agent
<tr valign=baseline><td><em>Applies to:</em> <td>all elements
<tr valign=baseline><td><em>Inherited:</em> <td>yes
<tr valign=baseline><td><em>Percentages:</em> <td>N/A
<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a>
<tr valign=baseline><td><em>Computed value:</em> <td>as specified
</table>
</dl>
</div>
<p>The value is a prioritized list of font family names and/or generic
family names. Unlike most other CSS properties, values are separated
by a comma to indicate that they are alternatives:
</p>
<pre>
body { font-family: Gill, Helvetica, sans-serif }
</pre>
<p>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).
</p>
<p>There are two types of font family names:
</p>
<dl>
<dt><a name="value-def-family-name"><family-name></a>
</dt>
<dd>The name of a font family of choice. In the last example, "Gill"
and "Helvetica" are font families.
</dd>
<dt><a name="value-def-generic-family"><generic-family></a>
</dt>
<dd>In the example above, the last value is a generic family name. The
following generic families are defined:
<ul>
<li>'serif' (e.g. Times)</li>
<li>'sans-serif' (e.g. Helvetica)</li>
<li>'cursive' (e.g. Zapf-Chancery)</li>
<li>'fantasy' (e.g. Western)</li>
<li>'monospace' (e.g. Courier)</li>
</ul>
<p>Style sheet designers are encouraged to offer a generic font family
as a last alternative. Generic font family names are keywords and must NOT be quoted.
</p>
</dd>
</dl>
<p>If an unquoted font family name contains
parentheses, brackets, and/or braces, they must still be
escaped per CSS grammar rules. Similarly, quotation marks (both single and double), semicolons,
exclamation marks, commas, and leading slashes within unquoted font family names must be escaped.
Font names containing any such characters or whitespace should be quoted:
</p>
<pre>
body { font-family: "New Century Schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">
</pre>
<p>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.
Font family <em>names</em> that happen to be the same as a keyword value (e.g. 'initial', 'inherit', 'default', 'serif', 'sans-serif', 'monospace', 'fantasy', and 'cursive') must be quoted to prevent confusion with the keywords with the same names. UAs must not consider these keywords as matching the '<family-name>' type.
</p>
<h2>15.4 <a name="font-styling">Font styling</a>: the
<a href="fonts.html#propdef-font-style" class="noxref"><span class="propinst-font-style">'font-style'</span></a> property</h2>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-style'"><a name="propdef-font-style" class="propdef-title"><strong>'font-style'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em> <td>normal | italic | oblique | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em> <td>normal
<tr valign=baseline><td><em>Applies to:</em> <td>all elements
<tr valign=baseline><td><em>Inherited:</em> <td>yes
<tr valign=baseline><td><em>Percentages:</em> <td>N/A
<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a>
<tr valign=baseline><td><em>Computed value:</em> <td>as specified
</table>
</dl>
</div>
<p>The 'font-style' property selects between normal (sometimes
referred to as "roman" or "upright"), italic and oblique faces within
a font family.
</p>
<p>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'.
</p>
<p>The font that is labeled 'oblique' in the UA's font database may
actually have been generated by electronically slanting a normal font.
</p>
<p>Fonts with Oblique, Slanted or Incline in their names will
typically be labeled 'oblique' in the UA's font database. Fonts with
<em>Italic, Cursive</em> or <em>Kursiv</em> in their names will
typically be labeled 'italic'.
</p>
<pre>
h1, h2, h3 { font-style: italic }
h1 em { font-style: normal }
</pre>
<p>In the example above, emphasized text within 'H1' will appear in a
normal face.
</p>
<h2>15.5 <a name="small-caps">Small-caps</a>: the
<a href="fonts.html#propdef-font-variant" class="noxref"><span class="propinst-font-variant">'font-variant'</span></a> property</h2>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-variant'"><a name="propdef-font-variant" class="propdef-title"><strong>'font-variant'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em> <td>normal | small-caps | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em> <td>normal
<tr valign=baseline><td><em>Applies to:</em> <td>all elements
<tr valign=baseline><td><em>Inherited:</em> <td>yes
<tr valign=baseline><td><em>Percentages:</em> <td>N/A
<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a>
<tr valign=baseline><td><em>Computed value:</em> <td>as specified
</table>
</dl>
</div>
<p>Another type of variation within a font family is the small-caps.
In a small-caps font the lower case letters look similar to the
uppercase ones, but in a smaller size and with slightly different
proportions. The 'font-variant' property selects that font.
</p>
<p>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.
</p>
<p>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:
</p>
<pre>
h3 { font-variant: small-caps }
em { font-style: oblique }
</pre>
<p>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.
</p>
<p><em>Note:</em> insofar as this property causes text to be
transformed to uppercase, the same considerations as for <a href="text.html#propdef-text-transform" class="noxref"><span
class="propinst-text-transform">'text-transform'</span></a> apply.
</p>
<h2>15.6 <a name="font-boldness">Font boldness</a>: the
<a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight">'font-weight'</span></a> property</h2>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-weight'"><a name="propdef-font-weight" class="propdef-title"><strong>'font-weight'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em> <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 |
600 | 700 | 800 | 900 | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em> <td>normal
<tr valign=baseline><td><em>Applies to:</em> <td>all elements
<tr valign=baseline><td><em>Inherited:</em> <td>yes
<tr valign=baseline><td><em>Percentages:</em> <td>N/A
<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a>
<tr valign=baseline><td><em>Computed value:</em> <td>see text
</table>
</dl>
</div>
<p>The 'font-weight' property selects the weight of the font. The
values '100' to '900' form an ordered sequence, where each number
indicates a weight that is at least as dark as its predecessor. The
keyword 'normal' is synonymous with '400', and 'bold' is synonymous
with '700'. Keywords other than 'normal' and 'bold' have been shown to
be often confused with font names and a numerical scale was therefore
chosen for the 9-value list.
</p>
<pre>
p { font-weight: normal } /* 400 */
h1 { font-weight: 700 } /* bold */
</pre>
<p>The 'bolder' and 'lighter' values select font weights that are
relative to the weight inherited from the parent:
</p>
<pre>
strong { font-weight: bolder }
</pre>
<p>Child elements inherit the resultant weight, not the keyword value.
</p>
<p>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 <em>Regular, Roman, Book, Medium, Semi-</em> or <em>DemiBold,
Bold,</em> or <em>Black,</em> 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 <em>Book, Regular, Roman, Normal</em> or
sometimes <em>Medium</em>.
</p>
<p>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 typical cases:
</p>
<ul>
<li>If the font family already uses a numerical scale with nine values
(like e.g. <em>OpenType</em> does), the font weights should be mapped
directly.
</li>
<li>If there is both a face labeled <em>Medium</em> and one labeled
<em>Book, Regular, Roman</em> or <em>Normal,</em> then the
<em>Medium</em> is normally assigned to the '500'.
</li>
<li>The font labeled "Bold" will often correspond to the weight value '700'.
</li>
<li>If there are fewer then 9 weights in the family, the default
algorithm for filling the "holes" is as follows. If '500' is
unassigned, it will be assigned the same font as '400'. If any of the
values '600', '700', '800' or '900' remains unassigned, they are
assigned to the same face as the next darker assigned keyword, if any,
or the next lighter one otherwise. If any of '300', '200' or '100'
remains unassigned, it is assigned to the next lighter assigned
keyword, if any, or the next darker otherwise.
</li>
</ul>
<p>The following two examples show typical mappings.</p>
<div class="html-example">
<p>Assume four weights in the "Rattlesnake" family, from lightest to
darkest: <em>Regular, Medium, Bold, Heavy.</em></p>
<table border=1 summary="Example of font-weight mapping">
<caption>First example of font-weight mapping</caption>
<thead>
<tr><th>Available faces </th><th>Assignments </th><th>Filling the holes</th></tr>
</thead>
<tr><td>"Rattlesnake Regular"</td><td> 400 </td><td> 100, 200, 300</td></tr>
<tr><td>"Rattlesnake Medium" </td><td> 500 </td><td> </td></tr>
<tr><td>"Rattlesnake Bold" </td><td> 700 </td><td> 600</td></tr>
<tr><td>"Rattlesnake Heavy" </td><td> 800 </td><td> 900</td></tr>
</table>
</div>
<div class="html-example">
<p>Assume six weights in the
"Ice Prawn" family: <em>Book, Medium, Bold, Heavy, Black,
ExtraBlack.</em> Note that in this instance the user agent
has decided <em>not</em> to assign a numeric
value to "Ice Prawn ExtraBlack".</p>
<table border=1 summary="Example of font-weight mapping. Note
that ExtraBlack is not mapped to a value.">
<caption>Second example of font-weight mapping</caption>
<thead>
<tr><th>Available faces </th><th>Assignments </th><th>Filling the holes</th></tr>
</thead>
<tr><td>"Ice Prawn Book" </td><td> 400 </td><td> 100, 200, 300</td></tr>
<tr><td>"Ice Prawn Medium"</td><td> 500 </td><td> </td></tr>
<tr><td>"Ice Prawn Bold" </td><td> 700 </td><td> 600</td></tr>
<tr><td>"Ice Prawn Heavy" </td><td> 800 </td><td> </td></tr>
<tr><td>"Ice Prawn Black" </td><td> 900 </td><td> </td></tr>
<tr><td>"Ice Prawn ExtraBlack"</td><td> (none) </td><td> </td></tr>
</table>
</div>
<p>Since the intent of the relative keywords 'bolder' and 'lighter' is
to darken or lighten the face <em>within the family</em> and because a
family may not have faces aligned with all the symbolic weight values,
the matching of 'bolder' is to the next darker face available on the
client within the family and the matching of 'lighter' is to the next
lighter face within the family. To be precise, the meaning of the
relative keywords 'bolder' and 'lighter' is as follows:
</p>
<ul>
<li>'bolder' selects the next weight that is assigned to a font that
is darker than the inherited one. If there is no such weight, it
simply results in the next darker numerical value (and the font
remains unchanged), unless the inherited value was '900' in which case
the resulting weight is also '900'.
</li>
<li>'lighter' is similar, but works in the opposite direction: it
selects the next lighter keyword with a different font from the
inherited one, unless there is no such font, in which case it selects
the next lighter numerical value (and keeps the font unchanged).
</li>
</ul>
<p>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.
</p>
<p>
The computed value of "font-weight" is either:
</p>
<ul>
<li>one of the legal number values, or </li>
<li>one of the legal number values combined with one or more of the
relative values (bolder or lighter). This type of computed values
is necessary to use when the font in question does not have all
weight variations that are needed.
</li>
</ul>
<p>
CSS 2.1 does not specify how the computed value of font-weight is
represented internally or externally.
</p>
<h2>15.7 <a name="font-size-props">Font size</a>: the <a href="fonts.html#propdef-font-size" class="noxref"><span
class="propinst-font-size">'font-size'</span></a>
property</h2>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-size'"><a name="propdef-font-size" class="propdef-title"><strong>'font-size'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em> <td><a href="fonts.html#value-def-absolute-size" class="noxref"><span class="value-inst-absolute-size"><absolute-size></span></a> | <a href="fonts.html#value-def-relative-size" class="noxref"><span class="value-inst-relative-size"><relative-size></span></a> | <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><length></span></a> | <a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><percentage></span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em> <td>medium
<tr valign=baseline><td><em>Applies to:</em> <td>all elements
<tr valign=baseline><td><em>Inherited:</em> <td>yes
<tr valign=baseline><td><em>Percentages:</em> <td>refer to parent element's font size
<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a>
<tr valign=baseline><td><em>Computed value:</em> <td>absolute length
</table>
</dl>
</div>
<p>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:</p>
<dl>
<dt><b><a name="value-def-absolute-size"><absolute-size></a></b>
</dt>
<dd>An <absolute-size> keyword is an index to a table of font
sizes computed and kept by the UA. Possible values are:
<p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p>
<p>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.</p>
<table border="1" style="border-collapse: collapse" width="73%" id="AutoNumber2">
<tr>
<th style="width:16%">CSS absolute-size values</th>
<td style="width:12%">xx-small</td>
<td style="width:9%">x-small</td>
<td style="width:10%">small</td>
<td style="width:11%">medium</td>
<td style="width:11%">large</td>
<td style="width:12%">x-large</td>
<td style="width:11%">xx-large</td>
<td style="width:8%"> </td>
</tr>
<tr>
<th>HTML headings</th>
<td>h6</td>
<td> </td>
<td>h5</td>
<td>h4</td>
<td>h3</td>
<td>h2</td>
<td>h1</td>
<td> </td>
</tr>
<tr>
<th>HTML font sizes</th>
<td>1</td>
<td> </td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
<p class="note">Note: 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, in contrast to previous specifications (<a href="http://www.w3.org/TR/REC-CSS1#font-size">CSS1 suggested 1.5</a>, and <a href="http://www.w3.org/TR/REC-CSS2/fonts.html#font-size-props">CSS2 suggested 1.2</a>).</p>
<p>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).
</p>
<p>
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.
</p>
<p class="note"><em><strong>Note 1.</strong> 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.</em></p>
<p class="note"><em><strong>Note 2.</strong> 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 computer
screen between adjacent indexes was 1.2 which still created issues for the small
sizes. The new scaling factor varies between each index to provide better
readability.</em></p>
</dd>
<dt><b><a name="value-def-relative-size"><relative-size></a></b>
</dt>
<dd>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.
</dd>
</dl>
<p>Length and percentage values should not take the font size table
into account when calculating the font size of the element.
</p>
<p>Negative values are not allowed.
</p>
<p>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.
</p>
<p>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.
</p>
<p>Examples:
</p>
<pre>
p { font-size: 16px; }
@media print {
p { font-size: 12pt; }
}
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }
</pre>
<h2>15.8 <a name="font-shorthand">Shorthand font property</a>: the <a href="fonts.html#propdef-font" class="noxref"><span class="propinst-font">'font'</span></a> property</h2>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'font'"><a name="propdef-font" class="propdef-title"><strong>'font'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em> <td>[ [ <a href="fonts.html#propdef-font-style" class="noxref"><span class="propinst-font-style"><'font-style'></span></a> || <a href="fonts.html#propdef-font-variant" class="noxref"><span class="propinst-font-variant"><'font-variant'></span></a> || <a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight"><'font-weight'></span></a> ]?
<a href="fonts.html#propdef-font-size" class="noxref"><span class="propinst-font-size"><'font-size'></span></a> [ / <a href="visudet.html#propdef-line-height" class="noxref"><span class="propinst-line-height"><'line-height'></span></a> ]? <a href="fonts.html#propdef-font-family" class="noxref"><span class="propinst-font-family"><'font-family'></span></a> ] | caption | icon | menu | message-box | small-caption | status-bar | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em> <td>see individual properties
<tr valign=baseline><td><em>Applies to:</em> <td>all elements
<tr valign=baseline><td><em>Inherited:</em> <td>yes
<tr valign=baseline><td><em>Percentages:</em> <td>see individual properties
<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a>
<tr valign=baseline><td><em>Computed value:</em> <td>see individual properties
</table>
</dl>
</div>
<p>
The <a href="fonts.html#propdef-font" class="noxref"><span class="propinst-font">'font'</span></a> property is,
except as described <a href="#almost">below</a>, a shorthand property for
setting
<a href="fonts.html#propdef-font-style" class="noxref"><span class="propinst-font-style">'font-style'</span></a>,
<a href="fonts.html#propdef-font-variant" class="noxref"><span class="propinst-font-variant">'font-variant'</span></a>,
<a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight">'font-weight'</span></a>,
<a href="fonts.html#propdef-font-size" class="noxref"><span class="propinst-font-size">'font-size'</span></a>,
<a href="visudet.html#propdef-line-height" class="noxref"><span class="propinst-line-height">'line-height'</span></a> and
<a href="fonts.html#propdef-font-family" class="noxref"><span class="propinst-font-family">'font-family'</span></a> 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.
</p>
<p>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
<a href="fonts.html#propdef-font" class="noxref"><span class="propinst-font">'font'</span></a> shorthand are set to those values.
For a definition of allowed and initial values, see the previously defined properties.
</p>
<pre>
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 }
</pre>
<p>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.
</p>
<p>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'.
</p>
<p>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'.
</p>
<p>The following values refer to <a name="x6"><span class="index-def" title="system
fonts">system fonts</span></a>:</p>
<dl>
<dt>caption</dt>
<dd>The font used for captioned controls (e.g., buttons, drop-downs, etc.).</dd>
<dt>icon</dt>
<dd>The font used to label icons.</dd>
<dt>menu</dt>
<dd>The font used in menus (e.g., dropdown menus and menu lists).</dd>
<dt>message-box</dt>
<dd>The font used in dialog boxes.</dd>
<dt>small-caption</dt>
<dd>The font used for labeling small controls.</dd>
<dt>status-bar</dt>
<dd>The font used in window status bars.</dd>
</dl>
<p>System fonts may only be set as a whole; that is, the font
family, size, weight, style, etc. are all set at the same time.
These values may then be altered individually if desired. If no
font with the indicated characteristics exists on a given platform,
the user agent should either intelligently substitute (e.g., a smaller
version of the 'caption' font might be used for the 'small-caption'
font), or substitute a user agent default font. As for regular fonts,
if, for a system font, any of the individual properties are not part
of the operating system's available user preferences, those properties
should be set to their initial values.
</p>
<p id="almost">That is why this property is "almost" a shorthand property: system
fonts can only be specified with this property, not with <a href="fonts.html#propdef-font-family" class="noxref"><span
class="propinst-font-family">'font-family'</span></a> itself, so <a href="fonts.html#propdef-font" class="noxref"><span
class="propinst-font">'font'</span></a> allows authors to do more than the
sum of its subproperties. However, the individual properties such as <a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight">'font-weight'</span></a> are still given values taken from the system font, which can be independently varied.</p>
<div class="example"><P style="display:none">Example(s):</P>
<pre>
button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
button p { font: menu }
button p em { font-weight: bolder }
</pre>
<p>If the font used for dropdown menus on a particular system
happened to be, for example, 9-point Charcoal, with a weight of 600, then P
elements that were descendants of BUTTON would be displayed as if
this rule were in effect:
</p>
<pre>
button p { font: 600 9px Charcoal }
</pre>
<p>Because the <a href="fonts.html#propdef-font" class="noxref"><span class="propinst-font">'font'</span></a> shorthand
property resets any property not explicitly given a value
to its initial value, this has the same effect as this declaration:
</p>
<pre>
button p {
font-family: Charcoal;
font-style: normal;
font-variant: normal;
font-weight: 600;
font-size: 9px;
line-height: normal;
}
</pre>
</div>
<hr class="navbar">
<div class="navbar">
<p><a href="colors.html">previous</a>
<a href="text.html">next</a>
<a href="cover.html#minitoc">contents</a>
<a href="propidx.html">properties</a>
<a href="indexlist.html">index</a>
</div>
</body>
</html>