-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathfonts.html
More file actions
948 lines (824 loc) · 140 KB
/
fonts.html
File metadata and controls
948 lines (824 loc) · 140 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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Fonts</title>
<link rel="stylesheet" href="style/default.css" type="text/css">
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/W3C-ED.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">
<style type="text/css">
<ins>#AutoNumber2 td { text-align:center }</ins>
</style>
<style type="text/css">
<ins>.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}</ins>
</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#fonts-intro" class="tocxref">15.1 Introduction</a>
<li class="tocline2"><a href="fonts.html#algorithm" class="tocxref">15.2 Font <del>specification 15.2.1 Font specification properties 15.2.2</del><ins>matching algorithm</ins></a>
<li class="tocline2"><a href="fonts.html#font-family-prop" class="tocxref"><ins>15.3</ins> Font family: the <span class="propinst-font-family">'font-family'</span> property</a>
<ul class="toc">
<li class="tocline3"><a href="fonts.html#generic-font-families" class="tocxref"> <del>15.2.3</del><ins>15.3.1 Generic font families</ins></a>
<ul class="toc">
<li class="tocline4"><a href="fonts.html#serif-def" class="tocxref"><ins>15.3.1.1</ins> <span class="index-def" title="serif, definition of"><dfn><ins>serif</ins></dfn></span></a>
<li class="tocline4"><a href="fonts.html#sans-serif-def" class="tocxref"><ins>15.3.1.2</ins> <span class="index-def" title="sans-serif, definition of"> <dfn><ins>sans-serif</ins></dfn></span></a>
<li class="tocline4"><a href="fonts.html#cursive-def" class="tocxref"><ins>15.3.1.3</ins> <span class="index-def" title="cursive, definition of"> <dfn><ins>cursive</ins></dfn></span></a>
<li class="tocline4"><a href="fonts.html#fantasy-def" class="tocxref"><ins>15.3.1.4</ins> <span class="index-def" title="fantasy, definition of"> <dfn><ins>fantasy</ins></dfn></span></a>
<li class="tocline4"><a href="fonts.html#monospace-def" class="tocxref"><ins>15.3.1.5</ins> <span class="index-def" title="monospace, definition of"> <dfn><ins>monospace</ins></dfn></span></a>
</ul>
</ul>
<li class="tocline2"><a href="fonts.html#font-styling" class="tocxref"><ins>15.4</ins> Font styling: the <span class="propinst-font-style">'font-style'</span> <del>,</del><ins>property</ins></a>
<li class="tocline2"><a href="fonts.html#small-caps" class="tocxref"><ins>15.5 Small-caps: the</ins> <span class="propinst-font-variant">'font-variant'</span> <del>,</del><ins>property</ins></a>
<li class="tocline2"><a href="fonts.html#font-boldness" class="tocxref"><ins>15.6 Font boldness: the</ins> <span class="propinst-font-weight">'font-weight'</span> <del>and 'font-stretch' properties 15.2.4</del><ins>property</ins></a>
<li class="tocline2"><a href="fonts.html#font-size-props" class="tocxref"><ins>15.7</ins> Font size: the <span class="propinst-font-size">'font-size'</span> <del>and 'font-size-adjust' properties 15.2.5</del><ins>property</ins></a>
<li class="tocline2"><a href="fonts.html#font-shorthand" class="tocxref"><ins>15.8</ins> Shorthand font property: the <span class="propinst-font">'font'</span> property</a>
</ul>
</div>
<h2> <del>15.2.6 Generic font families serif sans-serif cursive fantasy monospace 15.3 Font selection 15.3.1</del><ins>15.1</ins> <a name="fonts-intro"><ins>Introduction</ins></a></h2>
<p><ins>Setting</ins> font <del>Descriptions</del><ins>properties will be among the most common uses of style
sheets. Unfortunately, there exists no well-defined</ins> and <del>@font-face 15.3.2 Descriptors</del><ins>universally
accepted taxonomy</ins> for <del>Selecting a Font: 'font-family' , 'font-style' , 'font-variant' , 'font-weight' , 'font-stretch'</del><ins>classifying fonts,</ins> and <del>'font-size' 15.3.3 Descriptors for</del><ins>terms that apply to one</ins>
font <del>Data Qualification: 'unicode-range' 15.3.4 Descriptor for Numeric Values: 'units-per-em' 15.3.5 Descriptor for Referencing: 'src' 15.3.6 Descriptors for Matching: 'panose-1' , 'stemv' , 'stemh' , 'slope' , 'cap-height' , 'x-height' , 'ascent' , and 'descent' 15.3.7 Descriptors for Synthesis: 'widths' , 'bbox' and 'definition-src' 15.3.8 Descriptors</del><ins>family may not be appropriate</ins> for <del>Alignment: 'baseline' , 'centerline' , 'mathline' , and 'topline' 15.3.9 Examples 15.4 Font Characteristics 15.4.1 Introducing Font Characteristics 15.4.2 Full font name 15.4.3 Coordinate units on the em square 15.4.4 Central Baseline 15.4.5 Font Encoding 15.4.6</del><ins>others. E.g., 'italic' is
commonly used to label slanted text, but slanted text may also be
labeled as being</ins> <em><ins>Oblique, Slanted, Incline, Cursive</ins></em> <ins>or</ins>
<em><ins>Kursiv</ins></em><ins>. Therefore it is not a simple problem to map typical</ins>
font <del>family name 15.4.7 Glyph widths 15.4.8 Horizontal stem width 15.4.9 Height of uppercase glyphs 15.4.10 Height of lowercase glyphs 15.4.11 Lower Baseline 15.4.12 Mathematical Baseline 15.4.13 Maximal bounding box 15.4.14 Maximum unaccented height 15.4.15 Maximum unaccented depth 15.4.16 Panose-1 number 15.4.17 Range of ISO 10646 characters 15.4.18 Top Baseline 15.4.19 Vertical stem width 15.4.20 Vertical stroke angle 15.5</del><ins>selection properties to a specific font.</ins>
</p>
<h2><ins>15.2</ins> <a name="algorithm">Font matching algorithm</a></h2>
<p> <del>15.5.1 Mapping font weight values to font names 15.5.2 Examples</del><ins>Because there is no accepted, universal taxonomy</ins> of font
<ins>properties,</ins> matching <del>15.1 Introduction When a document's text is</del><ins>of properties</ins> to <del>be displayed visually, characters (abstract information elements)</del><ins>font faces</ins> must be <del>mapped to abstract glyphs . One or more characters may be depicted by one or more abstract glyphs,</del><ins>done
carefully. The properties are matched</ins> in a <del>possibly context-dependent fashion. A glyph is</del><ins>well-defined order to
insure that</ins> the <del>actual artistic representation</del><ins>results</ins> of <del>an abstract glyph, in some typographic style, in the form of outlines or bitmaps</del><ins>this matching process are as consistent as
possible across UAs (assuming</ins> that <del>may be drawn on</del>the <del>screen or paper. A</del><ins>same library of</ins> font <ins>faces</ins> is
<ins>presented to each of them).</ins>
</p>
<ol>
<li><ins>The User Agent makes (or accesses)</ins> a <del>set</del><ins>database of relevant CSS 2.1
properties</ins> of <del>glyphs,</del>all <del>observing</del>the <del>same basic motif according to design, size, appearance, and other attributes associated</del><ins>fonts of which the UA is aware.
If there are two fonts</ins> with <ins>exactly the same properties,</ins> the <del>entire set, and a mapping from characters to abstract glyphs. A visual</del>user
agent <del>must address the following issues before actually rendering a character: Is there, directly or by inheritance,</del><ins>selects one of them.</ins>
</li>
<li><ins>At</ins> a <del>font specified</del><ins>given element and</ins> for <del>this character? Does</del><ins>each character in that element, the UA
assembles</ins> the <del>user agent have this</del>font <del>available? If so, what glyph(s) does this character or sequence</del><ins>properties applicable to that element. Using the
complete set</ins> of <del>characters map to? If not, what should be done? Should a different font be substituted? Can</del><ins>properties,</ins> the <del>font be synthesized? Can it be retrieved from</del><ins>UA uses</ins> the <del>Web? In both CSS1 and CSS2, authors specify font characteristics via</del><ins>'font-family' property to
choose</ins> a <del>series of</del><ins>tentative</ins> font <del>properties. How</del><ins>family.</ins> The <del>user agent handles these</del><ins>remaining properties are tested
against the family according to the matching criteria described with
each property. If there are matches for all the remaining</ins> properties,
<del>when</del><ins>then that is the matching font face for the given element or character.</ins>
</li>
<li><ins>If</ins> there is no matching font <del>on</del><ins>face within</ins> the <del>client has expanded between CSS1</del><ins>'font-family' being
processed by step 2,</ins> and <del>CSS2.</del><ins>if there is a next alternative 'font-family'</ins>
in <del>CSS1, all fonts were assumed to be present on</del>the <del>client system and were identified solely by name. Alternate fonts could be specified through</del><ins>font set, then repeat step 2 with</ins> the <del>properties,</del><ins>next alternative
'font-family'.</ins>
</li>
<li><ins>If there is a matching font face,</ins> but <del>beyond that, user agents had no way to propose other fonts to the user (even stylistically similar fonts that</del><ins>it does not contain a glyph
for</ins> the <del>user agent had available) other than generic default fonts. CSS2 changes all that,</del><ins>current character,</ins> and <del>allows much greater liberty for: style sheet authors, to describe the fonts they want to be used user agents, in selecting</del><ins>if there is</ins> a <ins>next alternative
'font-family' in the</ins> font <del>when an author's requested font</del><ins>sets, then repeat step 2 with the next
alternative 'font-family'.</ins>
</li>
<li><ins>If there</ins> is <del>not immediately available. CSS2 improves client-side font matching, enables</del><ins>no</ins> font <del>synthesis and progressive rendering, and enables fonts to be downloaded over the Web. These enhanced capabilities are referred to as 'WebFonts' In</del><ins>within</ins> the <del>CSS2 font model, as</del><ins>family selected</ins> in <del>CSS1, each user agent has</del><ins>2, then use</ins> a
<del>"font database" at its disposition. CSS1 referred to this database but gave no details about what was in it. CSS2 defines</del><ins>UA-dependent default 'font-family' and repeat step 2, using</ins> the <del>information in</del><ins>best
match</ins> that <del>database and allows style sheet authors to contribute to it. When asked to display a character with</del><ins>can be obtained within the default font. If</ins> a particular
<ins>character cannot be displayed using this</ins> font, <ins>then</ins> the <del>user agent first identifies the</del><ins>UA may use other
means to determine a suitable</ins> font <del>in the database</del><ins>for</ins> that <del>"best fits" the specified font (according to</del><ins>character.</ins> The <del>font matching algorithm) Once</del><ins>UA should map
each character for which</ins> it has <del>identified</del><ins>no suitable font to</ins> a <del>font, it retrieves</del><ins>visible symbol
chosen by</ins> the <del>font data locally or</del><ins>UA, preferably a "missing character" glyph</ins> from <del>the Web, and may display the character using those glyphs. In light</del><ins>one</ins> of <del>this model, we have organized the specification into two sections. The first concerns</del>the
font <del>specification mechanism , whereby authors specify which fonts they would like</del><ins>faces available</ins> to <del>have used.</del>the <del>second concerns the font selection mechanism , whereby the client's user agent identifies and loads a font that best fits the author's specification. How</del><ins>UA.</ins>
</li>
</ol>
<p><ins>(The above algorithm can be optimized to avoid having to revisit</ins>
the <del>user agent constructs</del><ins>CSS 2.1 properties for each character.)</ins>
</p>
<p>The <del>font database lies outside the scope of this specification since the database's implementation depends on such factors</del><ins>per-property matching rules from (2) above are</ins> as <ins>follows:</ins>
</p>
<ol>
<li><a href="fonts.html#propdef-font-style" class="noxref"><span class="propinst-font-style"><ins>'font-style'</ins></span></a> <ins>is tried first. 'Italic'
will be satisfied if there is either a face in</ins> the <del>operating system, the windowing system, and the client. 15.2</del><ins>UA's</ins> font <del>specification The first phase of</del><ins>database
labeled with</ins> the CSS <del>font mechanism concerns how style sheet authors specify which fonts should</del><ins>keyword 'italic' (preferred) or 'oblique'.
Otherwise the values must</ins> be <del>used by</del><ins>matched exactly or font-style will fail.</ins>
</li>
<li><a href="fonts.html#propdef-font-variant" class="noxref"><span class="propinst-font-variant"><ins>'font-variant'</ins></span></a> <ins>is tried next. 'Small-caps' matches (1)</ins> a
<del>user agent. At first, it seem that</del><ins>font labeled as 'small-caps', (2) a font in which</ins> the <del>obvious way to specify</del><ins>small caps are
synthesized, or (3)</ins> a font <del>is</del><ins>where all lowercase letters are replaced</ins> by
<del>it's name,</del><ins>upper case letters.</ins> A <del>single string - which appears to be separated into distinct parts; for example "BT Swiss 721 Heavy Italic" . Unfortunately, there exists no well-defined and universally accepted taxonomy for classifying fonts based on their names, and terms that apply to one</del><ins>small-caps</ins> font <del>family name may not be appropriate for others. For example, the term 'italic' is commonly used to label slanted text, but slanted text</del>may <del>also</del>be <del>labeled Oblique, Slanted, Incline, Cursive , or Kursiv . Similarly, font names typically contain terms that describe the "weight" of</del><ins>synthesized by
electronically scaling uppercase letters from</ins> a <ins>normal</ins> font.
<del>The primary role of these names is to distinguish faces of differing darkness within</del><ins>'normal' matches a font's normal (non-small-caps) variant.</ins> A <del>single</del>font <del>family. There is no accepted, universal meaning</del><ins>cannot fail</ins> to <del>these weight names and usage varies widely. For example</del><ins>have a normal variant.</ins> A font
that <del>you might think of</del><ins>is only available</ins> as <del>being bold might</del><ins>small-caps shall</ins> be <del>described</del><ins>selectable</ins> as <del>being Regular, Roman, Book, Medium, Semi-</del><ins>either a 'normal' face</ins> or <del>Demi-Bold, Bold, or Black, depending on how black the "normal" face of the font</del><ins>a 'small-caps' face.</ins>
</li>
<li><a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight"><ins>'font-weight'</ins></span></a> is <ins>matched next, it will
never fail. (See 'font-weight' below.)</ins>
</li>
<li><a href="fonts.html#propdef-font-size" class="noxref"><span class="propinst-font-size"><ins>'font-size'</ins></span></a> <ins>must be matched</ins> within <del>the design. This lack</del><ins>a
UA-dependent margin</ins> of <del>systematic naming makes it impossible,</del><ins>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</ins> in <ins>other properties, are based on</ins>
the <del>general case, to generate a modified</del><ins>computed value of 'font-size'.</ins>
</li>
</ol>
<h2><ins>15.3</ins> <a name="font-family-prop">Font <del>face name that differs in a particular way, such</del><ins>family</ins></a><ins>: the</ins> <a href="fonts.html#propdef-font-family" class="noxref"><span
class="propinst-font-family"><ins>'font-family'</ins></span></a> <ins>property</ins></h2>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-family'"><a name="propdef-font-family" class="propdef-title"><strong><ins>'font-family'</ins></strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em><ins>Value:</ins></em><ins> </ins><td><ins>[[</ins> <a href="fonts.html#value-def-family-name" class="noxref"><span class="value-inst-family-name"><ins><family-name></ins></span></a> <ins>|</ins> <a href="fonts.html#value-def-generic-family" class="noxref"><span class="value-inst-generic-family"><ins><generic-family></ins></span></a> <ins>] [, [</ins> <a href="fonts.html#value-def-family-name" class="noxref"><span class="value-inst-family-name"><ins><family-name></ins></span></a><ins>|</ins> <a href="fonts.html#value-def-generic-family" class="noxref"><span class="value-inst-generic-family"><ins><generic-family></ins></span></a><ins>] ]* ] |</ins> <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit"><ins>inherit</ins></span></a>
<tr valign=baseline><td><em><ins>Initial:</ins></em><ins> </ins><td><ins>depends on user agent</ins>
<tr valign=baseline><td><em><ins>Applies to:</ins></em><ins> </ins><td><ins>all elements</ins>
<tr valign=baseline><td><em><ins>Inherited:</ins></em><ins> </ins><td><ins>yes</ins>
<tr valign=baseline><td><em><ins>Percentages:</ins></em><ins> </ins><td><ins>N/A</ins>
<tr valign=baseline><td><em><ins>Media:</ins></em><ins> </ins><td><a href="media.html#visual-media-group" class="noxref"><ins>visual</ins></a>
<tr valign=baseline><td><em><ins>Computed value:</ins></em><ins> </ins><td>as <del>being bolder. Because</del><ins>specified</ins>
</table>
</dl>
</div>
<p><ins>The property value is a prioritized list</ins> of <del>this,</del><ins>font family names
and/or</ins> <a href="#generic-font-families"><ins>generic family names.</ins></a>
<ins>Unlike most other</ins> CSS <del>uses</del><ins>properties, component values are separated
by</ins> a <del>different model . Fonts</del><ins>comma to indicate that they</ins> are <del>requested</del><ins>alternatives:</ins>
</p>
<pre>
<ins>body { font-family: Gill, Helvetica, sans-serif }</ins>
</pre>
<p><ins>Although many fonts provide the "missing character" glyph,
typically an open box, as its name implies this should</ins> not <del>through</del><ins>be
considered</
22A
ins> a <del>single font name but through setting</del><ins>match
for characters that cannot be found in the font. (It should,
however, be considered</ins> a <del>series</del><ins>match for U+FFFD, the "missing character"
character's code point).</ins>
</p>
<p><ins>There are two types</ins> of font <del>properties. These property values form</del><ins>family names:</ins>
</p>
<dl>
<dt><a name="value-def-family-name"><ins><family-name></ins></a>
</dt>
<dd>The <del>basis</del><ins>name</ins> of <del>the user agent's</del><ins>a</ins> font <del>selection mechanism.</del><ins>family of choice. In</ins> the <ins>last example, "Gill"
and "Helvetica" are</ins> font <del>properties can be individually modified, for</del><ins>families.</ins>
</dd>
<dt><a name="value-def-generic-family"><ins><generic-family></ins></a>
</dt>
<dd><ins>In the</ins> example <del>to increase</del><ins>above,</ins> the <del>boldness, and</del><ins>last value is a generic family name.</ins> The
<del>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</del><ins>following generic families are defined:</ins>
<ul>
<li><ins>'serif' (e.g., Times)</ins></li>
<li><ins>'sans-serif' (e.g., Helvetica)</ins></li>
<li><ins>'cursive' (e.g., Zapf-Chancery)</ins></li>
<li><ins>'fantasy' (e.g., Western)</ins></li>
<li><ins>'monospace' (e.g., Courier)</ins></li>
</ul>
<p>Style sheet <del>authors and implementors, and an increase in robustness. 15.2.1 Font specification properties CSS2 specifies fonts according</del><ins>designers are encouraged</ins> to <del>these characteristics:</del><ins>offer a generic</ins> font family
<del>The</del><ins>as a last alternative. Generic</ins> font family <del>specifies which</del><ins>names are keywords and must NOT be quoted.</ins>
</p>
</dd>
</dl>
<p>Font family <del>is to</del><ins>names must either</ins> be <del>used to render the text.</del><ins>given quoted as</ins> <a
href="syndata.html#strings"><ins>strings,</ins></a> <ins>or unquoted as</ins> a <ins>sequence of
one or more</ins> <a
href="syndata.html#value-def-identifier"><ins>identifiers.</ins></a> <ins>This means
most punctuation characters and digits at the start of each token must
be escaped in unquoted</ins> font family <del>is</del><ins>names.</ins>
<p><ins>For example, the following declarations are invalid:</ins>
<pre>
<ins>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;</ins>
</pre>
<p><ins>If</ins> a <del>group</del><ins>sequence</ins> of <del>fonts,designed</del><ins>identifiers is given as a font family name, the
computed value is the name converted</ins> to <del>be used in combination and exhibiting similarities</del><ins>a string by joining all the
identifiers</ins> in <del>design. One member of</del>the <del>family may be italic, another bold, another condensed or using small caps.</del><ins>sequence by single spaces.</ins>
<p><ins>To avoid mistakes in escaping, it is recommended to quote</ins> font
family names <del>include "Helvetica",</del><ins>that contain white space, digits, or punctuation
characters other than hyphens:</ins>
<pre>
<ins>body { font-family:</ins> "New Century Schoolbook", <del>and "Kyokasho ICA L".</del><ins>serif }
<BODY STYLE="font-family: '21st Century', fantasy"></ins>
</pre>
<p><ins>Unquoted</ins> font family <em>names</em> <del>are not restricted</del><ins>that happen</ins> to <del>Latin characters. Font families may</del>be <del>grouped into different categories: those with or without serifs, those whose characters are</del><ins>the same as
the keyword values 'inherit', 'default' and 'initial'</ins> or <del>are not proportionally spaced, those that resemble handwriting, those that are fantasy fonts, etc. Font style</del>the <ins>generic</ins>
font <del>style specifies whether</del><ins>keywords ('serif', 'sans-serif', 'monospace', 'fantasy', and
'cursive') do not match</ins> the <del>text is</del><ins>'<family-name>' type. These names
must be quoted</ins> to <ins>prevent confusion with the keywords with the same
names. Note that 'font-family: Times, inherit' is therefore an invalid
declaration, because 'inherit' in that position can neither</ins> be <del>rendered using</del>a <del>normal, italic, or oblique face. Italic is</del><ins>valid
keyword nor</ins> a <del>more cursive companion face to the normal face, but not so cursive as to make it</del><ins>valid font family name.</ins>
<h3><ins>15.3.1</ins> <a name="generic-font-families"><ins>Generic font families</ins></a></h3>
<p><ins>Generic font families are</ins> a <del>script face. Oblique is</del><ins>fallback mechanism,</ins> a <del>slanted form</del><ins>means of
preserving some</ins> of the <del>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. Font variant</del><ins>style sheet author's intent in</ins> the <del>font variant indicates whether</del><ins>worst case
when none of</ins> the <del>text is to</del><ins>specified fonts can</ins> be <del>rendered using the normal glyphs for lowercase characters or using small-caps glyphs</del><ins>selected.</ins> For <del>lowercase characters. A</del><ins>optimum
typographic control,</ins> particular <del>font may contain only normal, only small-caps, or both types of glyph; this property is</del><ins>named fonts should be</ins> used <del>to request an appropriate</del><ins>in
style sheets.</ins>
<p><a name="defined-to-exist"><ins>All five generic</ins> font <del>and, if</del><ins>families are defined to exist</ins></a> <ins>in all
CSS implementations (they need not necessarily map to five distinct
actual fonts). User agents should provide reasonable
default choices for</ins> the <ins>generic</ins> font <del>contains both variants,</del><ins>families, which express</ins> the
<del>appropriate glyphs. Font weight</del><ins>characteristics of each family as well as possible within</ins> the <del>font weight refers</del><ins>limits
allowed by the underlying technology.</ins>
<p><ins>User agents are encouraged to allow users</ins> to <ins>select alternative
choices for</ins> the <del>boldness or lightness</del><ins>generic fonts.</ins>
<h4><ins>15.3.1.1</ins> <span class="index-def" title="serif, definition of"><a name="serif-def"><dfn><ins>serif</ins></dfn></a></span></h4>
<p><ins>Glyphs</ins> of <ins>serif fonts, as</ins> the <del>glyphs</del><ins>term is</ins> used <ins>in CSS, tend</ins> to <del>render the text, relative to other</del><ins>have finishing
strokes, flared or tapering ends, or have actual serifed endings
(including slab serifs). Serif</ins> fonts <del>in</del><ins>are typically
proportionately-spaced. They often display a greater variation between
thick and thin strokes than fonts from</ins> the <del>same</del><ins>'sans-serif' generic</ins> font
family. <del>Font stretch The font stretch indicates</del><ins>CSS uses</ins> the <del>desired amount of condensing or expansion in the glyphs used</del><ins>term 'serif'</ins> to <del>render the text, relative</del><ins>apply</ins> to <del>other fonts in the same font family.</del><ins>a</ins> font <del>size The</del><ins>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</ins> font <del>size refers</del><ins>that is so described may be used</ins> to <ins>represent</ins> the
<del>size</del><ins>generic 'serif' family.</ins>
<p><ins>Examples</ins> of <del>the font from baseline to baseline, when set solid (in CSS terms,</del><ins>fonts that fit</ins> this <del>is when</del><ins>description include:</ins></p>
<table>
<tr><td><ins>Latin fonts</ins>
<td><ins>Times New Roman, Bodoni,
Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit</ins>
<tr><td><ins>Greek fonts</ins>
<td><ins>Bitstream Cyberbit</ins>
<tr><td><ins>Cyrillic fonts</ins>
<td><ins>Adobe Minion Cyrillic, Excelsior Cyrillic Upright,
Monotype Albion 70, Bitstream Cyberbit, ER Bukinist</ins>
<tr><td><ins>Hebrew fonts</ins>
<td><ins>New Peninim, Raanana, Bitstream Cyberbit</ins>
<tr><td><ins>Japanese fonts</ins>
<td><ins>Ryumin Light-KL, Kyokasho ICA, Futo Min A101</ins>
<tr><td><ins>Arabic fonts</ins>
<td><ins>Bitstream Cyberbit</ins>
<tr><td><ins>Cherokee fonts</ins>
<td><ins>Lo Cicero Cherokee</ins>
</table>
<h4><ins>15.3.1.2</ins> <span class="index-def" title="sans-serif, definition of">
<a name="sans-serif-def"><dfn><ins>sans-serif</ins></dfn></a></span></h4>
<p><ins>Glyphs in sans-serif fonts, as</ins> the <del>'font-size' and 'line-height' properties</del><ins>term is used in CSS, tend to</ins> have <del>the same value). On all properties except 'font-size' , 'em'</del><ins>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</ins>
and <del>'ex' length values refer</del><ins>thin strokes, compared</ins> to <ins>fonts from</ins> the <del>font size of</del><ins>'serif' family. CSS uses</ins>
the <del>current element. For 'font-size' , these length units refer</del><ins>term 'sans-serif'</ins> to <del>the</del><ins>apply to a</ins> font <del>size of the parent element. Please consult the section on length units</del>for <ins>any script, although
other names may be</ins> more <del>information. The CSS</del><ins>familiar for particular scripts, such as
Gothic (Japanese), Kai (Chinese), or Pathang (Korean). Any</ins> font <del>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 font descriptors . 15.2.2 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 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 font set . Example(s): 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: BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif } 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'. 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. There are two types of font family names: <family-name> 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 whitespace should be quoted. 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. <generic-family> The following generic families are defined: 'serif', 'sans-serif', 'cursive', 'fantasy', and 'monospace'. Please see the section on generic font families for descriptions of these families. Generic font family names are keywords, and therefore must not be quoted. Authors are encouraged to offer a generic font family as a last alternative, for improved robustness. For example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Font test</TITLE> <STYLE type="text/css"> BODY { font-family: "new century schoolbook", serif } </STYLE> </HEAD> <BODY> <H1 style="font-family: 'My own font', fantasy">Test</H1> <P>What's up, Doc? </BODY> </HTML> Example(s): 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. *:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif } *:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif } This selects any element that has the given language - Japanese or Traditional Chinese - and requests the appropriate font. 15.2.3 Font styling : the 'font-style' , 'font-variant' , 'font-weight' and 'font-stretch' properties 'font-style' Value: normal | italic | oblique | inherit Initial: normal Applies to: all elements Inherited: yes Percentages: N/A Media: visual The 'font-style' property requests normal (sometimes referred to as "roman" or "upright"), italic, and oblique faces within a font family. Values have the following meanings: normal Specifies a font that is classified as 'normal' in the UA's font database. oblique 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. italic 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 Italic, Cursive , or Kursiv in their names will typically be labeled 'italic'. Example(s): 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. H1, H2, H3 { font-style: italic } H1 EM { font-style: normal } 'font-variant' Value: normal | small-caps | inherit Initial: normal Applies to: all elements Inherited: yes Percentages: N/A Media: visual 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 'font-variant' property requests such a font for bicameral (having two cases, as with Latin script). This property has no visible effect for scripts that are unicameral (having only one case, as with most of the world's writing systems). Values have the following meanings: normal Specifies a font that is not labeled as a small-caps font. small-caps 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. Example(s): The following example results in an H3 element in small-caps, with emphasized words (EM) in oblique small-caps: H3 { font-variant: small-caps } EM { font-style: oblique } Insofar as this property causes text to be transformed to uppercase, the same considerations as for 'text-transform' apply. '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 The 'font-weight' property specifies the weight of the font. Values have the following meanings: 100 to 900 These values form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. normal Same as '400'. bold Same as '700'. bolder 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'. lighter 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'. Example(s): P { font-weight: normal } /* 400 */ H1 { font-weight: 700 } /* bold */ BODY { font-weight: 400 } STRONG { font-weight: bolder } /* 500 if available */ Child elements inherit the computed value of the weight. 'font-stretch' Value: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit Initial: normal Applies to: all elements Inherited: yes Percentages: N/A Media: visual The 'font-stretch' property selects a normal, condensed, or extended face from a font family. Absolute keyword values have the following ordering, from narrowest to widest : ultra-condensed extra-condensed condensed semi-condensed normal semi-expanded expanded extra-expanded ultra-expanded 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'). 15.2.4 Font size : the 'font-size' and 'font-size-adjust' properties 'font-size' Value: <absolute-size> | <relative-size> | <length> | <percentage> | inherit Initial: medium Applies to: all elements Inherited: yes, the computed value is inherited Percentages: refer to parent element's font size Media: visual This property describes the size of the font when set solid. Values have the following meanings: <absolute-size> An <absolute-size> keyword refers to an entry in a table of font sizes computed and kept by the user agent. Possible values are: [ xx-small | x-small | small | medium | large | x-large | xx-large ] On a computer screen a scaling factor of 1.2 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. Note. In CSS1, the suggested scaling factor between adjacent indexes was 1.5 which user experience proved to be too large. <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 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. <length> A length value specifies an absolute font size (that is independent of the user agent's font table). Negative lengths are illegal. <percentage> 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. The actual value of this property may differ from the computed value due a numerical value on 'font-size-adjust' and the unavailability of certain font sizes. Child elements inherit the computed 'font-size' value (otherwise, the effect of 'font-size-adjust' would compound). Example(s): P { font-size: 12pt; } BLOCKQUOTE { font-size: larger } EM { font-size: 150% } EM { font-size: 1.5em } 'font-size-adjust' Value: <number> | none | inherit Initial: none Applies to: all elements Inherited: yes Percentages: N/A Media: visual In bicameral scripts, the subjective apparent size and legibility of a font are less dependent on their 'font-size' value than on the value of their 'x-height' , or, more usefully, on the ratio of these two values, called the aspect value (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. 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. 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: none Do not preserve the font's x-height. <number> 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: y(a/a') = c where: y = 'font-size' of first-choice font a' = aspect value of available font c = 'font-size' to apply to available font Example(s): 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. Font size adjustments take place when computing the actual value of 'font-size' . Since inheritance is based on the computed value , child elements will inherit unadjusted values. 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. The next image shows the results of 'font-size-adjust' 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 'font-size-adjust' tends to stabilize the horizontal metrics of lines, as well. 15.2.5 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: allowed on 'font-size' and 'line-height' Media: visual 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 plus 'font-stretch' and 'font-size-adjust' . 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. For reasons of backwards compatibility, it is not possible to set 'font-stretch' and 'font-size-adjust' to other than their initial values using the 'font' shorthand property; instead, set the individual properties. Example(s): 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 } 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. The first three rules do not specify the 'font-variant' and 'font-weight' 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 '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 size), the 'line-height' (120% of 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 sixth rule sets the 'font-style' , 'font-size' , and 'font-family' , the other font properties being set to their initial values. It then sets 'font-stretch' to 'condensed' since that property cannot be set to that value using the 'font' shorthand property. 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. 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. That is why this property is "almost" a shorthand property: system fonts can only be specified with this property, not with 'font-family' itself, so 'font' allows authors to do more than the sum of its subproperties. However, the individual properties such as 'font-weight' are still given values taken from the system font, which can be independently varied. Example(s): BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif } BUTTON P { font: menu } BUTTON P EM { font-weight: bolder } 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: BUTTON P { font: 600 9pt Charcoal } Because the 'font' shorthand resets to its initial value any property not explicitly given a value, this has the same effect as this declaration: BUTTON P { font-style: normal; font-variant: normal; font-weight: 600; font-size: 9pt; line-height: normal; font-family: Charcoal } 15.2.6 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. serif 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. 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, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst Hebrew fonts New Peninim, Raanana, Bitstream Cyberbit Japanese fonts Ryumin Light-KL, Kyokasho ICA, Futo Min A101 Ara
A2DC
bic fonts Bitstream Cyberbit Cherokee fonts Lo Cicero Cherokee sans-serif 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. 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 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 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 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.3 Font selection The second phase of the CSS2 font mechanism concerns the user agent's selection of a font based on author-specified font properties, available fonts, etc. The details of the font matching algorithm are provided below. There are four possible font selection actions: name matching, intelligent matching, synthesis, and download. font name matching 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. intelligent font matching 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. font synthesis 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. font download 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. Progressive rendering 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. Note. 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. 15.3.1 Font Descriptions and @font-face The font description provides the bridge between an author's font specification and the font data , 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 referenced by style sheet properties. 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. Font descriptors may be classified into three types: 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), the URI for the location of the font data, those that further characterize the font, to provide a link between the font description and the font data. All font descriptions are specified via a @font-face at-rule . The general form is: @font-face { <font-description> } where the <font-description> has the form: descriptor: value; descriptor: value; [...] descriptor: value; Each @font-face rule specifies a value for every font descriptor, either implicitly or explicitly. Those not given explicit values in the rule take the initial value listed with each descriptor in this specification. These descriptors apply solely within the context of the @font-face rule in which they are defined, and do not apply to document language elements. Thus, there is no notion of which elements the descriptors apply to, or whether the values are inherited by child elements. The available font descriptors are described in later sections of this specification. For example, here the font 'Robson Celtic' is defined and referenced in a style sheet contained in an HTML document. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Font test</TITLE> <STYLE TYPE="text/css" MEDIA="screen, print"> @font-face { font-family: "Robson Celtic"; src: url("http://site/fonts/rob-celt") } H1 { font-family: "Robson Celtic", serif } </STYLE> </HEAD> <BODY> <H1> This heading is displayed using Robson Celtic</H1> </BODY> </HTML> The style sheet (in the STYLE element) contains a CSS rule that sets all H1 elements to use the 'Robson Celtic' font family. A CSS1 implementation will search the client for a font whose family name and other properties match 'Robson Celtic' and, if it fails to find it, will use the UA-specific fallback serif font (which is defined to exist ). A user agent implementing CSS2 will first examine @font-face rules in search of a font description defining 'Robson Celtic'. This example contains a rule that matches. Although this rule doesn't contain much font data, it does have a URI where the font can be retrieved for rendering this document. Downloaded fonts should not be made available to other applications. If no matching @font-face is found, the user agent will attempt the same match as a user agent implementing CSS1. Note that if the font 'Robson Celtic' had been installed on the client system, this would have caused the UA to add an entry in the font database for the installed copy as described in the section on the font matching algorithm . The installed copy would have been matched before the downloadable font in the example above. CSS1 implementations, which do not understand the @font-face rule, will encounter the opening curly brackets and will ignore forward until the matching closing curly brackets. This at-rule conforms with the forward-compatible parsing requirement of CSS. Parsers may ignore these rules without error. Having the font descriptors separate from the font data has a benefit beyond being able to do font selection and/or substitution. The data protection and replication restrictions on the font descriptors may be much weaker than on the full font data. Thus, it may be possible to install the font definition locally, or at least to have it in a local cache if it occurs in a commonly referenced style sheet; this would not require accessing the full font definition over the Web more than once per named font. If a font descriptor is duplicated, the last occurring descriptor wins and the rest must be ignored. Also, any descriptors that are not recognized or useful to the user agent must be ignored . Future versions of CSS may allow additional descriptors for the purpose of better font substitution, matching, or synthesis. 15.3.2 Descriptors for Selecting a Font : 'font-family' , 'font-style' , 'font-variant' , 'font-weight' , 'font-stretch' and 'font-size' The following descriptors have the same names as the corresponding CSS2 font properties, and take a single value or comma-separated list of values. The values within that list are, except as explicitly noted, the same as those for the corresponding CSS2 property. If there is a single value, that is the value that must be matched. If there is a list, any list item constitutes a match. If the descriptor is omitted from the @font-face , the initial value for the descriptor is used. 'font-family' (Descriptor) Value: [ <family-name> | <generic-family> ] [, [ <family-name> | <generic-family> ]]* Initial: depends on user agent Media: visual This is the descriptor for the font family name of a font and takes the same values as the 'font-family' property. 'font-style' (Descriptor) Value: all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]* Initial: all Media: visual This is the descriptor for the style of a font and takes the same values as the 'font-style' property, except that a comma-separated list is permitted. 'font-variant' (Descriptor) Value: [normal | small-caps] [,[normal | small-caps]]* Initial: normal Media: visual This is the CSS indication of whether this face is the small-caps variant of a font. It takes the same values as the 'font-variant' property except that a comma-separated list is permitted. Note. Cyrillic pryamoĭ faces may be labeled with a 'font-variant' of small-caps, which will give better consistency with Latin faces (and the companion kursiv face labeled with 'font-style' italic for the same reason). 'font-weight' (Descriptor) Value: all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]* Initial: all Media: visual This is the descriptor for the weight of a face relative to others in the same font family. It takes the same values as the 'font-weight' property with three exceptions: relative keywords (bolder, lighter) are not permitted. a comma-separated list of values is permitted, for fonts that contain multiple weights. an additional keyword, 'all' is permitted, which means that the font will match for all possible weights; either because it contains multiple weights, or because that face only has a single weight. 'font-stretch' (Descriptor) Value: all | [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ] [, [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded] ]* Initial: normal Media: visual This is the CSS indication of the condensed or expanded nature of the face relative to others in the same font family. It takes the same values as the 'font-stretch' property except that: relative keywords (wider, narrower) are not permitted a comma-separated list is permitted The keyword 'all' is permitted 'font-size' (Descriptor) Value: all | <length> [, <length> ]* Initial: all Media: visual This is the descriptor for the sizes provided by this font. Only absolute length units are permitted, in contrast to the 'font-size' property, which allows both relative and absolute lengths and sizes. A comma-separated list of absolute lengths is permitted. The initial value of 'all' is suitable for most scalable fonts, so this descriptor is primarily for use in an @font-face for bitmap fonts, or scalable fonts designed to be rasterised at a restricted range of font sizes. 15.3.3 Descriptors for Font Data Qualification : 'unicode-range' The following descriptor is optional within a font definition, but is used to avoid checking or downloading a font that does not have sufficient glyphs to render a particular character. 'unicode-range' (Descriptor) Value: <urange> [, <urange> ]* Initial: U+0-7FFFFFFF Media: visual This is the descriptor for the range of ISO 10646 characters covered by the font. The values of <urange> are expressed using hexadecimal numbers prefixed by "U+", corresponding to character code positions in ISO 10646 ( [ISO10646] ). For example, U+05D1 is the ISO 10646 character 'Hebrew letter bet'. For values outside the Basic Multilingual Plane (BMP), additional leading digits corresponding to the plane number are added, also in hexadecimal, like this: U+A1234 which is the character on Plane 10 at hexadecimal code position 1234. At the time of writing no characters had been assigned outside the BMP. Leading zeros (for example, 0000004D) are valid, but not required. The initial value of this descriptor covers not only the entire Basic Multilingual Plane (BMP), which would be expressed as U+0-FFFF, but also the whole repertoire of ISO 10646. Thus, the initial value says that the font may have glyphs for characters anywhere in ISO 10646. Specifying a value for 'unicode-range' provides information to make searching efficient, by declaring a constrained range in which the font may have glyphs for characters. The font need not be searched for characters outside this range. Values may be written with any number of digits. For single numbers, the character '?' is assumed to mean 'any value' which creates a range of character positions. Thus, using a single number : unicode-range: U+20A7 no wild cards - it indicates a single character position (the Spanish peseta currency symbol) unicode-range: U+215? one wild card, covers the range 2150 to 215F (the fractions) unicode-range: U+00?? two wild cards, covers the range 0000 to 00FF (Latin-1) unicode-range: U+E?? two wild cards, covers 0E00 to 0EFF (the Lao script) A pair of numbers in this format can be combined with the dash character to indicate larger ranges. For example: unicode-range: U+AC00-D7FF the range is AC00 to D7FF (the Hangul Syllables area) Multiple, discontinuous ranges can be specified, separated by a comma. As with other comma-separated lists in CSS, any whitespace before or after the comma is ignored. For example: unicode-range: U+370-3FF, U+1F?? This covers the range 0370 to 03FF (Modern Greek) plus 1F00 to 1FFF (Ancient polytonic Greek). unicode-range: U+3000-303F, U+3100-312F, U+32??, U+33??, U+4E00-9FFF, U+F9000-FAFF, U+FE30-FE4F Something of a worst case in terms of verbosity, this very precisely indicates that this (extremely large) font contains only Chinese characters from ISO 10646, without including any characters that are uniquely Japanese or Korean. The range is 3000 to 303F (CJK symbols and punctuation) plus 3100 to 312F (Bopomofo) plus 3200 to 32FF (enclosed CJK letters and months) plus 3300 to 33FF (CJK compatibility zone) plus 4E00 to 9FFF (CJK unified Ideographs) plus F900 to FAFF (CJK compatibility ideographs) plus FE30 to FE4F (CJK compatibility forms). A more likely representation for a typical Chinese font would be: unicode-range: U+3000-33FF, U+4E00-9FFF unicode-range: U+11E00-121FF This font covers a proposed registration for Aztec pictograms, covering the range 1E00 to 21FF in plane 1. unicode-range: U+1A00-1A1F This font covers a proposed registration for Irish Ogham covering the range 1A00 to 1A1F 15.3.4 Descriptor for Numeric Values : 'units-per-em' The following descriptor specifies the number of "units" per em; these units may be used by several other descriptors to express various lengths, so 'units-per-em' is required if other descriptors depend on it. 'units-per-em' (Descriptor) Value: <number> Initial: undefined Media: visual This is the descriptor for the number of the coordinate units on the em square , the size of the design grid on which glyphs are laid out. 15.3.5 Descriptor for Referencing : 'src' This descriptor is required for referencing actual font data, whether downloadable or locally installed. 'src' (Descriptor) Value: [ <uri> [format( <string> [, <string> ]*)] | <font-face-name> ] [, <uri> [format( <string> [, <string> ]*)] | <font-face-name> ]* Initial: undefined Media: visual This is a prioritized, comma-separated list of external references and/or locally installed font face names. The external reference points to the font data on the Web. This is required if the WebFont is to be downloaded. The font resource may be a subset of the source font, for example it may contain only the glyphs needed for the current page or for a set of pages. The external reference consists of a URI, followed by an optional hint regarding the format of font resource to be found at that URI, and this information should be used by clients to avoid following links to fonts in formats they are unable to use. As with any hypertext reference, there may be other formats available, but the client has a better idea of what is likely to be there, in a more robust way than trying to parse filename extensions in URIs. The format hint contains a comma-separated list of format strings that denote well-known font formats. The user agent will recognize the name of font formats that it supports, and will avoid downloading fonts in formats that it does not recognize. An initial list of format strings defined by this specification and representing formats likely to be used by implementations on various platforms is: String Font Format Examples of common extensions "truedoc-pfr" TrueDoc™ Portable Font Resource .pfr "embedded-opentype" Embedded OpenType .eot "type-1" PostScript™ Type 1 .pfb, .pfa "truetype" TrueType .ttf "opentype" OpenType, including TrueType Open .ttf "truetype-gx" TrueType with GX extensions "speedo" Speedo "intellifont" Intellifont As with other URIs in CSS , the URI may be partial, in which case it is resolved relative to the location of the style sheet containing the @font-face . The locally-installed <font-face-name> is the full font name of a locally installed font. The full font name is the name of the font as reported by the operating system and is the name most likely to be used in reader style sheets, browser default style sheets or possibly author style sheets on an intranet. Adornments such as bold, italic, and underline are often used to differentiate faces within a font family. For more information about full font names please consult the notes below. The notation for a <font-face-name> is the full font name, which must be quoted since it may contain any character, including spaces and punctuation, and also must be enclosed in "local(" and ")". Example(s): src: url("http://foo/bar") a full URI and no information about the font format(s) available there src: local("BT Century 751 No. 2 Semi Bold Italic") references a particular face of a locally installed font src: url("../fonts/bar") format("truedoc-pfr") a partial URI which has a font available in TrueDoc format src: url("http://cgi-bin/bar?stuff") format("opentype", "intellifont") a full URI, in this case to a script, which can generate two different formats - OpenType and Intellifont src: local("T-26 Typeka Mix"), url("http://site/magda-extra") format("type-1") two alternatives are given, firstly a locally installed font and secondly a downloadable font available in Type 1 format. Access to locally installed fonts is via the <font-face-name> . The font face name is not truly unique, nor is it truly platform or font format independent, but at the moment it is the best way to identify locally installed font data. The use of the font face name can be made more accurate by providing an indication of the glyph complement required. This may be done by indicating the range of ISO 10646 character positions for which the font provides some glyphs (see 'unicode-range' ). 15.3.6 Descriptors for Matching : 'panose-1' , 'stemv' , 'stemh' , 'slope' , 'cap-height' , 'x-height' , 'ascent' , and 'descent' These descriptors are optional for a CSS2 definition, but may be used if intelligent font matching or font size adjustment is desired by the author. 'panose-1' (Descriptor) Value: [ <integer> ]{10} Initial: 0 0 0 0 0 0 0 0 0 0 Media: visual This is the descriptor for the Panose-1 number and consists of ten decimal integers, separated by whitespace . A comma-separated list is not permitted for this descriptor, because the Panose-1 system can indicate that a range of values are matched. The initial value is zero, which means "any", for each PANOSE digit; all fonts will match the Panose number if this value is used. Use of the Panose-1 descriptor is strongly recommended for latin fonts. For further details, see Appendix C . 'stemv' (Descriptor) Value: <number> Initial: undefined Media: visual This is the descriptor for the vertical stem width of the font. If the value is undefined, the descriptor is not used for matching. If this descriptor is used, the 'units-per-em' descriptor must also be used. 'stemh' (Descriptor) Value: <number> Initial: undefined Media: visual This is the descriptor for the horizontal stem width of the font. If the value is undefined, the descriptor is not used for matching. If this descriptor is used, the 'units-per-em' descriptor must also be used. 'slope' (Descriptor) Value: <number> Initial: 0 Media: visual This is the descriptor for the vertical stroke angle of the font. 'cap-height' (Descriptor) Value: <number> Initial: undefined Media: visual This is the descriptor for the number of the height of uppercase glyphs of the font. If the value is undefined, the descriptor is not used for matching. If this descriptor is used, the 'units-per-em' descriptor must also be used. 'x-height' (Descriptor) Value: <number> Initial: undefined Media: visual This is the descriptor for the height of lowercase glyphs of the font. If the value is undefined, the descriptor is not used for matching. If this descriptor is used, the 'units-per-em' descriptor must also be used. This descriptor can be very useful when using the 'font-size-adjust' property, because computation of the z value of candidate fonts requires both the font size and the x-height; it is therefore recommended to include this descriptor. 'ascent' (Descriptor) Value: <number> Initial: undefined Media: visual This is the descriptor for the maximum unaccented height of the font. If the value is undefined, the descriptor is not used for matching. If this descriptor is used, the 'units-per-em' descriptor must also be used. 'descent' (Descriptor) Value: <number> Initial: undefined Media: visual This is the descriptor for the Maximum unaccented depth of the font. If the value is undefined, the descriptor is not used for matching. If this descriptor is used, the 'units-per-em' descriptor must also be used. 15.3.7 Descriptors for Synthesis : 'widths' , 'bbox' and 'definition-src' Synthesizing a font means, at minimum, matching the width metrics of the specified font. Therefore, for synthesis, this metric information must be available. Similarly, progressive rendering requires width metrics in order to avoid reflow of the content when the actual font has been loaded. Although the following descriptors are optional for a CSS2 definition, some are required if synthesizing (or reflow-free progressive rendering) is desired by the author. Should the actual font become available, the substitute should be replaced by the actual font. Any of these descriptors that are present will be used to provide a better or faster approximation of the intended font. Of these descriptors, the most important are the 'widths' descriptor and 'bbox' which are used to prevent text reflow should the actual font become available. In addition, the descriptors in the set of descriptors used for matching can be used to provide a better synthesis of the actual font appearance. 'widths' (Descriptor) Value: [ <urange> ]? [ <number> ]+ [,[ <urange> ]? <number> ]+] Initial: undefined Media: visual This is the descriptor for the glyph widths . The value is a comma-separated list of <urange> values each followed by one or more glyph widths. If this descriptor is used, the 'units-per-em' descriptor must also be used. If the <urange> is omitted, a range of U+0-7FFFFFFF is assumed which covers all characters and their glyphs. If not enough glyph widths are given, the last in the list is replicated to cover that urange. If too many widths are provided, the extras are ignored. Example(s): For example: widths: U+4E00-4E1F 1736 1874 1692 widths: U+1A?? 1490, U+215? 1473 1838 1927 1684 1356 1792 1815 1848 1870 1492 1715 1745 1584 1992 1978 1770 In the first example a range of 32 characters is given, from 4E00 to 4E1F. The glyph corresponding to the first character (4E00) has a width of 1736, the second has a width of 1874 and the third, 1692. Because not enough widths have been provided, the last width replicates to cover the rest of the specified range. The second example sets a single width, 1490, for an entire range of 256 glyphs and then explicit widths for a range of 16 glyphs. This descriptor cannot describe multiple glyphs corresponding to a single character, or ligatures of multiple characters. Thus, this descriptor can only be used for scripts that do not have contextual forms or mandatory ligatures. It is nevertheless useful in those situations. Scripts that require a one-to-many or many-to-many mapping of characters to glyphs cannot at present use this descriptor to enable font synthesis although they can still use font downloading or intelligent matching. 'bbox' (Descriptor) Value: <number> , <number> , <number> , <number> Initial: undefined Media: visual This is the descriptor for the maximal bounding box of the font. The value is a comma-separated list of exactly four numbers specifying, in order, the lower left x, lower left y, upper right x, and upper right y of the bounding box for the complete font. 'definition-src' (Descriptor) Value: <uri> Initial: undefined Media: visual The font descriptors may either be within the font definition in the style sheet, or may be provided within a separate font definition resource identified by a URI. The latter approach can reduce network traffic when multiple style sheets reference the same fonts. 15.3.8 Descriptors for Alignment : 'baseline' , 'centerline' , 'mathline' , and 'topline' These optional descriptors are used to align runs of different scripts with one another. 'baseline' (Descriptor) Value: <number> Initial: 0 Media: visual This is the descriptor for the lower baseline of a font. If this descriptor is given a non-default (non-zero) value, the 'units-per-em' descriptor must also be used. 'centerline' (Descriptor) Value: <number> Initial: undefined Media: visual This is the descriptor for the central baseline of a font. If the value is undefined, the UA may employ various heuristics such as the midpoint of the ascent and descent values. If this descriptor is used, the 'units-per-em' descriptor must also be used. 'mathline' (Descriptor) Value: <number> Initial: undefined Media: visual This is the descriptor for the mathematical baseline of a font. If undefined, the UA may use the center baseline. If this descriptor is used, the 'units-per-em' descriptor must also be used. 'topline' (Descriptor) Value: <number> Initial: undefined Media: visual This is the descriptor for the top baseline of a font. If undefined, the UA may use an approximate value such as the ascent. If this descriptor is used, the 'units-per-em' descriptor must also be used. 15.3.9 Examples Example(s): Given the following list of fonts: Swiss 721 light light & light italic Swiss 721 roman, bold, italic, bold italic Swiss 721 medium medium & medium italic Swiss 721 heavy heavy & heavy italic Swiss 721 black black, black italic, & black #2 Swiss 721 Condensed roman, bold, italic, bold italic Swiss 721 Expanded roman, bold, italic, bold italic The following font descriptions could be used to make them available for download. @font-face { font-family: "Swiss 721"; src: url("swiss721lt.pfr"); /* Swiss 721 light */ font-style: normal, italic; font-weight: 200; } @font-face { font-family: "Swiss 721"; src: url("swiss721.pfr"); /* The regular Swiss 721 */ } @font-face { font-family: "Swiss 721"; src: url("swiss721md.pfr"); /* Swiss 721 medium */ font-style: normal, italic; font-weight: 500; } @font-face { font-family: "Swiss 721"; src: url("swiss721hvy.pfr"); /* Swiss 721 heavy */ font-style: normal, italic; font-weight: 700; } @font-face { font-family: "Swiss 721"; src: url("swiss721blk.pfr"); /* Swiss 721 black */ font-style: normal, italic; font-weight: 800,900; /* note the interesting problem that the 900 weight italic doesn't exist */ } @font-face { font-family: "Swiss 721"; src: url(swiss721.pfr); /* The condensed Swiss 721 */ font-stretch: condensed; } @font-face { font-family: "Swiss 721"; src: url(swiss721.pfr); /* The expanded Swiss 721 */ font-stretch: expanded; } 15.4 Font Characteristics 15.4.1 Introducing Font Characteristics In this section are listed the font characteristics that have been found useful for client-side font matching, synthesis, and download for heterogeneous platforms accessing the Web. The data may be useful for any medium that needs to use fonts on the Web by some other means than physical embedding of the font data inside the medium. These characteristics are used to characterize fonts. They are not specific to CSS, or to style sheets. In CSS, each characteristic is described by a font descriptor. These characteristics could also be mapped onto VRML nodes, or CGM Application Structures, or a Java API, or alternative style sheet languages. Fonts retrieved by one medium and stored in a proxy cache could be re-used by another medium, saving download time and network bandwidth, if a common system of font characteristics are used throughout. A non-exhaustive list of examples of such media includes: 2-D vector formats Computer Graphics Metafile Simple Vector Format 3-D graphics formats VRML 3DMF Object embedding technologies Java Active-X Obliq 15.4.2 Full font name This is the full name of a particular face of a font family. It typically includes a variety of non-standardized textual qualifiers or adornments appended to the font family name. It may also include a foundry name or abbreviation, often prepended to the font family name. It is only used to refer to locally installed fonts, because the format of the adorned name can vary from platform to platform. It must be quoted. For example, the font family name of the TrueType font and the PostScript name may differ in the use of space characters, punctuation, and in the abbreviation of some words (e.g., to meet various system or printer interpreter constraints on length of names). For example, spaces are not allow in a PostScript name, but are common in full font names. The TrueType name table can also contain the PostScript name, which has no spaces. The name of the font definition is important because it is the link to any locally installed fonts. It is important that the name be robust, both with respect to platform and application independence. For this reason, the name should be one that is not application- or language-specific. The ideal solution would be to have a name that uniquely identifies each collection of font data. This name does not exist in current practice for font data. Fonts with the same face name can vary over a number of descriptors. Some of these descriptors, such as different complements of glyphs in the font, may be insignificant if the needed glyphs are in the font. Other descriptors, such as different width metrics, make fonts with the same name incompatible. It does not seem possible to define a rule that will always identify incompatibilities, but will not prevent the use of a perfectly suitable local copy of the font data with a given name. Therefore, only the range of ISO 10646 characters will be used to qualify matches for the font face name. Since a prime goal of the font face name in the font definition is to allow a user agent to determine when there is a local copy of the specified font data, the font face name must be a name that will be in all legitimate copies of the font data. Otherwise, unnecessary Web traffic may be generated due to missed matches for the local copy. 15.4.3 Coordinate units on the em square Certain values, such as width metrics, are expressed in units that are relative to an abstract square whose height is the intended distance between lines of type in the same type size. This square is called the em square and it is the design grid on which the glyph outlines are defined. The value of this descriptor specifies how many units the EM square is divided into. Common values are for example 250 (Intellifont), 1000 (Type 1) and 2048 (TrueType, TrueType GX and OpenType). If this value is not specified, it becomes impossible to know what any font metrics mean. For example, one font has lowercase glyphs of height 450; another has smaller ones of height 890! The numbers are actually fractions; the first font has 450/1000 and the second has 890/2048 which is indeed smaller. 15.4.4 Central Baseline This gives the position in the em square of the central baseline. The central baseline is used by ideographic scripts for alignment, just as the bottom baseline is used for Latin, Greek, and Cyrillic scripts. 15.4.5 Font Encoding Either explicitly or implicitly, each font has a table associated with it, the font encoding table ,</del>that
<del>tells what character each glyph represents. This table</del>is <del>also referred to as an encoding vector . In fact, many fonts contain several glyphs for the same character. Which of those glyphs should</del><ins>so described may</ins> be used <del>depends either on the rules of the language, or on the preference of the designer. In Arabic, for example, all letters have four (or two) different shapes, depending on whether the letter is used at</del><ins>to represent</ins> the <del>start</del><ins>generic 'sans-serif'
family.</ins>
<p><ins>Examples</ins> of <del>a word, in the middle, at the end, or in isolation. It is the same character in all cases, and thus there is only one character in the source document, but when printed, it looks different each time. There are also</del>fonts that <del>leave it to the graphic designer to choose from among various alternative shapes provided. Unfortunately, CSS2 doesn't yet provide the means to select those alternatives. Currently, it is always the default shape that is chosen from such fonts. 15.4.6 Font family name</del><ins>fit</ins> this <del>specifies the family name portion of the font face name. For example, the family name for Helvetica-Bold is Helvetica and the family name of</del><ins>description include:</ins></p>
<table>
<tr><td><ins>Latin fonts</ins>
<td><ins>MS Trebuchet,</ins> ITC <del>Stone Serif Semibold Italic is</del><ins>Avant Garde Gothic, MS Arial, MS Verdana, Univers,
Futura,</ins> ITC Stone <del>Serif. Some systems treat adornments relating to condensed or expanded faces</del><ins>Sans, Gill Sans, Akzidenz Grotesk, Helvetica</ins>
<tr><td><ins>Greek fonts</ins>
<td><ins>Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek</ins>
<tr><td><ins>Cyrillic fonts</ins>
<td><ins>Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion</ins>
<tr><td><ins>Hebrew fonts</ins>
<td><ins>Arial Hebrew, MS Tahoma</ins>
<tr><td><ins>Japanese fonts</ins>
<td><ins>Shin Go, Heisei Kaku Gothic W5</ins>
<tr><td><ins>Arabic fonts</ins>
<td><ins>MS Tahoma</ins>
</table>
<h4><ins>15.3.1.3</ins> <span class="index-def" title="cursive, definition of">
<a name="cursive-def"><dfn><ins>cursive</ins></dfn></a></span></h4>
<p><ins>Glyphs in cursive fonts,</ins> as <del>if they were part of the family name. 15.4.7 Glyph widths This is a list of widths, on the design grid, for the glyph corresponding to each character.</del>the <del>list</del><ins>term</ins> is <del>ordered by ISO10646 code point. Widths cannot usefully be specified when more than one glyph maps to the same character</del><ins>used in CSS, generally have
either joining strokes</ins> or <del>when there are mandatory ligatures. 15.4.8 Horizontal stem width This value refers to the dominant stem</del><ins>other cursive characteristics beyond those</ins>
of <ins>italic typefaces.</ins> The <del>font. There may be two</del><ins>glyphs are partially</ins> or <ins>completely
connected, and the result looks</ins> more <del>designed widths.</del><ins>like handwritten pen or brush
writing than printed letterwork. Fonts</ins> for <del>example, the main vertical stems of Roman characters will differ from</del><ins>some scripts, such as
Arabic, are almost always cursive. CSS uses</ins> the <del>thin stems on serifed "M" and "N", plus there may be different widths</del><ins>term 'cursive' to
apply to a font</ins> for <del>uppercase</del><ins>any script, although other names such as Chancery,
Brush, Swing</ins> and <del>lowercase characters</del><ins>Script are also used</ins> in <del>the same font. Also, either by design or by error, all stems may have slightly different widths. 15.4.9 Height of uppercase glyphs This measurement is the y-coordinate of the top</del><ins>font names.</ins>
<p><ins>Examples</ins> of <del>flat uppercase letters in Latin, Greek, and Cyrillic scripts, measured from the baseline. This descriptor is not necessarily useful for</del>fonts that <del>do not contain any glyphs from these scripts. 15.4.10 Height of lowercase glyphs</del><ins>fit</ins> this <del>measurement is the y-coordinate of the top of unaccented, non-ascending lowercase letters in Latin, Greek and</del><ins>description include:</ins></p>
<table>
<tr><td><ins>Latin fonts</ins>
<td><ins>Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand,
Zapf-Chancery</ins>
<tr><td>Cyrillic <del>scripts, measured from the baseline. Flat-topped letters are used, ignoring any optical correction zone. This is usually used</del><ins>fonts</ins>
<td><ins>ER Architekt</ins>
<tr><td><ins>Hebrew fonts</ins>
<td><ins>Corsiva</ins>
<tr><td><ins>Arabic fonts</ins>
<td><ins>DecoType Naskh, Monotype Urdu 507</ins>
</table>
<h4><ins>15.3.1.4</ins> <span class="index-def" title="fantasy, definition of">
<a name="fantasy-def"><dfn><ins>fantasy</ins></dfn></a></span></h4>
<p><ins>Fantasy fonts,</ins> as <del>a ratio</del><ins>used in CSS, are primarily decorative while
still containing representations</ins> of <del>lowercase to uppercase heights as a means</del><ins>characters (as opposed</ins> to <del>compare font families. This descriptor is not useful for fonts that</del><ins>Pi or
Picture fonts, which</ins> do not <del>contain any glyphs from these scripts. Since</del><ins>represent characters). Examples include:</ins></p>
<table>
<tr><td><ins>Latin fonts</ins>
<td><ins>Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz</ins>
</table>
<h4><ins>15.3.1.5</ins> <span class="index-def" title="monospace, definition of">
<a name="monospace-def"><dfn><ins>monospace</ins></dfn></a></span></h4>
<p>The <del>heights</del><ins>sole criterion</ins> of <del>lowercase and uppercase letters are often expressed as</del>a <del>ratio for comparing different fonts, it may be useful to set both the lowercase and uppercase heights to</del><ins>monospace font is that all glyphs have</ins> the same <del>value for unicameral scripts</del><ins>fixed width. (This can make some scripts,</ins>
such as <del>Hebrew, where for mixed Latin and Hebrew text, the Hebrew characters are typically set at a height midway between the uppercase and lowercase heights of the Latin font. 15.4.11 Lower Baseline This gives the position in the em square of the lower baseline.</del><ins>Arabic, look most peculiar.)</ins> The <del>lower baseline</del><ins>effect</ins> is <del>used by Latin, Greek,</del><ins>similar to a manual
typewriter,</ins> and <del>Cyrillic scripts for alignment, just as the upper baseline</del>is <ins>often</ins> used <del>for Sanscrit-derived scripts. 15.4.12 Mathematical Baseline This gives the position in the em square</del><ins>to set samples</ins> of <del>the mathematical baseline. The mathematical baseline is used by mathematical symbols for alignment, just as the lower baseline is used for Latin, Greek, and</del><ins>computer code.</ins>
<p><ins>Examples of fonts which fit this description include:</ins>
<table>
<tr><td><ins>Latin fonts</ins>
<td><ins>Courier, MS Courier New, Prestige, Everson Mono</ins>
<tr><td><ins>Greek Fonts</ins>
<td><ins>MS Courier New, Everson Mono</ins>
<tr><td>Cyrillic <del>scripts. 15.4.13 Maximal bounding box The maximal bounding box is the smallest rectangle enclosing</del><ins>fonts</ins>
<td><ins>ER Kurier, Everson Mono</ins>
<tr><td><ins>Japanese fonts</ins>
<td><ins>Osaka Monospaced</ins>
<tr><td><ins>Cherokee fonts</ins>
<td><ins>Everson Mono</ins>
</table>
<h2><ins>15.4</ins> <a name="font-styling"><ins>Font styling</ins></a><ins>:</ins> the
<a href="fonts.html#propdef-font-style" class="noxref"><span class="propinst-font-style"> <del>shape that results if</del><ins>'font-style'</ins></span></a> <ins>property</ins></h2>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-style'"><a name="propdef-font-style" class="propdef-title"><strong><ins>'font-style'</ins></strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em><ins>Value:</ins></em><ins> </ins><td><ins>normal | italic | oblique |</ins> <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit"><ins>inherit</ins></span></a>
<tr valign=baseline><td><em><ins>Initial:</ins></em><ins> </ins><td><ins>normal</ins>
<tr valign=baseline><td><em><ins>Applies to:</ins></em><ins> </ins><td>all <del>glyphs in</del><ins>elements</ins>
<tr valign=baseline><td><em><ins>Inherited:</ins></em><ins> </ins><td><ins>yes</ins>
<tr valign=baseline><td><em><ins>Percentages:</ins></em><ins> </ins><td><ins>N/A</ins>
<tr valign=baseline><td><em><ins>Media:</ins></em><ins> </ins><td><a href="media.html#visual-media-group" class="noxref"><ins>visual</ins></a>
<tr valign=baseline><td><em><ins>Computed value:</ins></em><ins> </ins><td><ins>as specified</ins>
</table>
</dl>
</div>
<p>The <del>font are
F415
placed with their origins coincident,</del><ins>'font-style' property selects between normal (sometimes
referred to as "roman" or "upright"), italic</ins> and <del>then painted. If</del><ins>oblique faces within</ins>
a <del>dynamically downloadable</del>font <del>has been generated by subsetting</del><ins>family.</ins>
</p>
<p>A <del>parent font, the bbox should be that</del><ins>value</ins> of <del>the parent font. 15.4.14 Maximum unaccented height This measurement, on the em square, is from the baseline to the highest point reached by any glyph, excluding any accents or diacritical marks. 15.4.15 Maximum unaccented depth This measurement, on the em square,</del><ins>'normal' selects a font that</ins> is <del>from the baseline to</del><ins>classified as 'normal'
in</ins> the <del>lowest point reached by any glyph, excluding any accents or diacritical marks. 15.4.16 Panose-1 number Panose-1 is an industry standard TrueType</del><ins>UA's</ins> font <del>classification and matching technology. The PANOSE system consists of</del><ins>database, while 'oblique' selects</ins> a <del>set of ten numbers</del><ins>font</ins> that <del>categorize the key attributes of</del><ins>is
labeled 'oblique'.</ins> A <del>Latin typeface,</del><ins>value of 'italic' selects</ins> a <del>classification procedure for creating those numbers, and Mapper software</del><ins>font that is labeled
'italic', or, if</ins> that <del>determines</del><ins>is not available, one labeled 'oblique'.</ins>
</p>
<p>The <del>closest possible</del>font <del>match given a set of typefaces.</del><ins>that is labeled 'oblique' in</ins> the <del>system could ,</del><ins>UA's font database may
actually have been generated by electronically slanting a normal font.</ins>
</p>
<p><ins>Fonts</ins> with <del>modification, also</del><ins>Oblique, Slanted or Incline in their names will
typically</ins> be <del>used for Greek and Cyrillic, but is not suitable for unicameral and ideographic scripts (Hebrew, Armenian, Arabic, Chinese/Japanese/Korean). 15.4.17 Range of ISO 10646 characters This indicates the glyph repertoire of</del><ins>labeled 'oblique' in</ins> the <del>font, relative to ISO 10646 (Unicode). Since this is sparse (most</del><ins>UA's font database.</ins> Fonts <del>do not cover the whole of ISO 10646) this descriptor lists blocks</del><ins>with</ins>
<em><ins>Italic, Cursive</ins></em> or <em> <del>ranges that do have some coverage (no promise is made</del><ins>Kursiv</ins></em> <ins>in their names will
typically be labeled 'italic'.</ins>
</p>
<pre>
<ins>h1, h2, h3 { font-style: italic }
h1 em { font-style: normal }</ins>
</pre>
<p><ins>In the example above, emphasized text within 'H1' will appear in a
normal face.</ins>
</p>
<h2><ins>15.5</ins> <a name="small-caps"><ins>Small-caps</ins></a><ins>: the</ins>
<a href="fonts.html#propdef-font-variant" class="noxref"><span class="propinst-font-variant"><ins>'font-variant'</ins></span></a> <ins>property</ins></h2>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-variant'"><a name="propdef-font-variant" class="propdef-title"><strong><ins>'font-variant'</ins></strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em><ins>Value:</ins></em><ins> </ins><td><ins>normal | small-caps |</ins> <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit"><ins>inherit</ins></span></a>
<tr valign=baseline><td><em><ins>Initial:</ins></em><ins> </ins><td><ins>normal</ins>
<tr valign=baseline><td><em><ins>Applies to:</ins></em><ins> </ins><td><ins>all elements</ins>
<tr valign=baseline><td><em><ins>Inherited:</ins></em><ins> </ins><td><ins>yes</ins>
<tr valign=baseline><td><em><ins>Percentages:</ins></em><ins> </ins><td><ins>N/A</ins>
<tr valign=baseline><td><em><ins>Media:</ins></em><ins> </ins><td><a href="media.html#visual-media-group" class="noxref"><ins>visual</ins></a>
<tr valign=baseline><td><em><ins>Computed value:</ins></em><ins> </ins><td><ins>as specified</ins>
</table>
</dl>
</div>
<p><ins>Another type</ins> of <del>complete coverage) and is used to eliminate unsuitable fonts (ones that will not have the required glyphs). It does not indicate that the</del><ins>variation within a</ins> font <del>definitely has the required glyphs, only that it</del><ins>family</ins> is <del>worth downloading and looking at</del>the <del>font. See [ISO10646] for information about useful documents. This method is extensible to future allocation of characters</del><ins>small-caps.</ins>
In <del>Unicode, without change of syntax and without invalidating existing content.</del><ins>a small-caps</ins> font <del>formats that do not include this information, explicitly or indirectly, may still use this characteristic, but the value must be supplied by</del>the <del>document or style sheet author. There are other classifications into scripts, such as</del><ins>lower case letters look similar to</ins> the
<del>Monotype system (see [MONOTYPE] ) and</del><ins>uppercase ones, but in</ins> a <del>proposed ISO script system. These are not readily extensible. Because of this, classification of glyph repertoires by</del><ins>smaller size and with slightly different
proportions.</ins> The <del>range of ISO 10646 characters</del><ins>'font-variant' property selects</ins> that <del>may be represented with</del><ins>font.</ins>
</p>
<p><ins>A value of 'normal' selects</ins> a <del>particular</del>font <ins>that</ins> is <del>used in this specification. This system</del><ins>not a small-caps font,
'small-caps' selects a small-caps font. It</ins> is <del>extensible to cover any future allocation. 15.4.18 Top Baseline This gives the position</del><ins>acceptable (but not
required)</ins> in <ins>CSS 2.1 if</ins> the <del>em square of the top baseline. The top baseline</del><ins>small-caps font</ins> is <del>used</del><ins>a created</ins> by <del>Sanscrit-derived scripts for alignment, just as the bottom baseline is used for Latin, Greek, and Cyrillic scripts. 15.4.19 Vertical stem width This is the width of vertical (or near-vertical) stems of glyphs. This information is often tied to hinting, and may not be directly accessible in some</del><ins>taking a
normal</ins> font <del>formats.</del><ins>and replacing</ins> the <del>measurement should</del><ins>lower case letters by scaled uppercase
characters. As a last resort, uppercase letters will</ins> be <ins>used as
replacement</ins> for <ins>a small-caps font.</ins>
</p>
<p>The <del>dominant vertical stem</del><ins>following example results</ins> in <del>the font because there might be different groupings of vertical stems (e.g., one main one, and one lighter weight one as for</del>an <del>uppercase M or N). 15.4.20 Vertical stroke angle This is the angle,</del><ins>'H3' element in small-caps,
with any emphasized words in oblique, and any emphasized words within
an 'H3' oblique small-caps:</ins>
</p>
<pre>
<ins>h3 { font-variant: small-caps }
em { font-style: oblique }</ins>
</pre>
<p><ins>There may be other variants</ins> in <del>degrees counterclockwise from the vertical, of the dominant vertical strokes of the font.</del>the <del>value is negative for</del><ins>font family as well, such as</ins>
fonts <ins>with old-style numerals, small-caps numerals, condensed or
expanded letters, etc. CSS 2.1 has no properties</ins> that <del>slope to the right,</del><ins>select those.</ins>
</p>
<p><em><ins>Note:</ins></em> <ins>insofar</ins> as <del>almost all italic fonts do.</del>this <del>descriptor may also</del><ins>property causes text to</ins> be
<del>specified for oblique fonts, slanted fonts, script fonts, and in general</del><ins>transformed to uppercase, the same considerations as</ins> for <a href="text.html#propdef-text-transform" class="noxref"><span
class="propinst-text-transform"> <del>any font whose vertical strokes are not precisely vertical. A non-zero value does not of itself indicate an italic font. 15.5</del><ins>'text-transform'</ins></span></a> <ins>apply.</ins>
</p>
<h2><ins>15.6</ins> <a name="font-boldness">Font <del>matching algorithm This specification extends</del><ins>boldness</ins></a><ins>:</ins> the
<a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight"> <del>algorithm given in</del><ins>'font-weight'</ins></span></a> <ins>property</ins></h2>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-weight'"><a name="propdef-font-weight" class="propdef-title"><strong><ins>'font-weight'</ins></strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em><ins>Value:</ins></em><ins> </ins><td><ins>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 |
600 | 700 | 800 | 900 |</ins> <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit"><ins>inherit</ins></span></a>
<tr valign=baseline><td><em><ins>Initial:</ins></em><ins> </ins><td><ins>normal</ins>
<tr valign=baseline><td><em><ins>Applies to:</ins></em><ins> </ins><td><ins>all elements</ins>
<tr valign=baseline><td><em><ins>Inherited:</ins></em><ins> </ins><td><ins>yes</ins>
<tr valign=baseline><td><em><ins>Percentages:</ins></em><ins> </ins><td><ins>N/A</ins>
<tr valign=baseline><td><em><ins>Media:</ins></em><ins> </ins><td><a href="media.html#visual-media-group" class="noxref"><ins>visual</ins></a>
<tr valign=baseline><td><em><ins>Computed value:</ins></em><ins> </ins><td><ins>see text</ins>
</table>
</dl>
</div>
<p>The <del>CSS1 specification. This algorithm reduces down to</del><ins>'font-weight' property selects</ins> the <del>algorithm in</del><ins>weight of</ins> the <del>CSS1 specification when</del><ins>font.</ins> The
<del>author and reader style sheets do not contain any @font-face rules. Matching of descriptors</del><ins>values '100'</ins> to <del>font faces must be done carefully. The descriptors are matched in</del><ins>'900' form an ordered sequence, where each number
indicates</ins> a <del>well-defined order to insure</del><ins>weight</ins> that <del>the results of this matching process are</del><ins>is at least</ins> as <del>consistent</del><ins>dark</ins> as <del>possible across UAs (assuming that</del><ins>its predecessor.</ins> The
<del>same library of font faces</del><ins>keyword 'normal' is synonymous with '400',</ins> and <del>font descriptions</del><ins>'bold'</ins> is <del>presented</del><ins>synonymous
with '700'. Keywords other than 'normal' and 'bold' have been shown</ins> to
<del>each of them). This algorithm may</del>be <del>optimized, provided that an implementation behaves as if</del><ins>often confused with font names and a numerical scale was therefore
chosen for the 9-value list.</ins>
</p>
<pre>
<ins>p { font-weight: normal } /* 400 */
h1 { font-weight: 700 } /* bold */</ins>
</pre>
<p>The <del>algorithm had been followed exactly.</del><ins>'bolder' and 'lighter' values select font weights that are
relative to</ins> the <del>user agent makes (or accesses) a database of relevant font-face descriptors of all</del><ins>weight inherited from</ins> the <ins>parent:</ins>
</p>
<pre>
<ins>strong { font-weight: bolder }</ins>
</pre>
<p>Fonts <del>of which the UA is aware. If there</del><ins>(the font data) typically have one or more properties whose
values</ins> are <del>two fonts with exactly</del><ins>names that are descriptive of</ins> the <del>same descriptors, one</del><ins>"weight"</ins> of <del>them</del><ins>a font. There</ins>
is <del>ignored. The UA may be aware</del><ins>no accepted, universal meaning to these weight names. Their primary
role is to distinguish faces</ins> of <ins>differing darkness within</ins> a <ins>single</ins>
font <del>because: it has been installed locally it</del><ins>family. Usage across font families</ins> is <del>declared using an @font-face rule in</del><ins>quite variant; for example,
a font that</ins> one <ins>might think</ins> of <del>the style sheets linked to</del><ins>as being bold might be described as
being</ins> <em><ins>Regular, Roman, Book, Medium, Semi-</ins></em> or <em> <del>contained in</del><ins>DemiBold,
Bold,</ins></em> <ins>or</ins> <em><ins>Black,</ins></em> <ins>depending on how black</ins> the <del>current document it is used in</del><ins>"normal" face
of</ins> the <del>UA default style sheet, which conceptually exists in all UAs and</del><ins>font</ins> is <del>considered to have full @font-face rules for all fonts which</del><ins>within</ins> the <del>UA will use for default presentation, plus @font-face rules for</del><ins>design. Because there is no standard usage
of names,</ins> the <del>five special generic font families (see 'font-family' ) defined</del><ins>weight property values</ins> in <del>CSS2 At a</del><ins>CSS 2.1 are</ins> given <del>element and for each character</del><ins>on a numerical
scale</ins> in <del>that element, the UA assembles</del><ins>which</ins> the <del>font properties applicable</del><ins>value '400' (or 'normal') corresponds</ins> to <del>that element. Using the complete set of properties, the UA uses</del>the
<del>'font-family' descriptor to choose a tentative font</del><ins>"normal" text face for that</ins> family. <del>Thus, matching on a family</del><ins>The weight</ins> name <ins>associated with
that face</ins> will <del>succeed before matching on some other descriptor. The remaining properties are tested against</del><ins>typically be</ins> <em><ins>Book, Regular, Roman, Normal</ins></em> <ins>or
sometimes</ins> <em><ins>Medium</ins></em><ins>.</ins>
</p>
<p>The <ins>association of other weights within a</ins> family <del>according</del>to the <del>matching criteria described with each descriptor. If there are matches for all</del><ins>numerical
weight values is intended only to preserve</ins> the <del>remaining properties, then</del><ins>ordering of darkness
within</ins> that <del>is</del><ins>family. However,</ins> the <del>matching font face for</del><ins>following heuristics tell how</ins> the
<del>given element. If there</del><ins>assignment</ins> is <del>no matching font face within</del><ins>done in this case:</ins>
<ul>
<li><ins>If</ins> the <del>'font-family' being processed by step 2, UAs that implement intelligent matching may proceed to examine other descriptors such as x-height, glyph widths, and panose-1 to identify</del><ins>font family already uses</ins> a <del>different tentative</del><ins>numerical scale with nine values
(like e.g.,</ins> <em><ins>OpenType</ins></em> <ins>does), the</ins> font <del>family.</del><ins>weights should be mapped
directly.</ins>
<li>If there <del>are matches for all the remaining descriptors, then that</del>is <del>the matching font</del><ins>both a</ins> face <del>for the given element.</del><ins>labeled</ins> <em><ins>Medium</ins></em> <ins>and one labeled</ins>
<em><ins>Book, Regular, Roman</ins></em> <ins>or</ins> <em><ins>Normal,</ins></em> <ins>then</ins> the
<em> <del>'font-family' descriptor that</del><ins>Medium</ins></em> is <del>reflected into</del><ins>normally assigned to</ins> the <del>CSS2 properties is</del><ins>'500'.</ins>
<li>The font <del>family that was requested, not whatever name</del><ins>labeled "Bold" will often correspond to the weight value '700'.</ins>
</ul>
<p><ins>Once</ins> the <del>intelligently matched</del>font <del>may have. UAs that do not implement intelligent matching</del><ins>family's weights</ins> are <del>considered to fail at this step.</del><ins>mapped onto the CSS scale,
missing weights are selected as follows:</ins>
<ul>
<li>If <del>there</del><ins>the desired weight</ins> is <del>no matching font face within</del><ins>less than 400, weights below</ins> the <del>'font-family' being processed</del><ins>desired
weight are checked in descending order followed</ins> by <del>step 3, UAs that implement font downloading may proceed to examine</del><ins>weights above</ins> the
<del>'src' descriptor of</del><ins>desired weight in ascending order until a match is found.</ins>
<li><ins>If</ins> the <del>tentative font face identified</del><ins>desired weight is greater than 500, weights above desired
weight are checked</ins> in <del>step 2 or 3 to identify</del><ins>ascending order followed by weights below the
desired weight in descending order until</ins> a <del>network resource that</del><ins>match</ins> is <del>available, and of the correct format.</del><ins>found.</ins>
<li>If <del>there are matches for all</del>the <del>remaining descriptors, then that</del><ins>desired weight is 400, 500</ins> is <ins>checked first and then</ins> the
<del>matching font face</del><ins>rule</ins> for <ins>desired weights less than 400 is used.</ins>
<li><ins>If</ins> the <del>given element</del><ins>desired weight is 500, 400 is checked first</ins> and <ins>then</ins> the
<del>UA may attempt to download this font resource. The UA may choose to block on this download or may choose to proceed to</del><ins>rule for desired weights less than 400 is used.</ins>
</ul>
<p>The <del>next step while</del><ins>following two examples show typical mappings.</ins></p>
<div class="html-example">
<p><ins>Assume four weights in</ins> the <del>font downloads. UAs that do not implement font download, or are not connected</del><ins>"Rattlesnake" family, from lightest</ins> to
<del>a network, or where the user preferences have disabled font download, or where</del><ins>darkest:</ins> <em><ins>Regular, Medium, Bold, Heavy.</ins></em></p>
<table border=1 summary="Example of font-weight mapping">
<caption><ins>First example of font-weight mapping</ins></caption>
<thead>
<tr><th><ins>Available faces</ins> </th><th><ins>Assignments</ins> </th><th><ins>Filling</ins> the <del>requested resource is unavailable for whatever reason, or where</del><ins>holes</ins></th></tr>
</thead>
<tr><td><ins>"Rattlesnake Regular"</ins></td><td> <ins>400</ins> </td><td> <ins>100, 200, 300</ins></td></tr>
<tr><td><ins>"Rattlesnake Medium"</ins> </td><td> <ins>500</ins> </td><td><ins> </ins></td></tr>
<tr><td><ins>"Rattlesnake Bold"</ins> </td><td> <ins>700</ins> </td><td> <ins>600</ins></td></tr>
<tr><td><ins>"Rattlesnake Heavy"</ins> </td><td> <ins>800</ins> </td><td> <ins>900</ins></td></tr>
</table>
</div>
<div class="html-example">
<p><ins>Assume six weights in</ins> the
<del>downloaded font cannot be used for whatever reason, are considered to fail at</del><ins>"Ice Prawn" family:</ins> <em><ins>Book, Medium, Bold, Heavy, Black,
ExtraBlack.</ins></em> <ins>Note that in</ins> this <del>step. If there is no matching font face within</del><ins>instance</ins> the <del>'font-family' being processed by step 3, UAs that implement font synthesis may proceed to examine other descriptors such as 'x-height' , glyph widths, and 'panose-1'</del><ins>user agent
has decided</ins> <em><ins>not</ins></em> to <del>identify</del><ins>assign</ins> a <del>different tentative font family for synthesis. If there are matches for all the remaining descriptors, then that is the matching font face fo
8096
r</del><ins>numeric
value to "Ice Prawn ExtraBlack".</ins></p>
<table border=1 summary="Example of font-weight mapping. Note
that ExtraBlack is not mapped to a value.">
<caption><ins>Second example of font-weight mapping</ins></caption>
<thead>
<tr><th><ins>Available faces</ins> </th><th><ins>Assignments</ins> </th><th><ins>Filling</ins> the <del>given element and synthesis</del><ins>holes</ins></th></tr>
</thead>
<tr><td><ins>"Ice Prawn Book"</ins> </td><td> <ins>400</ins> </td><td> <ins>100, 200, 300</ins></td></tr>
<tr><td><ins>"Ice Prawn Medium"</ins></td><td> <ins>500</ins> </td><td><ins> </ins></td></tr>
<tr><td><ins>"Ice Prawn Bold"</ins> </td><td> <ins>700</ins> </td><td> <ins>600</ins></td></tr>
<tr><td><ins>"Ice Prawn Heavy"</ins> </td><td> <ins>800</ins> </td><td><ins> </ins></td></tr>
<tr><td><ins>"Ice Prawn Black"</ins> </td><td> <ins>900</ins> </td><td><ins> </ins></td></tr>
<tr><td><ins>"Ice Prawn ExtraBlack"</ins></td><td> <ins>(none)</ins> </td><td><ins> </ins></td></tr>
</table>
</div>
<p><ins>Values</ins> of <del>the faux font may begin. UAs that do not implement font synthesis are considered</del><ins>'bolder' and 'lighter' indicate values relative</ins> to <del>fail at this step. If all</del><ins>the
weight</ins> of <del>steps 3, 4 and 5 fail, and if there is a next alternative 'font-family' in</del>the <del>font set, then repeat from step 2 with</del><ins>parent element. Based on</ins> the <del>next alternative 'font-family' . If there is a matching font face, but it doesn't contain glyph(s) for</del><ins>inherited weight value,</ins>
the <del>current character(s), and if there</del><ins>weight used</ins> is <del>a next alternative 'font-family' in the font sets, then repeat from step 2 with</del><ins>calculated using</ins> the <del>next alternative 'font-family' .</del><ins>chart below. Child elements
inherit</ins> the <del>'unicode-range' descriptor may be used to rapidly eliminate from consideration those font faces that do</del><ins>calculated weight,</ins> not <del>have the correct glyphs. If the 'unicode-range' descriptor indicates that</del>a <del>font contains some glyphs in</del><ins>value of 'bolder' or 'lighter'.</ins>
<table summary="The keywords bolder and lighter stand for a specific
weight as a function of the inherited weight, as defined by this
table.">
<caption>The <del>correct range, it may be examined by</del><ins>meaning of 'bolder' and 'lighter'</ins></caption>
<thead>
<tr><th><ins>Inherited value</ins> <th><ins>bolder</ins> <th><ins>lighter</ins>
<tbody>
<tr><td><ins>100</ins> <td><ins>400</ins> <td><ins>100</ins>
<tr><td><ins>200</ins> <td><ins>400</ins> <td><ins>100</ins>
<tr><td><ins>300</ins> <td><ins>400</ins> <td><ins>100</ins>
<tr><td><ins>400</ins> <td><ins>700</ins> <td><ins>100</ins>
<tr><td><ins>500</ins> <td><ins>700</ins> <td><ins>100</ins>
<tr><td><ins>600</ins> <td><ins>900</ins> <td><ins>400</ins>
<tr><td><ins>700</ins> <td><ins>900</ins> <td><ins>400</ins>
<tr><td><ins>800</ins> <td><ins>900</ins> <td><ins>700</ins>
<tr><td><ins>900</ins> <td><ins>900</ins> <td><ins>700</ins>
</table>
<p>The <del>UA to see if it has that particular one. If there</del><ins>table above</ins> is <del>no font within the family selected in 2, then use</del><ins>equivalent to selecting</ins> the <del>inherited</del><ins>next relative bolder</ins>
or <del>UA-dependent 'font-family' value</del><ins>lighter face, given a font family containing normal</ins> and <del>repeat from step 2, using the best match that can be obtained within this font. If</del><ins>bold faces
along with</ins> a <del>particular character cannot be displayed using this font,</del><ins>thin and a heavy face. Authors who desire finer control
over</ins> the <del>UA</del><ins>exact weight values used for a given element</ins> should <del>indicate</del><ins>use
numerical values instead of relative weights.</ins>
<p><ins>There is no guarantee</ins> that <ins>there will be</ins> a <del>character is not being displayed (for example, using</del><ins>darker face for each of</ins>
the <del>'missing character' glyph). UAs that implement progressive rendering</del><ins>'font-weight' values; for example, some fonts may have only a
normal</ins> and <ins>a bold face, while others may</ins> have <del>pending font downloads may, once download</del><ins>eight face weights.
There</ins> is <del>successful, use the downloaded font as</del><ins>no guarantee on how</ins> a <ins>UA will map</ins> font <del>family. If</del><ins>faces within a family
to weight values.</ins> The <del>downloaded font</del><ins>only guarantee</ins> is <del>missing some glyphs</del>that <ins>a face of a given value
will be no less dark than</ins> the <del>temporary progressive</del><ins>faces of lighter values.</ins>
</p>
<h2><ins>15.7</ins> <a name="font-size-props">Font <del>did contain,</del><ins>size</ins></a><ins>:</ins> the <a href="fonts.html#propdef-font-size" class="noxref"><span
class="propinst-font-size"> <del>downloaded</del><ins>'font-size'</ins></span></a>
<ins>property</ins></h2>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-size'"><a name="propdef-font-size" class="propdef-title"><strong><ins>'font-size'</ins></strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em><ins>Value:</ins></em><ins> </ins><td><a href="fonts.html#value-def-absolute-size" class="noxref"><span class="value-inst-absolute-size"><ins><absolute-size></ins></span></a> <ins>|</ins> <a href="fonts.html#value-def-relative-size" class="noxref"><span class="value-inst-relative-size"><ins><relative-size></ins></span></a> <ins>|</ins> <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><ins><length></ins></span></a> <ins>|</ins> <a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><ins><percentage></ins></span></a> <ins>|</ins> <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit"><ins>inherit</ins></span></a>
<tr valign=baseline><td><em><ins>Initial:</ins></em><ins> </ins><td><ins>medium</ins>
<tr valign=baseline><td><em><ins>Applies to:</ins></em><ins> </ins><td><ins>all elements</ins>
<tr valign=baseline><td><em><ins>Inherited:</ins></em><ins> </ins><td><ins>yes</ins>
<tr valign=baseline><td><em><ins>Percentages:</ins></em><ins> </ins><td><ins>refer to inherited</ins> font <del>is not used for that character and</del><ins>size</ins>
<tr valign=baseline><td><em><ins>Media:</ins></em><ins> </ins><td><a href="media.html#visual-media-group" class="noxref"><ins>visual</ins></a>
<tr valign=baseline><td><em><ins>Computed value:</ins></em><ins> </ins><td><ins>absolute length</ins>
</table>
</dl>
</div>
<p>The <del>temporary</del>font <del>continues to be used. Note. The above algorithm can be optimized to avoid having</del><ins>size corresponds</ins> to <del>revisit the CSS2 properties for each character.</del>the <del>per-descriptor matching rules from (2) above are as follows: 'font-style' is tried first. 'italic' will be satisfied if there is either</del><ins>em square,</ins> a <del>face</del><ins>concept used</ins> in <ins>typography.
Note that certain glyphs may bleed outside their em squares. Values
have</ins> the <del>UA's font database labeled with the CSS</del><ins>following meanings:</ins></p>
<dl>
<dt><b><a name="value-def-absolute-size"><ins><absolute-size></ins></a></b>
</dt>
<dd><ins>An <absolute-size></ins> keyword <del>'italic' (preferred) or 'oblique'. Otherwise</del><ins>is an index to a table of font
sizes computed and kept by</ins> the <ins>UA. Possible</ins> values <del>must be matched exactly or font-style will fail. 'font-variant'</del><ins>are:</ins>
<p> <ins>[ xx-small | x-small | small | medium | large | x-large | xx-large ]</ins></p>
<p><ins>The following table provides user agent guidelines for the absolute-size
mapping to HTML heading and absolute font-sizes. The 'medium' value</ins> is
<del>tried next. 'normal' matches a font not labeled as 'small-caps'; 'small-caps' matches (1) a</del><ins>the user's preferred</ins> font <del>labeled</del><ins>size and is used</ins> as <del>'small-caps', (2) a font in which</del>the <ins>reference middle value.</ins></p>
<table border="1" style="border-collapse: collapse" width="73%" id="AutoNumber2">
<tr>
<th style="width:16%"><ins>CSS absolute-size values</ins></th>
<td style="width:12%"><ins>xx-small</ins></td>
<td style="width:9%"><ins>x-small</ins></td>
<td style="width:10%">small</td>
<td style="width:11%"> <del>caps are synthesized, or (3) a</del><ins>medium</ins></td>
<td style="width:11%"><ins>large</ins></td>
<td style="width:12%"><ins>x-large</ins></td>
<td style="width:11%"><ins>xx-large</ins></td>
<td style="width:8%"><ins> </ins></td>
</tr>
<tr>
<th><ins>HTML</ins> font <del>where all lowercase letters are replaced by uppercase letters.</del><ins>sizes</ins></th>
<td><ins>1</ins></td>
<td><ins> </ins></td>
<td><ins>2</ins></td>
<td><ins>3</ins></td>
<td><ins>4</ins></td>
<td><ins>5</ins></td>
<td><ins>6</ins></td>
<td><ins>7</ins></td>
</tr>
</table>
<p><ins>Implementors should build</ins> a <del>small-caps</del><ins>table of scaling factors for absolute-size keywords relative to the 'medium'</ins> font <ins>size and the particular device and its characteristics (e.g., the resolution of the device).</ins>
</p>
<p>
<ins>Different media</ins> may <del>be synthesized by electronically</del><ins>need different</ins> scaling <del>uppercase letters from a normal font. 'font-weight' is matched next, it will never fail. (See 'font-weight' below.) 'font-size' must be matched within a UA-dependent margin</del><ins>factors. Also, the UA
should take the quality and availability</ins> of <del>tolerance. (Typically, sizes for scalable</del>fonts <del>are rounded to</del><ins>into account when
computing</ins> the <del>nearest whole pixel, while</del><ins>table.</ins> The <del>tolerance for bitmapped fonts could</del><ins>table may</ins> be <del>as large as 20%.) Further computations, e.g., by 'em' values</del><ins>different from one font family
to another.</ins>
</p>
<p class="note"><em><strong><ins>Note 1.</ins></strong> <ins>To preserve readability, a UA applying
these guidelines should nevertheless avoid creating font-size resulting</ins>
in <del>other properties, are based</del><ins>less than 9 pixels per EM unit</ins> on <ins>a computer display.</ins></em></p>
<p class="note"><em><strong><ins>Note 2.</ins></strong> <ins>In CSS1,</ins> the <del>'font-size' value</del><ins>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</ins>
that <ins>a fixed ratio between adjacent absolute-size keywords is
problematic, and this specification does</ins> <em><ins>not</ins></em> <ins>recommend such a
fixed ratio.</ins></em></p>
</dd>
<dt><b><a name="value-def-relative-size"><ins><relative-size></ins></a></b>
</dt>
<dd><ins>A <relative-size> keyword</ins> is <del>used, not</del><ins>interpreted relative to</ins> the
<del>one that is specified. 15.5.1 Mapping</del><ins>table of</ins> font <del>weight values to</del><ins>sizes and the</ins> font <del>names</del><ins>size of</ins> the <del>'font-weight' property</del><ins>parent element. Possible</ins>
values <del>are given on a numerical scale in which the value '400' (or 'normal') corresponds to the "normal" text face</del><ins>are: [ larger | smaller ].</ins> For <del>that family.</del><ins>example, if</ins> the <del>weight name associated with that face</del><ins>parent element
has a font size of 'medium', a value of 'larger'</ins> will <del>typically be Book, Regular, Roman, Normal or sometimes Medium .</del><ins>make</ins> the <del>association</del><ins>font
size</ins> of <del>other weights within a family to</del>the <del>numerical weight values is intended only to preserve</del><ins>current element be 'large'. If</ins> the <del>ordering of weights within that family. User agents must map names to values in a way that preserves visual order; a face mapped to a value must</del><ins>parent element's size
is</ins> not <del>be lighter than faces mapped</del><ins>close</ins> to <del>lower values. There is no guarantee on how a user agent will map font faces within</del>a <del>family</del><ins>table entry, the UA is free to interpolate between
table entries or round off</ins> to <del>weight values. However,</del>the <del>following heuristics tell how</del><ins>closest one.</ins> The <del>assignment is done in typical cases:</del><ins>UA may have to
extrapolate table values</ins> if the <del>font family already uses a</del>numerical <del>scale with nine</del><ins>value goes beyond the
keywords.</ins>
</dd>
</dl>
<p><ins>Length and percentage</ins> values <del>(as e.g., OpenType does),</del><ins>should not take</ins> the font <del>weights should be mapped directly. If there is both a face labeled Medium and one labeled Book, Regular, Roman or Normal, then</del><ins>size table
into account when calculating</ins> the <del>Medium is normally assigned</del><ins>font size of the element.</ins>
</p>
<p><ins>Negative values are not allowed.</ins>
</p>
<p><ins>On all other properties, 'em' and 'ex' length values refer</ins> to the
<del>'500'. The</del><ins>computed</ins> font <del>labeled "Bold" will often correspond to</del><ins>size of</ins> the <del>weight value '700'. If there are fewer then 9 weights in</del><ins>current element. On</ins> the <del>family,</del><ins>'font-size' property, these
length units refer to</ins> the <del>default algorithm for filling</del><ins>computed font size of</ins> the <del>"holes" is as follows. If '500' is unassigned, it will be assigned</del><ins>parent element.</ins>
</p>
<p><ins>Note that an application may reinterpret an explicit size,
depending on</ins> the <del>same</del><ins>context. E.g., inside a VR scene a</ins> font <del>as '400'. If any</del><ins>may get a
different size because</ins> of <ins>perspective distortion.</ins>
</p>
<p><ins>Examples:</ins>
</p>
<pre>
<ins>p { font-size: 16px; }
@media print {
p { font-size: 12pt; }
}
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }</ins>
</pre>
<h2><ins>15.8</ins> <a name="font-shorthand"><ins>Shorthand font property</ins></a><ins>:</ins> the <a href="fonts.html#propdef-font" class="noxref"><span class="propinst-font"> <del>values '600', '700', '800', or '900' remains unassigned, they are assigned to</del><ins>'font'</ins></span></a> <ins>property</ins></h2>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'font'"><a name="propdef-font" class="propdef-title"><strong><ins>'font'</ins></strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em><ins>Value:</ins></em><ins> </ins><td><ins>[ [</ins> <a href="fonts.html#propdef-font-style" class="noxref"><span class="propinst-font-style"><ins><'font-style'></ins></span></a> <ins>||</ins> <a href="fonts.html#propdef-font-variant" class="noxref"><span class="propinst-font-variant"><ins><'font-variant'></ins></span></a> <ins>||</ins> <a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight"><ins><'font-weight'></ins></span></a> <ins>]?</ins>
<a href="fonts.html#propdef-font-size" class="noxref"><span class="propinst-font-size"><ins><'font-size'></ins></span></a> <ins>[ /</ins> <a href="visudet.html#propdef-line-height" class="noxref"><span class="propinst-line-height"><ins><'line-height'></ins></span></a> <ins>]?</ins> <a href="fonts.html#propdef-font-family" class="noxref"><span class="propinst-font-family"><ins><'font-family'></ins></span></a> <ins>] | caption | icon | menu | message-box | small-caption | status-bar |</ins> <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit"><ins>inherit</ins></span></a>
<tr valign=baseline><td><em><ins>Initial:</ins></em><ins> </ins><td><ins>see individual properties</ins>
<tr valign=baseline><td><em><ins>Applies to:</ins></em><ins> </ins><td><ins>all elements</ins>
<tr valign=baseline><td><em><ins>Inherited:</ins></em><ins> </ins><td><ins>yes</ins>
<tr valign=baseline><td><em><ins>Percentages:</ins></em><ins> </ins><td><ins>see individual properties</ins>
<tr valign=baseline><td><em><ins>Media:</ins></em><ins> </ins><td><a href="media.html#visual-media-group" class="noxref"><ins>visual</ins></a>
<tr valign=baseline><td><em><ins>Computed value:</ins></em><ins> </ins><td><ins>see individual properties</ins>
</table>
</dl>
</div>
<p>
The <a href="fonts.html#propdef-font" class="noxref"><span class="propinst-font"> <del>same face</del><ins>'font'</ins></span></a> <ins>property is,
except</ins> as <ins>described</ins> <a href="#almost"><ins>below</ins></a><ins>, a shorthand property for
setting</ins>
<a href="fonts.html#propdef-font-style" class="noxref"><span class="propinst-font-style"><ins>'font-style'</ins></span></a><ins>,</ins>
<a href="fonts.html#propdef-font-variant" class="noxref"><span class="propinst-font-variant"><ins>'font-variant'</ins></span></a><ins>,</ins>
<a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight"><ins>'font-weight'</ins></span></a><ins>,</ins>
<a href="fonts.html#propdef-font-size" class="noxref"><span class="propinst-font-size"><ins>'font-size'</ins></span></a><ins>,</ins>
<a href="visudet.html#propdef-line-height" class="noxref"><span class="propinst-line-height"><ins>'line-height'</ins></span></a> <ins>and</ins>
<a href="fonts.html#propdef-font-family" class="noxref"><span class="propinst-font-family"><ins>'font-family'</ins></span></a> <ins>at</ins> the <del>next darker assigned keyword, if any, or</del><ins>same
place in</ins> the <del>next lighter one otherwise. If any</del><ins>style
sheet. The syntax</ins> of <del>'300', '200', or '100' remains unassigned, it</del><ins>this property</ins> is <del>assigned</del><ins>based on a traditional
typographical shorthand notation</ins> to <ins>set multiple properties related to
fonts.</ins>
</p>
<p><ins>All font-related properties are first reset to their initial values,
including those listed in</ins> the <del>next lighter assigned keyword, if any, or the next darker otherwise. There is no guarantee</del><ins>preceding paragraph.
Then, those properties</ins> that <del>there will be a darker face for each of</del><ins>are given explicit values in</ins> the
<a href="fonts.html#propdef-font" class="noxref"><span class="propinst-font"> <del>'font-weight' values;</del><ins>'font'</ins></span></a> <ins>shorthand are set to those values.</ins>
For <del>example, some fonts may have only</del>a <del>normal</del><ins>definition of allowed</ins> and <del>a bold face, others may have eight different face weights.</del><ins>initial values, see</ins> the <del>following two examples show typical mappings. Assume four weights</del><ins>previously defined properties.</ins>
</p>
<pre>
<ins>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 }</ins>
</pre>
<p>In the <del>"Rattlesnake" family, from lightest</del><ins>second rule, the font size percentage value ('80%') refers</ins>
to <del>darkest: Regular, Medium, Bold, Heavy. First example</del><ins>the font size</ins> of <del>font-weight mapping Available faces Assignments Filling</del>the <del>holes "Rattlesnake Regular" 400 100, 200, 300 "Rattlesnake Medium" 500 "Rattlesnake Bold" 700 600 "Rattlesnake Heavy" 800 900 Assume six weights</del><ins>parent element.</ins> In the <del>"Ice Prawn" family: Book, Medium, Bold, Heavy, Black, ExtraBlack. Note that in this instance</del><ins>third rule,</ins> the <del>user agent has decided not to assign a numeric value</del><ins>line
height percentage refers</ins> to <del>"Example2 ExtraBlack". Second example of font-weight mapping Available faces Assignments Filling</del>the <del>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) 15.5.2 Examples of</del>font <del>matching Example(s):</del><ins>size of</ins> the <del>following example defines a specific font face, Alabama Italic. A panose font description</del><ins>element itself.</ins>
</p>
<p><ins>In the first three rules above, the 'font-style', 'font-variant'</ins>
and <del>source URI for retrieving a truetype server font</del><ins>'font-weight'</ins> are <del>also provided. Font-weight and font-style descriptors</del><ins>not explicitly mentioned, which means they</ins> are
<del>provided</del><ins>all three set</ins> to <del>describe the font.</del><ins>their initial value ('normal').</ins> The <del>declaration says that</del><ins>fourth rule sets</ins>
the <del>weight will also match any request in</del><ins>'font-weight' to 'bold',</ins> the <del>range 300</del><ins>'font-style' to 'italic' and
implicitly sets 'font-variant'</ins> to <del>500.</del><ins>'normal'.</ins>
</p>
<p><ins>The fifth rule sets the 'font-variant' ('small-caps'), the
'font-size' (120% of the parent's font), the 'line-height' (120% times</ins>
the font <del>family is Alabama</del><ins>size)</ins> and the <del>adorned font name is Alabama Italic. @font-face { src: local("Alabama Italic"), url(http://www.fonts.org/A/alabama-italic) format("truetype"); panose-1: 2 4 5 2 5 4 5 9 3 3; font-family: Alabama, serif; font-weight: 300, 400, 500; font-style: italic, oblique; } Example(s):</del><ins>'font-family' ('fantasy'). It follows that</ins> the
<del>next example defines a family of fonts. A single URI is provided</del><ins>keyword 'normal' applies to the two remaining properties: 'font-style'
and 'font-weight'.</ins>
</p>
<p><ins>The following values refer to</ins> <a name="x11"><span class="index-def" title="system
fonts"><ins>system fonts</ins></span></a><ins>:</ins></p>
<dl>
<dt><ins>caption</ins></dt>
<dd><ins>The font used</ins> for <del>retrieving</del><ins>captioned controls (e.g., buttons, drop-downs, etc.).</ins></dd>
<dt><ins>icon</ins></dt>
<dd>The font <del>data. This data file will contain multiple styles and weights of</del><ins>used to label icons.</ins></dd>
<dt><ins>menu</ins></dt>
<dd>The <del>named font. Once one of these @font-face definitions has been dereferenced,</del><ins>font used in menus (e.g., dropdown menus and menu lists).</ins></dd>
<dt><ins>message-box</ins></dt>
<dd>The <del>data will be</del><ins>font used</ins> in <ins>dialog boxes.</ins></dd>
<dt><ins>small-caption</ins></dt>
<dd>The <del>UA cache</del><ins>font used</ins> for <del>other faces</del><ins>labeling small controls.</ins></dd>
<dt><ins>status-bar</ins></dt>
<dd><ins>The font used in window status bars.</ins></dd>
</dl>
<p><ins>System fonts may only be set as a whole;</ins> that <del>use</del><ins>is,</ins> the <del>same URI. @font-face { src: local("Helvetica Medium"), url(http://www.fonts.org/sans/Helvetica_family) format("truedoc"); font-family: "Helvetica"; font-style: normal } @font-face { src: local("Helvetica Oblique"), url("http://www.fonts.org/sans/Helvetica_family") format("truedoc"); font-family: "Helvetica"; font-style: oblique; slope: -18 } Example(s):</del><ins>font
family, size, weight, style, etc. are all set at</ins> the <del>following example groups three physical fonts into one virtual</del><ins>same time.
These values may then be altered individually if desired. If no</ins>
font with <del>extended coverage. In each case,</del>the <del>adorned</del><ins>indicated characteristics exists on a given platform,
the user agent should either intelligently substitute (e.g., a smaller
version of the 'caption'</ins> font <del>name is given in the src descriptor to allow locally installed versions to</del><ins>might</ins> be <del>preferentially</del>used <del>if available.</del><ins>for the 'small-caption'
font), or substitute</ins> a <del>fourth rule points</del><ins>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</ins> to <ins>their initial values.</ins>
</p>
<p id="almost"><ins>That is why this property is "almost"</ins> a <del>font</del><ins>shorthand property: system
fonts can only be specified with this property, not</ins> with <a href="fonts.html#propdef-font-family" class="noxref"><span
class="propinst-font-family"><ins>'font-family'</ins></span></a> <ins>itself, so</ins> <a href="fonts.html#propdef-font" class="noxref"><span
class="propinst-font"><ins>'font'</ins></span></a> <ins>allows authors to do more than</ins> the
<del>same coverage, but contained in a single resource. @font-face { font-family: Excelsior; src: local("Excelsior Roman"), url("http://site/er") format("intellifont"); unicode-range: U+??; /* Latin-1 */ } @font-face</del><ins>sum of its subproperties. However, the individual properties such as</ins> <a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight"><ins>'font-weight'</ins></span></a> <ins>are still given values taken from the system font, which can be independently varied.</ins></p>
<div class="example"><P style="display:none"><ins>Example(s):</ins></P>
<pre>
<ins>button</ins> { <del>font-family: Excelsior; src: local("Excelsior EastA Roman"), url("http://site/ear") format("intellifont"); unicode-range: U+100-220; /* Latin Extended A and B */</del><ins>font: 300 italic 1.3em/1.7em "FB Armada", sans-serif</ins> }
<del>@font-face</del><ins>button p</ins> { <del>font-family: Excelsior; src: local("Excelsior Cyrillic Upright"), url("http://site/ecr") format("intellifont"); unicode-range: U+4??; /* Cyrillic */</del><ins>font: menu</ins> }
<del>@font-face</del><ins>button p em</in
5A0B
s> { <del>font-family: Excelsior; src: url("http://site/excels") format("truedoc"); unicode-range: U+??,U+100-220,U+4??;</del><ins>font-weight: bolder</ins> }
</pre>
<p> <del>Example(s): This next example might be found in a UA's default style sheet. It implements</del><ins>If</ins> the <del>CSS2 generic</del>font <del>family, serif by mapping it</del><ins>used for dropdown menus on a particular system
happened</ins> to <ins>be, for example, 9-point Charcoal, with</ins> a <del>wide variety</del><ins>weight</ins> of <del>serif fonts</del><ins>600, then P
elements</ins> that <del>might exist on various platforms. No metrics are</del><ins>were descendants of BUTTON would be displayed as if
this rule were in effect:</ins>
</p>
<pre>
<ins>button p { font: 600 9px Charcoal }</ins>
</pre>
<p><ins>Because the</ins> <a href="fonts.html#propdef-font" class="noxref"><span class="propinst-font"><ins>'font'</ins></span></a> <ins>shorthand
property resets any property not explicitly</ins> given <del>since these vary among</del><ins>a value
to its initial value, this has</ins> the <del>possible alternatives. @font-face</del><ins>same effect as this declaration:</ins>
</p>
<pre>
<ins>button p</ins> {
<del>src: local("Palatino"), local("Times New Roman"), local("New York"), local("Utopia"), url("http://somewhere/free/font");</del>font-family: <del>serif; font-weight: 100, 200, 300, 400, 500;</del><ins>Charcoal;</ins>
font-style: normal;
font-variant: normal;
<ins>font-weight: 600;</ins>
font-size: <del>all</del><ins>9px;
line-height: normal;</ins>
}
</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>
You can’t perform that action at this time.