csswg-drafts/css2/fonts.src at 3c37b4894e7db6ab9afd1f853cb9e55ff7062dd3 · w3c/csswg-drafts · GitHub

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
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
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: fonts.src,v 2.49 1998-05-05 16:53:15 howcome Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Fonts</TITLE>
</HEAD>
<BODY>
<H1 align="center">Fonts</H1>

<!-- Make sure 10-point is used where appropriate -IJ -->

<h2>Introduction</h2>

<P>When a document's text is to be displayed visually, <span
class="index-inst" title="character">characters</span> (abstract
information elements) must be mapped to <span class="index-def"
title="abstract glyph"><dfn>abstract glyphs</dfn></span>. One or
more characters may be depicted by one or more abstract glyphs, in
a possibly context-dependent fashion. A <span class="index-def" title="glyph"><dfn>glyph</dfn></span> is the actual
artistic representation of an abstract glyph, in some typographic
style, in the form of outlines or bitmaps that
may be drawn on the screen or paper. A <span class="index-def"
title="font"><dfn>font</dfn></span> is a set of glyphs,
all observing the same basic motif according to design, size,
appearance, and other attributes associated with the entire set, and a
mapping from characters to abstract glyphs.

<P>A visual user agent must address the following issues before actually
	rendering a character:</p>

<ul>
<li>Is there, directly or by inheritance, a font specified for this character?

<li>Does the user agent have this font available?

<li>If so, what glyph(s) does this character or sequence of
characters map to?

<li>If not, what should be done? Should a different font be substituted?
Can the font be synthesized? Can it be retrieved from the Web?
</ul>

<P>In both CSS1 and CSS2, authors specify font characteristics
via a series of font properties.

<P>How the user agent handles these properties, when there is no matching font on the client has expanded
between CSS1 and CSS2. In CSS1, all fonts were assumed to be present
on the client system and were identified solely by name. Alternate
fonts could be specified through the properties, but beyond that, user
agents had no way to propose other fonts to the user (even
stylistically similar fonts that the user agent had available) other
than generic default fonts.

<P>CSS2 changes all that, and allows much greater liberty for:</p>

<ul>
<li>style sheet authors, to describe the fonts they want to be used
<li>user agents, in selecting a font when an author's requested font
is not immediately available.
</ul>

<p>CSS2 improves client-side font matching, enables font
synthesis and progressive rendering, and enables fonts to be
downloaded over the Web. These enhanced capabilities are referred to as 'WebFonts'

<P>In the CSS2 font model, as in CSS1, each user agent has a "font
database" at its disposition. CSS1 referred to this database but gave no details about what was in it. CSS2 defines the information in that database and allows style sheet authors to contribute to it. When asked to display a character with a particular font,
the user agent first identifies the font in the database that "best
fits" the specified font (according to the <a href="#algorithm">font
matching algorithm)</a> Once it has identified a font, it retrieves
the font data locally or from the Web, and may display the character
using those glyphs.

<P>In light of this model, we have organized the specification
into two sections. The first concerns the <a
href="#font-specification">font specification mechanism</a>, whereby
authors specify which fonts they would like to have used.  The
second concerns the <a href="#font-selection">font selection
mechanism</a>, whereby the client's user agent identifies and loads a
font that best fits the author's specification.

<P>How the user agent constructs  the font database lies
outside the scope of this specification since the database's
implementation depends on such factors as the operating system, the windowing system, and the client.

<H2><a name="font-specification">Font specification</a></h2>

<P> The first phase of the CSS font mechanism concerns how style sheet
authors specify which fonts should be used by a user
agent. At first, it seem that the obvious way to specify a font is by it's name, a single string - which appears to be separated into distinct parts; for example <span class="example">"BT Swiss 721 Heavy Italic"</span>.

<p>Unfortunately, there exists no well-defined and universally
accepted taxonomy for classifying fonts based on their names, and terms that apply to one font family name may not be appropriate for others. For example, the term 'italic' is commonly used to label slanted text, but slanted text may also be labeled <EM>Oblique, Slanted, Incline, Cursive</EM>, or
<EM>Kursiv</EM>. Similarly, font names typically contain terms that
describe the "weight" of a font. The primary role of these names is to distinguish
faces of differing darkness within a single font family.  There is no
accepted, universal meaning to these weight names and usage varies
widely.  For example a font that you might think of as being bold
might be described as being <EM>Regular, Roman, Book, Medium,
Semi-</EM> or <EM>Demi-Bold, Bold,</EM> or <EM>Black,</EM> depending on
how black the "normal" face of the font is within the design.


<p>This lack of systematic naming makes it impossible, in the general case, to generate a modified font face name that differs in a particular way, such as being bolder.

<P>Because of this, CSS uses a <a href="#font-properties">different model</a>. Fonts are requested not through a single font name but through setting a series of font properties. These property values form the
basis of the user agent's <a href="#font-selection">font
selection</a> mechanism. The font properties can be individually modified, for example to increase the boldness, and the new set of font property values will then be used to select from the font database again. The result is an increase in regularity for style sheet authors and implementors, and an increase in robustness.

<h3><a name="font-properties">Font specification properties</a></h3>
<P>CSS2 specifies fonts according to these characteristics:</p>

<dl>
<dt><strong><a name="font-family">Font family</a></strong>

      <dd>The <span class="index-def" title="font family"> font
      family</span> specifies which font family is to be used to render the text. A font family is a group of fonts,designed to be used in combination and exhibiting similarities in design.  One member of the
      family may be italic, another bold, another condensed or using small caps. Font family names include "Helvetica", "New
      Century Schoolbook", and "Kyokasho ICA L". Font family names are
      not restricted to Latin characters.  Font families may be
      grouped into different categories: those with or without serifs,
      those whose characters are or are not proportionally spaced,
      those that resemble handwriting, those that are fantasy fonts,
      etc.


<dt><strong><a name="font-style">Font style</a></strong>

      <dd>The font style specifies whether the text is to be rendered
      using a normal, italic, or oblique face. <span class="index-def" title="Italic, definition of"><dfn>Italic</dfn></span> is a more
      cursive companion face to the normal face, but not so cursive as
      to make it a script face. Oblique is a slanted form of the
      normal face, and is more commonly used as a companion face to
      sans-serif. This definition avoids having to label slightly slanted
      normal faces as oblique, or normal Greek faces as italic.

<dt><strong><a name="font-variant">Font variant</a></strong>

      <dd>The font variant indicates whether the text is to be
      rendered using the normal glyphs for lowercase characters or
      using small-caps glyphs for lowercase characters. A particular
      font may contain only normal, only small-caps, or both types of
      glyph; this property is used to request an appropriate font and,
	if the font contains both variants, the appropriate glyphs.

<dt><strong><a name="font-weight">Font weight</a></strong>

      <dd>The font weight refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.

<dt><strong><a name="font-stretch">Font stretch</a></strong>

      <dd>The font stretch indicates the desired amount of condensing or expansion in the glyphs used to render the text, relative to other fonts in the same font family.<!-- new to CSS2, CL -->

<dt><strong><a name="font-size">Font size</a></strong>

      <dd>The font size refers to the size of the font from baseline
      to baseline, when set solid (in CSS terms, this is when the
      <span class="propinst-font-size">'font-size'</span> and <span
      class="propinst-line-height">'line-height'</span> properties
      have the same value).

</dl>


<P> On all properties except <span
class="propinst-font-size">'font-size'</span>, 'em' and 'ex' length
values refer to the font size of the current element. For <span
class="propinst-font-size">'font-size'</span>, these length units
refer to the font size of the parent element. Please consult the
section on <a href="./syndata.html#length-units">length units</a> for
more information.

<p>The CSS font properties are used to describe the desired
appearance of text in the document. The font descriptors, in contrast,
are used to describe the characteristics of fonts, so that a suitable
font can be chosen to create the desired appearance. For information
about the classification of fonts, please consult the section on <a
href="#font-descriptors">font descriptors</a>.


<H3><a name="font-family">Font family</a>: the <span
class="propinst-font-family">'font-family'</span> property</H3>

<!-- #include src=properties/font-family.srb -->

<P>This property specifies a prioritized list of font family names
and/or generic family names. To deal with the problem that a single
font may not contain glyphs to display all the characters in a
document, or that not all fonts are available on all systems, this
property allows authors to specify a list of fonts, all of the same
style and size, that are tried in sequence to see if they contain a
glyph for a certain character. This list is called a <span
class="index-def" title="font set"><dfn>font set</dfn></span>.

<div class="example"><P>
For example, text that contains English words mixed with
mathematical symbols may need a font set of two fonts, one containing
Latin letters and digits, the other containing mathematical symbols. Here
is an example of a font set suitable for a text that is expected to
contain text with Latin characters, Japanese characters, and
mathematical symbols:

<PRE>
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
</PRE>

<P> The glyphs available in the "Baskerville" font (a font that covers only
Latin characters) will be taken from that font, Japanese glyphs will be taken
from "Heisi Mincho W3", and the mathematical symbol glyphs will come from
"Symbol". Any others will come from the generic
font family 'serif'.
</div>

<p>The generic font family will be used if one
or more of the other fonts in a font set is unavailable. Although many fonts provide the "missing character" glyph, typically an open box, as its name implies this should not be considered a match except for the last font in a font set.

<P>  There are two types of font family names:</p>
  <DL>
    <DT><span class="index-def"
title="&lt;family-name&gt;::definition of"><a name="value-def-family-name" class="value-def"><strong>&lt;family-name&gt;</strong></a></span>
    <DD>
      The name of a font family of choice. In the previous example, "Baskerville",
      "Heisi Mincho W3", and "Symbol" are font families. Font
      family names containing
      <a href="syndata.html#whitespace">whitespace</a> should be
quoted. If quoting is omitted, any <a
href="syndata.html#whitespace">whitespace</a> characters before and
after the font name are <span class="index-inst" title="ignore"><a
href="syndata.html#ignore">ignored</a></span> and any sequence of
whitespace characters inside the font name is converted to a single
space.

    <DT><span class="index-def"
title="&lt;generic-family&gt;::definition of"><a name="value-def-generic-family" class="value-def"><strong>&lt;generic-family&gt;</strong></a></span>
    <DD>
      The following
      generic families are defined: 'serif', 'sans-serif', 'cursive',
      'fantasy', and 'monospace'. Please see the section on
      <a href="#generic-font-families">generic font families</a> for
      descriptions of these families. Generic font family names
      are keywords, and therefore must not be quoted.

<P>Authors are encouraged to offer a generic font family as a
      last alternative, for improved robustness.</p>
  </DL>

<div class="html-example"><P>
For example:

<PRE>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
    &lt;TITLE&gt;Font test&lt;/TITLE&gt;
    &lt;STYLE type="text/css"&gt;
      BODY { font-family: "new century schoolbook", serif }
    &lt;/STYLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
   &lt;H1 style="font-family: 'My own font', fantasy"&gt;Test&lt;/H1&gt;
    &lt;P&gt;What's up, Doc?
  &lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>
</div>

<div class="example"><p>The richer selector syntax of CSS2 may be used to create language-sensitive typography. For example, some Chinese and Japanese characters are unified to have the same Unicode codepoint, although the abstract glyphs are not the same in the two languages.

<pre>
*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif }
*:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif }
</pre>

<p>This selects any element that has the given language - Japanese or Traditional Chinese - and requests the appropriate font.
</div>


<H3><a name="font-styling">Font styling</a>: the
<span class="propinst-font-style">'font-style'</span>,
<span class="propinst-font-variant">'font-variant'</span>,
<span class="propinst-font-weight">'font-weight'</span> and
<span class="propinst-font-stretch">'font-stretch'</span> properties
</H3>

<!-- #include src=properties/font-style.srb -->

<P> The <span class="propinst-font-style">'font-style'</span> property requests normal (sometimes referred to as "roman" or "upright"), italic,
and oblique faces within a font family. Values have the following
meanings:</p>

<dl>
<dt><strong>normal</strong>
<dd>Specifies a font that is classified as 'normal'
in the UA's font database.
<dt><strong>oblique</strong>
<dd>Specifies a font that is classified as 'oblique' in the UA's font
database.  Fonts with Oblique, Slanted, or Incline in their names will
typically be labeled 'oblique' in the font database.
A font that is labeled 'oblique' in the UA's font database
may actually have been generated by electronically slanting a normal
font.
<dt><strong>italic</strong>
<dd>Specifies a font that is classified
as 'italic' in the UA's font database, or, if that is not available,
one labeled 'oblique'.  Fonts with
<EM>Italic, Cursive</EM>, or <EM>Kursiv</EM> in their names will
typically be labeled 'italic'.
</dl>

<div class="example"><P>
In this example, normal text in an H1, H2, or H3 element will
be displayed with an italic font.
However, emphasized text (EM) within an H1 will appear in a normal face.

<PRE>
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
</PRE>
</div>

<!-- #include src=properties/font-variant.srb -->

<P>In a small-caps font, the glyphs for lowercase letters look similar
to the uppercase ones, but in a smaller size and with slightly
different proportions. The <span
class="propinst-font-variant">'font-variant'</span> property requests such a font for <span class="index-def" title="bicameral::definition of">bicameral</span> (having two cases, as with Latin script). This property has no visible effect for scripts that are
<span class="index-def" title="unicameral::definition of"><dfn>unicameral</dfn></span> (having only one case, as with most of the world's writing systems). Values have the following
meanings:</p>

<dl>
<dt><strong>normal</strong>
<dd>Specifies a font that is not labeled as a
small-caps font.
<dt><strong>small-caps</strong>
<dd>Specifies a font that is labeled as a
small-caps font. If a genuine
small-caps font is not available, user agents should
simulate a small-caps font, for example by taking a normal font
and replacing the lowercase letters by scaled uppercase
characters. As a last resort, unscaled uppercase letter glyphs in
a normal font may replace glyphs in a small-caps font
so that the text appears in all uppercase letters.
</dl>

<div class="example">
<P> The following example results in an H3 element in small-caps,
with emphasized words (EM) in oblique small-caps:

<PRE>
H3 { font-variant: small-caps }
EM { font-style: oblique }
</PRE>
</div>

<!-- There may be other variants in the font family as well, such as
fonts with old-style (non-lining) numerals, swash forms, etc. CSS2 does not offer 'font-variant' values that select
those variants. -CL -->

<P>Insofar as this property causes text to be transformed to
uppercase, the same considerations as for <span
class="propinst-text-transform">'text-transform'</span> apply.

<!-- #include src=properties/font-weight.srb -->

<P> The <span class="propinst-font-weight">'font-weight'</span>
property specifies the <span>weight</span> of the font. Values have the following
meanings:</p>

<dl>
<dt><strong>100 to 900</strong>
<dd>These values
form an ordered sequence, where each number indicates a weight that is
at least as dark as its predecessor.
<dt><strong>normal</strong>
<dd>Same as '400'.
<dt><strong>bold</strong>
<dd>Same as '700'.
<dt><strong>bolder</strong>
<dd>Specifies 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'.
<dt><strong>lighter</strong>
<dd>Specifies the next weight that is assigned to a font that is lighter
than the inherited one. If there is no such weight, it simply results
in the next lighter numerical value (and the font remains unchanged),
unless the inherited value was '100', in which case the resulting
weight is also '100'.
</dl>

<div class="example">
<PRE>
P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 }     /* bold */
BODY { font-weight: 400 }
STRONG { font-weight: bolder } /* 500 if available */
</PRE>
</div>

<P>Child elements inherit the <a href="cascade.html#computed-value">
computed value</a> of the weight.


<!-- #include src=properties/font-stretch.srb -->

<P> The <span class="propinst-font-stretch">'font-stretch'</span>
property selects a normal, condensed, or extended face from a font
family. Absolute keyword values have the following ordering, from
narrowest to widest :</p>

<ol>
	<li>ultra-condensed
	<li>extra-condensed
	<li>condensed
	<li>semi-condensed
	<li>normal
	<li>semi-expanded
	<li>expanded
	<li>extra-expanded
	<li>ultra-expanded
</ol>

<p>The relative keyword 'wider' sets the value to the next expanded
value above the inherited value (while not increasing it above
'ultra-expanded'); the relative keyword 'narrower' sets the value to
the next condensed value below the inherited value (while not
decreasing it below 'ultra-condensed').  <!-- should this go to next
more condensed/expanded face in that family as the computed value?
like bolder/lighter -CL -->

<H3><a name="font-size">Font size</a>: the <span
class="propinst-font-size">'font-size'</span>
and <span class="propinst-font-size-adjust">'font-size-adjust'</span>
properties</H3>

<!-- #include src=properties/font-size.srb -->


<P>This property describes the size of the font when set solid.
Values have the following meanings:</p>

<DL>
    <DT><span class="index-def" title="&lt;absolute-size&gt;::definition of">
           <strong>&lt;absolute-size&gt;</strong></span>
    <DD> An <a name="value-def-absolute-size"
class="value-def">&lt;absolute-size&gt;</a> keyword refers to an entry
in a table of font sizes computed and kept by the user agent. Possible values
are:

    <P> [ xx-small | x-small | small | medium | large | x-large | xx-large ]

    <P>On a computer screen a scaling factor of 1.2 <!-- changed from
    1.5 which was widely criticised as far too much, CL --> is
    suggested between adjacent indexes; if the 'medium' font is 12pt,
    the 'large' font could be 14.4pt. Different media may need different
    scaling factors. Also, the user agent 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.
<!-- 10pt as medium gives 5.7 pt as xx-small which is unreadable; this property should probably not have been given values symmetric about medium. -CL -->

<p class="note"><em><strong>Note.</strong> In CSS1, the suggested
scaling factor between adjacent indexes was 1.5 which user experience
proved to be too large.</em></P>

    <DT><span class="index-def" title="&lt;relative-size&gt;::definition
of"><strong>&lt;relative-size&gt;</strong></span>

    <DD> A <a name="value-def-relative-size"
    class="value-def">&lt;relative-size&gt;</a> keyword is interpreted
    relative to the table of font sizes and the font size of the
    parent element. Possible values are:

    <P> [ larger | smaller ]

    <P> 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 user agent is free to interpolate
    between table entries or round off to the closest one. The user
    agent may have to extrapolate table values if the numerical value
    goes beyond the keywords.

    <DT><span class="index-inst" title="&lt;length&gt;"><span
    class="value-inst-length"><strong>&lt;length&gt;</strong></span></span>
    <DD>A length value specifies an absolute font size
        (that is independent of the user agent's font table).
        Negative lengths are illegal.
    <DT><span class="index-inst" title="&lt;percentage&gt;"><span
    class="value-inst-percentage"><strong>&lt;percentage&gt;</strong>
    </span></span>
    <DD>A percentage value specifies an absolute font size relative
        to the parent element's font size. Use of percentage values, or
	  values in 'em's, leads to more robust and cascadable style sheets.
  </DL>

<P>The <a href="cascade.html#actual-value">actual value</a> of
this property may differ from the <a
href="cascade.html#computed-value">computed value</a>
due a numerical value on 'font-size-adjust' and the unavailability
  of certain font sizes.

  <p>Child elements inherit the computed <span
  class="propinst-font-size">'font-size'</span> value (otherwise, the
  effect of <span
  class="propinst-font-size-adjust">'font-size-adjust'</span> would
  compound).

<div class="example"><P>

<PRE>
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
</PRE>
</div>

<!-- #include src=properties/font-size-adjust.srb -->


<P>In <span class="index-inst" title="bicameral">bicameral</span>
scripts, the subjective apparent size and legibility of a font are
less dependent on their <span
class="propinst-font-size">'font-size'</span> value than on the value
of their <span class="descinst-x-height">'x-height'</span>, or, more
usefully, on the ratio of these two values, called the <span
class="index-def" title="aspect value"><dfn>aspect value</dfn></span>
(font size divided by x-height). The higher the aspect value, the more
likely it is that a font at smaller sizes will be legible. Inversely,
faces with a lower aspect value will become illegible more rapidly
below a given threshold size than faces with a higher aspect
value. Straightforward font substitution that relies on font size
alone may lead to illegible characters.

<P>For example, the popular font Verdana has an aspect value of 0.58;
when Verdana's font size 100 units, its x-height is 58 units. For
comparison, Times New Roman has an aspect value of 0.46. Verdana will
therefore tend to remain legible at smaller sizes than Times New
Roman. Conversely, Verdana will often look 'too big' if substituted
for Times New Roman at a chosen size.

<P>This property allows authors to specify an aspect value for an
element that will preserve the x-height of the first choice font in
the substitute font. Values have the following meanings:

<dl>
<dt><strong>none</strong>
<dd>Do not preserve the font's x-height.

<dt><span class="index-inst" title="&lt;number&gt;"><span
class="value-inst-number"><strong>&lt;number&gt;</strong></span></span>

<dd>Specifies the aspect value. The number refers to the aspect value
of the first choice font. The scaling factor for available fonts is
computed according to the following formula:

<pre>
  y(a/a') = c
</pre>

<P>where:</p>

<PRE>
y = 'font-size' of first-choice font
a' = aspect value of available font
c = 'font-size' to apply to available font
</PRE>
</dl>


<div class="example">
<p>For example, if 14px Verdana (with an aspect value of 0.58) was
unavailable and an available font had an aspect value of 0.46, the
font-size of the substitute would be 14 * (0.58/0.46) = 17.65px.
</div>

<P>Font size adjustments take place when computing the <a
href="cascade.html#actual-value">actual value</a> of <span
class="propinst-font-size">'font-size'</span>. Since inheritance is
based on the <a href="cascade.html#computed-value">computed value</a>,
child elements will inherit unadjusted values.


<P>The first image below shows several typefaces rasterized at a
common font size (11pt. at 72 ppi), together with their aspect
values. Note that faces with higher aspect values appear larger than
those with lower. Faces with very low aspect values are illegible at
the size shown.</p>

<P><img src="images/font-adjust-a.gif" alt="Comparison of 12 point fonts"></p>

<P>The next image shows the results of <span
class="propinst-font-size-adjust">'font-size-adjust'</span> where Verdana has
been taken as the"first choice", together with the scaling factor applied.
As adjusted, the apparent sizes are nearly linear across faces, though the
actual (em) sizes vary by more than 100%. Note that <span
class="propinst-font-size-adjust">'font-size-adjust'</span>
tends to stabilize the horizontal metrics of lines, as well.

<P><img src="images/font-adjust-b.gif" alt="Comparison of font-adjusted fonts"></p>

<H3><a name="font-shorthand">Shorthand font property</a>: the <span class="propinst-font">'font'</span> property</H3>

<!-- #include src=properties/font.srb -->

<P> The <span class="propinst-font">'font'</span> property is,
except as described <a href="#almost">below</a>, a shorthand property for
setting <span class="propinst-font-style">'font-style'</span>, <span
class="propinst-font-variant">'font-variant'</span>, <span
class="propinst-font-weight">'font-weight'</span>, <span
class="propinst-font-size">'font-size'</span>, <span
class="propinst-line-height">'line-height'</span>, and <span
class="propinst-font-family">'font-family'</span>, at the same place
in the style sheet. <!-- but not font-size-adjust or font-stretch -CL --> The syntax of
this property is based on a traditional typographical shorthand
notation to set multiple properties related to fonts.

<p>All font-related properties are first reset to their initial values, including those listed in the preceding paragraph plus <span class="propinst-font-stretch">'font-stretch'</span> and <span class="propinst-font-size-adjust">'font-size-adjust'</span>. Then, those properties that are given explicit values in the <span class="propinst-font">'font'</span> shorthand are set to those values. For a definition of allowed and initial values, see the previously defined properties. For reasons of backwards compatibility, it is not possible to set <span class="propinst-font-stretch">'font-stretch'</span> and <span class="propinst-font-size-adjust">'font-size-adjust'</span> to other than their initial values using the <span class="propinst-font">'font'</span> shorthand property; instead, set the individual properties.

<div class="example"><P>

<PRE>
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 }
P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }
</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 ('110%') refers to the font size of the element
itself.

<P>The first three rules do not specify the <span
class="propinst-font-variant">'font-variant'</span> and <span
class="propinst-font-weight">'font-weight'</span> explicitly, so these
properties receive their initial values ('normal'). Notice that the font family name "new century schoolbook", which contains spaces, is enclosed in quotes. The fourth rule
sets the <span class="propinst-font-weight">'font-weight'</span> to
'bold', the <span class="propinst-font-style">'font-style'</span> to
'italic', and implicitly sets <span
class="propinst-font-variant">'font-variant'</span> to 'normal'.

<P> The fifth rule sets the <span
class="propinst-font-variant">'font-variant'</span> ('small-caps'),
the <span class="propinst-font-size">'font-size'</span> (120% of the
parent's font size), the <span
class="propinst-line-height">'line-height'</span> (120% of the font
size) and the <span class="propinst-font-family">'font-family'</span>
('fantasy'). It follows that the keyword 'normal' applies to the two
remaining properties: <span
class="propinst-font-style">'font-style'</span> and <span
class="propinst-font-weight">'font-weight'</span>.

<p>The sixth rule sets the <span
class="propinst-font-style">'font-style'</span>, <span
class="propinst-font-size">'font-size'</span>, and <span
class="propinst-font-family">'font-family'</span>, the other font
properties being set to their initial values. It then sets <span
class="propinst-font-stretch">'font-stretch'</span> to 'condensed'
since that property cannot be set to that value using the <span
class="propinst-font">'font'</span> shorthand property.
</div>


<P>The following values refer to <span class="index-def" title="system
fonts">system fonts</span>:</p>

<dl>
<dt><strong>caption</strong><!-- strong?? you mean like, shouted? ;-) -->
<dd>The font used for captioned controls (e.g., buttons, drop-downs, etc.).
<dt><strong>icon</strong>
<dd>The font used to label icons.
<dt><strong>menu</strong>
<dd>The font used in menus (e.g., dropdown menus and menu lists).
<dt><strong>message-box</strong>
<dd>The font used in dialog boxes.
<dt><strong>small-caption</strong>
<dd>The font used for labeling small controls.
<dt><strong>status-bar</strong>
<dd>The font used in window status bars.
</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 'smallcaption'
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><a name="almost">That is why</a> this property is "almost" a shorthand property: system
fonts can only be specified with this property, not with <span
class="propinst-font-family">'font-family'</span> itself, so <span
class="propinst-font">'font'</span> allows authors to do more than the
sum of its subproperties. However, the individual properties such as <span class="propinst-font-weight">'font-weight'</span> are still given values taken from the system font, which can be independently varied.</p>

<div class="example"><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:

<pre>
BUTTON P { font: 9pt 600 Charcoal }
</pre>

<p>Because the <span class="propinst-font">'font'</span> shorthand resets to its initial value any property not explicitly given a value, this has the same effect as this declaration:

<pre>
BUTTON P {
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9pt;
  line-height: normal;
  font-family: Charcoal
}
</PRE>

</div>

<h3><a name="generic-font-families">Generic font families</a></h3>

<p>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.


<p><a name="defined-to-exist">All five generic font families are defined to exist</a> 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.

<p>User agents are encouraged to allow users to select alternative
choices for the generic fonts.

<h4><span class="index-def" title="serif, definition of"><a name="serif-def"><dfn>serif</dfn></a></span></h4>

<p>Glyphs of serif fonts, as the term is used in CSS, 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.

<p>Examples of fonts that fit this description include:</p>

<table>
<tr><td>Latin fonts
  <td>Times New Roman, Bodoni,
Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
<tr><td>Greek fonts
  <td>Bitstream Cyberbit
<tr><td>Cyrillic fonts
  <td>Adobe Minion Cyrillic, Excelcior Cyrillic Upright,
Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
<tr><td>Hebrew fonts
  <td>New Peninim, Raanana, Bitstream Cyberbit
<tr><td>Japanese fonts
  <td>Ryumin Light-KL, Kyokasho ICA, Futo Min A101
<tr><td>Arabic fonts
  <td>Bitstream Cyberbit
<tr><td>Cherokee fonts
  <td>Lo Cicero Cherokee
</table>

<h4><span class="index-def" title="sans-serif, definition of">
<a name="sans-serif-def"><dfn>sans-serif</dfn></a></span></h4>

<p>Glyphs in sans-serif fonts, as the term is used in CSS, have stroke
endings that are plain -- without any 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.

<p>Examples of fonts that fit this description include:</p>

<table>
<tr><td>Latin fonts
  <td>MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers,
Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
<tr><td>Greek fonts
  <td>Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
<tr><td>Cyrillic fonts
  <td>Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
<tr><td>Hebrew fonts
  <td>Arial Hebrew, MS Tahoma
<tr><td>Japanese fonts
  <td>Shin Go, Heisei Kaku Gothic W5
<tr><td>Arabic fonts
  <td>MS Tahoma
</table>

<h4><span class="index-def" title="cursive, definition of">
<a name="cursive-def"><dfn>cursive</dfn></a></span></h4>

<p>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.

<p>Examples of fonts that fit this description include:</p>

<table>
<tr><td>Latin fonts
  <td>Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand,
Zapf-Chancery
<tr><td>Cyrillic fonts
  <td>ER Architekt
<tr><td>Hebrew fonts
  <td>Corsiva
<tr><td>Arabic fonts
  <td>DecoType Naskh, Monotype Urdu 507
</table>

<h4><span class="index-def" title="fantasy, definition of">
<a name="fantasy-def"><dfn>fantasy</dfn></a></span></h4>


<p>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:</p>

<table>
<tr><td>Latin fonts
  <td>Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
</table>


<h4><span class="index-def" title="monospace, definition of">
<a name="monospace-def"><dfn>monospace</dfn></a></span></h4>


<p>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.

<p>Examples of fonts which fit this description include:

<table>
<tr><td>Latin fonts
  <td>Courier, MS Courier New, Prestige, Everson Mono
<tr><td>Greek Fonts
  <td>MS Courier New, Everson Mono
<tr><td>Cyrillic fonts
  <td>ER Kurier, Everson Mono
<tr><td>Japanese fonts
  <td>Osaka Monospaced
<tr><td>Cherokee fonts
  <td>Everson Mono
</table>

<H2><a name="font-selection">Font selection</a></h2>

<P>The second phase of the CSS2 font mechanism concerns the user
agent'
2B9
;s selection of a font based on author-specified font properties,
available fonts, etc. The details of the <a href="#algorithm">font
matching algorithm</a> are provided below.

<P>There are four possible font selection actions:
name matching, intelligent matching, synthesis, and download.</p>

<dl>
<dt><span class="index-def" title="name matching"><dfn><strong>font name
matching</strong></dfn></span>
<dd> In this case, the user agent uses an
existing, accessible font that has the same family name as the
requested font. (Note that the appearance and the metrics might not
necessarily match, if the font that the document author used and the
font on the client system are from different foundries). The matching
information is restricted to the CSS font properties, including the
family name. This is the only method used by CSS1.

<dt><span class="index-def" title="intelligent font
	    matching"><dfn><strong>intelligent font
matching</strong>
</dfn></span>
<dd>In this case, the user agent uses an existing, accessible font that is
the closest match in appearance to the requested font. (Note that the
metrics might not match exactly). The matching information includes
information about the kind of font (text or symbol), nature of serifs,
weight, cap height, x height, ascent, descent, slant, etc.

<dt><span class="index-def" title="font synthesis"><dfn>
<strong>font synthesis</strong></dfn></span>
<dd> In this case, the user agent creates a font that is not
only a close match in appearance, but also matches the metrics of the
requested font. The synthesizing information includes the matching
information and typically requires more accurate values for the
parameters than are used for some matching schemes. In particular,
synthesis requires accurate width metrics and character to glyph
substitution and position information if all the layout characteristics of
the specified font are to be preserved.

<dt><span class="index-def" title="font download">
<dfn><strong>font download</strong></dfn></span>
<dd>Finally, the user agent may retrieve a font
over the Web. This is similar to the process of fetching images,
sounds, or applets over the Web for display in the current document,
and likewise can cause some delay before the page can be displayed.
</DL>

<p><span class="index-def" title="progressive rendering"><dfn>Progressive
rendering</dfn></span> is a combination of download and one of the
other methods; it provides a temporary substitute font (using name
matching, intelligent matching, or synthesis) to allow content to be
read while the requested font downloads. Once the real font has been
successfully downloaded, it replaces the
temporary font, hopefully without the need to reflow.

<div class="note"><P>
<em><strong>Note.</strong>
Progressive rendering requires metric information about the font in
order to avoid re-layout of the content when the actual font has been
loaded and rendered. This metric information is sufficiently verbose
that it should only be specified at most once per font in a document.
</em>
</div>


<h3><span class="index-inst" title="font description"> <a
name="font-descriptions">Font Descriptions</a></span> and
@font-face</h3>

<P>The font description provides the bridge between an author's font
specification and the <span class="index-def" title="font
data"><dfn>font data</dfn></span>, which is the data needed to format
text and to render the abstract glyphs to which the characters
map - the actual scalable outlines or bitmaps. Fonts are
<em>referenced</em> by style sheet properties.

<P>The font description is added to the font database and then used to select the relevant font data. The
font description contains descriptors such as the location of the
font data on the Web, and characterizations of that font data. The font
descriptors are also needed to match the style sheet font properties
to particular font data. The level of detail of a font description can
vary from just the name of the font up to a list of glyph
widths.

<P>Font descriptors may be classified into three types:</p>

<ol>
<li>those that provide the link between the CSS usage of the font and
the font description (these have the same names as the corresponding
CSS font properties),

<li>the URI for the location of the font data,

<li>those that further characterize the font, to provide a link
	  between the font description and the font data.
</ol>


<p>All font descriptions are specified via a <span class="index-def"
title="@font-face"><em>@font-face</em></span>
<span class="index-inst" title="at-rules">at-rule</span>. The
general form is:

<P><tt>@font-face { <span class="value-inst-font-description">&lt;font-description&gt;</span> }</tt>

<p>where the <span class="index-def" title="&lt;font-description&gt;::definition of"><a name="value-def-font-description">&lt;font-description&gt;</a></span> has the form:

<pre>
descriptor: value;
descriptor: value;
[...]
descriptor: value;
</pre>