-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathfonts.src
More file actions
2042 lines (1643 loc) · 84.3 KB
/
fonts.src
File metadata and controls
2042 lines (1643 loc) · 84.3 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
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: fonts.src,v 1.26 1997-11-26 00:08:35 ian Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Fonts</TITLE>
<LINK rel="next" href="text.html">
<LINK rel="previous" href="colors.html">
<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
</HEAD>
<BODY>
<H1 align="center">Fonts</H1>
<h2>Introduction</h2>
<P>When a document's text is to be displayed visually, each character
(abstract information element) must be mapped to some representation
that may be drawn on the screen, paper, etc.
Each of these <span class="index-def"
title="glyph">glyphs</span> constitutes a graphical depiction of a character.
(as opposed to, for example, an aural, textual, or numerical depiction
of that character) One or more characters may be depicted by one or
more glyphs, in a possibly context-dependent fashion.
A <span class="index-def" title="glyph representation"><em>glyph
representation</em></span> is the actual artistic representation of an
abstract glyph, in some typographic style, in the form of outlines or
bitmaps.
A <span class="index-def" title="font">font</span> is a set of glyph
representations, all observing same basic motif according to design,
size, appearance, and other attributes associated with the entire set.
<P>A visual user agent must address the following issues before actually
rendering a character:
<ul>
<li>Has the author specified a font for this character?
<li>Does the client's user agent have this font available?
<li>If so, what glyph or glyphs does this character (or sequence of
characters) map to?
<li>If not, what should be done? Should a different font be substituted?
Can the font be synthesized? Can it be retrieved from the Web?
</ul>
<P>In both CSS1 and CSS2, authors specify font characteristics
via a series of font properties.
<P>What use the user agent makes of these properties differs greatly
between CSS1 and CSS2. In CSS1, all fonts were assumed to be present on
the client system and were identified solely by name. Alternate fonts
could be specified with the properties, but beyond that, user agents
had no way to suggest any other fonts (even stylistically similar
fonts that the user agent had available) other than generic default
fonts.
<P>CSS2 changes all that, and allows user agents much greater liberty
in selecting a font when an author's requested font is not immediately
available. CSS2 improves client-side font matching, enables font
synthesis and progressive rendering, and enables fonts to be
downloaded over the Web.
<P>In the CSS font model, each user agent has a "font database" at its
disposition. CSS2 allows stylesheet authors to contribute towards that
database. When asked to display a character with a particular font,
the user agent first identifies the font in the database that "best
fits" the specified font (according to the <a href="#algorithm">font
matching algorithm)</a> Once it has identified a font, it retrieves
the font data locally or from the Web, and may display the character
using those glyph representations.
<P>In light of this simple model, we have organized the specification
into two sections. The first concerns the <a
href="#font-specification">font specification mechanism</a>, whereby
authors specify which fonts they would like to have used. The
second concerns the <a href="#font-selection">font selection
mechanism</a>, whereby the client's user agent identifies and loads a
font that best fits the author's specification.
<P>How the user agent constructs <!--and consults--> the font database lies
outside the scope of this specification since the database's
implementation depends on the operating system, the windowing system,
the client, etc. Similarly, this specification does not mandate how
the user agent should handle error conditions such as when none of the desired
fonts are available.
<H2><a name="font-specification">Font specification</a></h2>
<P> The first phase of the CSS font mechanism concerns how authors
specify which fonts should be used by a client user
agent. Unfortunately, there exists no well-defined and universally
accepted taxonomy for classifying fonts, and terms that apply to one
font family may not be appropriate for others. For example, the term
'italic' is commonly used to label slanted text, but slanted text may
also be labeled <EM>Oblique, Slanted, Incline, Cursive</EM> or
<EM>Kursiv</EM>.
<P>Since it is not possible to provide authors with a perfect font
naming scheme, CSS has authors refer to pertinent characteristics of a
font through a series of properties. The property values form the
basis of the user agent's <a href="#font-selection">font
selection</a>.
<h3><a name="font-properties">Font specification properties</a></h3>
<P>CSS2 specifies fonts by using the following properties:
<dl>
<dt><strong><a name="font-family">Font family</a></strong>
<dd>A <span class="index-def" title="font family"> font family</span>
is a group of fonts that resemble one another. One member of the
family may be italic, another other bold, another bold and italic,
etc. Examples of font family names include Helvetica, New Century
Schoolbook, Kyokasho ICA L. Font family names are not restricted to
Latin characters. Font families may be grouped into different
categories: those with or without serifs, those whose characters are
or are not proportionally spaced, those that resemble handwriting,
those that are fantasy fonts, etc.
<dt><strong><a name="font-style">Font style</a></strong>
<dd>The font style specifies whether the specified font is normal,
italic, or oblique (italic and oblique fonts are similar,
but not the same, especially for fonts with serifs).
<dt><strong><a name="font-variant">Font variant</a></strong>
<dd>The font variant indicates whether the font contains normal upper
and lower case characters or whether it contains small-caps
characters.
<dt><strong><a name="font-weight">Font weight</a></strong>
<dd>The font weight refers to the boldness or lightness of a font's
glyphs.
<dt><strong><a name="font-size">Font size</a></strong>
<dd>The font size refers to the size of the font.
</dl>
<P> On all properties except <span
class="propinst-font-size">'font-size'</span>, 'em' and 'ex' length
values refer to the font size of the current element. For <span
class="propinst-font-size">'font-size'</span>, these length units
refer to the font size of the parent element. Please consult the
section on <a href="./syndata.html#length-units">length units</a> for
more information.
<P>For information about the classification of fonts in general,
please consult the section on <a
href="#font-descriptors">font descriptors</a>.
<H3><a name="font-family">Font family</a>: the <span
class="propinst-font-family">'font-family'</span></H3>
<!-- #include src=properties/font-family.srb -->
<P>This property specifies a prioritized list of font family names
and/or generic family names. To deal with the problem that a single
font may not be enough to display all the characters in a document, or
even a single element, this property allows authors to specify a list
of fonts, all of the same style and size, that are tried in sequence
to see if they contain a glyph for a certain character. This list is
called a <span class="index-def" title="font set"><em>font
set</em></span>.
<div class="example"><P>
For example, text that contains English text mixed with
mathematical symbols may need a font set of two fonts, one containing
letters and digits, the other containing mathematical symbols. Here
is an example of a font set suitable for a text that is expected to
contain text with Latin characters, Japanese characters, and
mathematical symbols:
<PRE>
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
</PRE>
<P> The characters available in the Baskerville font (a font with only
Latin characters) will be taken from that font, Japanese will be taken
from Heisi Mincho W3, and the mathematical symbols will come from
Symbol. Any other characters will (hopefully) come from the generic
font family 'serif'. The 'serif' font family will also be used if one
or more of the other fonts is unavailable.
</div>
<P> There are two types of list values:
<DL>
<DT><span class="index-def"
title="<family-name>, definition of"><a name="value-def-family-name" class="value-def"><family-name></a></span>
<DD>
The name of a font family of choice. In the last example, "gill"
and "Helvetica" are font families.
<DT><span class="index-def"
title="<generic-family>, definition of"><a name="value-def-generic-family" class="value-def"><generic-family></a></span>
<DD>
In the example above, the last value is a <a
href="#generic-font-families">generic family name</a>. The following
generic families are defined: 'serif','sans-serif', 'cursive',
'fantasy' and 'monospace'.
<P>Authors are encouraged to offer a generic font family as a
last alternative.</p>
</DL>
<P> Font names containing whitespace should be quoted.
<div class="example"><P>
For example:
<PRE>
BODY { font-family: "new century schoolbook", serif }
<BODY style="font-family: 'My own font', fantasy">
</PRE>
</div>
<P> If quoting is omitted, any whitespace characters before and after
the font name are ignored and any sequence of whitespace characters
inside the font name is converted to a single space.
<P>The generic font family values are considered keywords and therefore
must not be quoted.
<H3><a name="font-style">Font style</a>: the
<span class="propinst-font-style">'font-style'</span>,
<span class="propinst-font-variant">'font-variant'</span>, and
<span class="propinst-font-weight">'font-weight'</span> properties
</H3>
<!-- #include src=properties/font-style.srb -->
<P> The <span class="propinst-font-style">'font-style'</span> property selects
between normal (sometimes referred to as "roman" or "upright"), italic
and oblique faces within a font family.
<P> A value of 'normal' selects a font that is classified as 'normal'
in the UA's font database, while 'oblique' selects a font that is
labeled 'oblique'. A value of 'italic' selects a font that is labeled
'italic', or, if that is not available, one labeled 'oblique'.
<P> The font that is labeled 'oblique' in the UA's font database may
actually have been generated by electronically slanting a normal font.
<P> Fonts with Oblique, Slanted or Incline in their names will
typically be labeled 'oblique' in the font database. Fonts with
<EM>Italic, Cursive</EM> or <EM>Kursiv</EM> in their names will
typically be labeled 'italic'.
<div class="example"><P>
<PRE>
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
</PRE>
<P> In the example above, normal text in an H1, H2, or H3 element will
be displayed with an italic font. However, emphasized text within H1 will
appear in a normal face.
</div>
<!-- #include src=properties/font-variant.srb -->
<P>In a small-caps font, the lower case letters look similar to the
uppercase ones, but in a smaller size and with slightly different
proportions. The <span
class="propinst-font-variant">'font-variant'</span> property selects
that font. This property has no visible effect for scripts which are
unicameral (having only one case).
<P> A value of 'normal' selects a font that is not labeled as a
small-caps font, 'small-caps' selects a small-caps font. If a genuine
small-caps font is not available, it is acceptable (but not required)
in CSS2 if the small-caps font is a created by taking a normal font
and replacing the lower case letters by scaled uppercase
characters. As a last resort, unscaled uppercase letters will be used
as replacement for a small-caps font so that the text appears in all
capitals.
<div class="example"><P>
<P> The following example results in an H3 element in small-caps,
with emphasized words in oblique small-caps:
<PRE>
H3 { font-variant: small-caps }
EM { font-style: oblique }
</PRE>
</div>
<P> There may be other variants in the font family as well, such as
fonts with old-style numerals, small-caps numerals, condensed or
expanded letters, etc. CSS2 has no properties that select those.
<P>Insofar as this property causes text to be transformed to
uppercase, the same considerations as for <span
class="propinst-text-transform">'text-transform'</span> apply.
<!-- #include src=properties/font-weight.srb -->
<P> The <span class="propinst-font-weight">'font-weight'</span>
property selects the weight of the font. The values '100' to '900'
form an ordered sequence, where each number indicates a weight that is
at least as dark as its predecessor. The keyword 'normal' is
synonymous with '400', and 'bold' is synonymous with '700'. Keywords
other than 'normal' and 'bold' have been shown to be often confused
with font names and a numerical scale was therefore chosen for the
9-value list.
<div class="example"><P>
<PRE>
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
</PRE>
<P> The 'bolder' and 'lighter' values select font weights that are
relative to the weight inherited from the parent:
<PRE>
STRONG { font-weight: bolder }
</PRE>
</div>
<P> Child elements inherit the resultant weight, not the keyword
value.
<P> Fonts (the font data) typically have one or more properties whose
values are names that are descriptive of the "weight" of a font. There
is no accepted, universal meaning to these weight names. Their primary
role is to distinguish faces of differing darkness within a single
font family. Usage across font families is quite variant; for example
a font that you might think of as being bold might be described as
being <EM>Regular, Roman, Book, Medium, Semi-</EM> or <EM>DemiBold,
Bold,</EM> or <EM>Black,</EM> depending on how black the "normal" face
of the font is within the design. Because there is no standard usage
of names, the weight property values in CSS2 are given on a numerical
scale in which the value '400' (or 'normal') corresponds to the
"normal" text face for that family. The weight name associated with
that face will typically be <EM>Book, Regular, Roman, Normal</EM> or
sometimes <EM>Medium</EM>.
<P> The association of other weights within a family to the numerical
weight values is intended only to preserve the ordering of darkness
within that family. However, the following heuristics tell how the
assignment is done in typical cases:
<UL>
<LI>
If the font family already uses a numerical scale with nine
values (as e.g. <EM>OpenType</EM> does), the font weights
should be mapped directly.
<LI>
If there is both a face labeled <EM>Medium</EM> and one labeled
<EM>Book, Regular, Roman</EM> or <EM>Normal,</EM> then the
<EM>Medium</EM> is normally assigned to the '500'.
<LI>
The font labeled "Bold" will often correspond to the weight value '700'.
<LI>
If there are fewer then 9 weights in the family, the default
algorithm for filling the "holes" is as follows. If '500' is
unassigned, it will be assigned the same font as '400'. If any
of the values '600', '700', '800' or '900' remains unassigned,
they are assigned to the same face as the next darker assigned
keyword, if any, or the next lighter one otherwise. If any of
'300', '200' or '100' remains unassigned, it is assigned to the
next lighter assigned keyword, if any, or the next darker
otherwise.
</UL>
The following two examples illustrate the process. Assume four
weights in the "Example1" family, from lightest to darkest:
<EM>Regular, Medium, Bold, Heavy.</EM> And assume six weights in the
"Example2" family: <EM>Book, Medium, Bold, Heavy, Black,
ExtraBlack.</EM> Note how in the second example it has been decided
<EM>not</EM> to assign "Example2 ExtraBlack" to anything.
<PRE>
Available faces | Assignments | Filling the holes
----------------------+---------------+-------------------
"Example1 Regular" | 400 | 100, 200, 300
"Example1 Medium" | 500 |
"Example1 Bold" | 700 | 600
"Example1 Heavy" | 800 | 900
</PRE>
<PRE>
Available faces | Assignments | Filling the holes
----------------------+---------------+-------------------
"Example2 Book" | 400 | 100, 200, 300
"Example2 Medium" | 500 |
"Example2 Bold" | 700 | 600
"Example2 Heavy" | 800 |
"Example2 Black" | 900 |
"Example2 ExtraBlack" | (none) |
</PRE>
<P> Since the intent of the relative keywords 'bolder' and 'lighter'
is to darken or lighten the face <EM>within the family</EM> and
because a family may not have faces aligned with all the symbolic
weight values, the matching of 'bolder' is to the next darker face
available on the client within the family and the matching of
'lighter' is to the next lighter face within the family. To be
precise, the meaning of the relative keywords 'bolder' and 'lighter'
is as follows:
<UL>
<LI>
'bolder' selects the next weight that is assigned to a font that
is darker than the inherited one. If there is no such weight, it
simply results in the next darker numerical value (and the font
remains unchanged), unless the inherited value was '900' in
which case the resulting weight is also '900'.
<LI>
'lighter' is similar, but works in the opposite direction: it
selects the next lighter keyword with a different font from the
inherited one, unless there is no such font, in which case it
selects the next lighter numerical value (and keeps the font
unchanged).
</UL>
<P> There is no guarantee that there will be a darker face for each of
the <span class="propinst-font-weight">'font-weight'</span> values;
for example, some fonts may have only a normal and a bold face, others
may have eight different face weights. There is no guarantee on how a
UA will map font faces within a family to weight values. The only
guarantee is that a face of a given value will be no less dark than
the faces of lighter values.
<H3><a name="font-size">Font size</a>: the <span
class="propinst-font-size">'font-size'</span> property</H3>
<!-- #include src=properties/font-size.srb -->
<DL>
<DT><span class="index-def" title="<absolute-size>, definition of">
<absolute-size> </span>
<DD> An <a name="value-def-absolute-size" class="value-def"><absolute-size></a> keyword is an index to a
table of font sizes computed and kept by the UA. Possible values
are:
<P> [ xx-small | x-small | small | medium | large | x-large | xx-large ]
<P>On a computer screen a scaling factor of 1.5 is suggested
between adjacent indexes; if the 'medium' font is 10pt, the
'large' font could be 15pt. Different media may need different
scaling factors. Also, the UA should take the quality and
availability of fonts into account when computing the table. The
table may be different from one font family to another.
<DT><span class="index-def" title="<relative-size>, definition
of"><relative-size></span>
<DD> A <a name="value-def-relative-size" class="value-def"><relative-size></a> keyword is interpreted
relative to the table of font sizes and the font size of the
parent element. Possible values are:
<P> [ larger | smaller ]
<P> For example, if the parent element has a font size of
'medium', a value of 'larger' will make the font size of the
current element be 'large'. If the parent element's size is not
close to a table entry, the UA is free to interpolate between
table entries or round off to the closest one. The UA may have to
extrapolate table values if the numerical value goes beyond the
keywords.
</DL>
<P> Length and percentage values should not take the font size table
into account when calculating the font size of the element.
<P>Negative values are not allowed.
<P>An application may reinterpret an explicit size, depending on the
context, for example, inside a VR scene a font may get a different
size because of perspective distortion.
<div class="example"><P>
<P> Examples:
<PRE>
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
</PRE>
</div>
<H3>Shorthand font property: the <span class="propinst-font">'font'</span> property</H3>
<!-- #include src=properties/font.srb -->
<P> The <span class="propinst-font">'font'</span> property is a
shorthand property for setting <span
class="propinst-font-style">'font-style'</span>, <span
class="propinst-font-variant">'font-variant'</span>, <span
class="propinst-font-weight">'font-weight'</span>, <span
class="propinst-font-size">'font-size'</span>, <span
class="propinst-line-height">'line-height'</span>, and <span
class="propinst-font-family">'font-family'</span>, at the same place
in the style sheet. The syntax of this property is based on a
traditional typographical shorthand notation to set multiple
properties related to fonts.
<P> For a definition of allowed and initial values, see the previously
defined properties. <em>Properties for which no values are given are set
to their initial value</em>.
<div class="example"><P>
Examples:
<PRE>
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
</PRE>
<P> In the second rule, the font size percentage value ('80%') refers
to the font size of the parent element. In the third rule, the line
height percentage refers to the font size of the element itself.
<P> In the first three rules above, the <span
class="propinst-font-variant">'font-variant'</span> and <span
class="propinst-font-weight">'font-weight'</span> are not explicitly mentioned,
which means they are all three set to their initial value
('normal'). The fourth rule sets the <span
class="propinst-font-weight">'font-weight'</span> to 'bold', the <span
class="propinst-font-style">'font-style'</span> to 'italic' and implicitly sets
<span class="propinst-font-variant">'font-variant'</span> to 'normal'.
<P> The fifth rule sets the <span
class="propinst-font-variant">'font-variant'</span> ('small-caps'),
the <span class="propinst-font-size">'font-size'</span> (120% of the
parent's font), the <span
class="propinst-line-height">'line-height'</span> (120% times the font
size) and the <span class="propinst-font-family">'font-family'</span>
('fantasy'). It follows that the keyword 'normal' applies to the two
remaining properties: <span
class="propinst-font-style">'font-style'</span> and <span
class="propinst-font-weight">'font-weight'</span>.
</div>
<h3><a name="generic-font-families">Generic font families</a></h3>
<p>Generic font families are a fallback mechanism, a means of
preserving some of the style sheet writer'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
stylesheets.
<p>All five generic font families may be assumed to exist in all CSS
implementations (they need not necessarily map to five distict actual
fonts, in all cases). UAs should provide reasonable default choices for
the generic font families, which express the characteristics of each
family as well as possible within the limits of the underlying
technology allows.
<p>UAs are encouraged to allow users to select alternative choices for
the generic fonts.
<h4>serif</h4>
<p>Serif fonts, as the term is used in CSS, have the characteristic
that the ends of the strokes 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 Gothic (Japanese), Kai
(Chinese), Pathang (Korean) and any font which is so described may be
used to represent the generic 'serif' family.
<p>Examples of fonts which fit this description include:
<dl>
<dt>Latin fonts
<dd>Times New Roman, Garamond, Minion Web, ITC Stone Serif, MS Georgia,
Bitstream Cyberbit
<dt>Greek fonts
<dd>Bitstream Cyberbit
<dt>Cyrillic fonts
<dd>Adobe Minion Cyrillic, Excelcior Cyrillic Upright,
Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
<dt>Hebrew fonts
<dd>New Peninim, Raanana, Bitstream Cyberbit
<dt>Japanese fonts
<dd>Ryumin Light-KL, Kyokasho ICA, Futo Min A101
<dt>Arabic fonts
<dd>Bitstream Cyberbit
<dt>Cherokee fonts
<dd>Lo Cicero Cherokee
</dl>
<h4>sans-serif</h4>
<p>Sans-serif fonts, as the term is used in CSS, have the
characteristic that the ends of their strokes have abrupt or butted
ends. 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 Mincho (Japanese), Sung or
Song (Chinese), Totum or Kodig (Korean) and any font which is so
described may be used to represent the generic 'sans-serif' family.
<p>Examples of fonts which fit this description include:
<dl>
<dt>Latin fonts
<dd>MS Trebuchet, ITC Avant Garde Gothic, MS Verdana, Univers,
Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
<dt>Greek fonts
<dd>Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
<dt>Cyrillic fonts
<dd>Helvetica Cyrillic, ER Univers, Bastion
<dt>Hebrew fonts
<dd>Arial Hebrew, MS Tahoma
<dt>Japanese fonts
<dd>Shin Go, Heisei Kaku Gothic W5
<dt>Arabic fonts
<dd>MS Tahoma
</dl>
<h4>cursive</h4>
<p>Cursive fonts, as the term is used in CSS, have the characteristic
that the glyphs are partially or completely connected, and that the
result looks more like handwritten pen or brush writing than printed
letterwork. Fonts for some scripts, such as Arabic, are almost always
cursive. CSS uses the term 'cursive' to apply to a font for any
script, although other names such as Chancery, Brush, Swing and Script
are also used in font names.
<p>Examples of fonts which fit this description include:
<dl>
<dt>Latin fonts
<dd>Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand,
Zapf-Chancery
<dt>Cyrillic fonts
<dd>ER Architekt
<dt>Hebrew fonts
<dd>Corsiva
<dt>Arabic fonts
<dd>DecoType Naskh, Monotype Urdu 507
</dl>
<h4>fantasy</h4>
<p>Fantasy fonts, as used in CSS, are primarily decorative whilst
still containing representations of characters (as opposed to Pi or
Picture fonts, which do not represent characters).
<dl>
<dt>Latin fonts
<dd>Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
</dl>
<h4>monospace</h4>
<p>The sole criterion of a monospace font is that all glyph
representations 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 simulate computer code.
<p>Examples of fonts which fit this description include:
<dl>
<dt>Latin fonts
<dd>Courier, MS Courier New, Prestige, American Typewriter, Everson Mono
<dt>Greek Fonts
<dd>MS Courier New, Everson Mono
<dt>Cyrillic fonts
<dd>ER Kurier, Everson Mono
<dt>Japanese fonts
<dd>Osaka Monospaced
<dt>Cherokee fonts
<dd>Everson Mono
</dl>
<H2><a name="font-selection">Font selection</a></h2>
<P>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 <a href="#algorithm">font
matching algorithm</a> are provided below.
<P>There are four possible font selection actions:
matching, intelligent matching, synthesis, and download.
<UL>
<LI><span class="index-def" title="name matching"><em>font name
matching</em></span> <BR> 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.
<LI><span class="index-def" title="intelligent
matching"><em>intelligent font name matching</em></span>
<BR>
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.
<LI><span class="index-def" title="font synthesis"><em>font synthesis</em></span>
<BR> 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.
<li><em>Download</em><br>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.
</UL>
<p><span class="index-def" title="progressive rendering"><em>progressive
rendering</em></span> is a combination of download and one of the
other methods; it provides a temporary substitute font (using name
matching, intelligent matching, or synthesis) to allow content to be
read while the requested font downloads. Once the real font has been
successfully downloaded, it replaces the
temporary font, hopefully without the need to reflow.
<p>In CSS2, authors may specify which, if any, of these mechanisms
should be invoked by the user agent if a particular font is not
immediately available. Authors add <span class="index-def" title="font
descriptions"><em>font descriptions</em></span> to style sheets for
this purpose. A font description is a set of <span
class="index-def" title="font descriptors"><em>font
descriptors</em></span>, individual pieces of information about a
font, possibly including a URL describing the font's location on the Web.
<div class="note"><P>
<em><strong>Note.</strong>
Progressive rendering requires metric information about the font in
order to avoid re-layout of the content when the actual font has been
loaded and rendered. This metric information is sufficiently verbose
that it should only be specified at most once per font in a document.
</em>
</div>
<h3>Font Descriptions and @font-face</h3>
<P>The font description provides the bridge between an author's font
specification and the <span class="index-def" title="font
data"><em>font data</em></span>, which is the data needed to format
text and to render the glyph representations to which the characters
map - the actual scalable outlines or bitmaps needed to to render the
glyph representations to which the characters map. Fonts are
<em>referenced</em> by style sheet properties.
<P>The <span class="index-def" title="font description"><em>font
description</em></span>is used to select the relevant font data. The
font description contains descriptors that provide the location of the
font data on the Web, and/or characterize 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
representation widths. This data is a subset of the glyph
representation metrics contained in the font.
<P>Font descriptors may be classified into three types:
<ol>
<li>those that provide the link between the CSS usage of the font and
the font description (these have the same names as the corresponding
CSS font properties),
<li>the URL for the location of the font data,
<li>those that further characterize the font, to provide a link
between the font description and the font data.
</ol>
<p>All font descriptions are specified via a <span class="index-def"
title="@font-face"><em>@font-face</em></span>
at-rule. The general form of this rule is:
<!-- check wd-font description about at-rules in general is somewhere in CSS2 -->
<P><tt>@font-face {<span class="value-inst-font-description"><font-description></span> }</tt>
<p>where the <span class="index-def" title="<font-description>, definition of"><a name="value-def-font-description"><font-description></a></span> has the form:
<pre>
descriptor: value;
descriptor: value;
[...]
descriptor: value;
</pre>
<p>Each <span class="index-inst" title="@font-face"> @font-face</span>
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.
<P>The available font descriptors are described in later sections of
this specification.
<div class="example"><P>
<p>For example, here the font 'Robson Celtic' is defined and
referenced in a style sheet contained in an HTML document.
<PRE><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>
</PRE>
<p>The style sheet (in the STYLE element) contains a CSS rule that
sets all H1 elements to use the 'Robson Celtic' font family.
<P>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 <a href="#propdef-font-family">defined to exist</a>).
<p>A user agent implementing CSS2 will first examine <span
class="index-inst" title="@font-face"> @font-face</span> rules in
search of a font description defining Robson Celtic. This example
contains a rule which matches. Although this rule doesn't contain much
font data, it does have a URL 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.
<p>Note that if the font Robson Celtic <em>had</em> been installed on
the client system, this would cause the UA to construct an
@font-face rule for the installed copy as described in the
section on the <a href="#algorithm">font matching
algorithm</a>. The installed copy would have been matched before the
downloadable font in the example above.
</div>
<p>CSS1 implementations, which do not understand the @font-face rule
will encounter the opening curly brackets and will skip forward until
the matching closing curly brackets. This at-rule conforms with the <a
href="syndata.html#syntax">forward-compatible
parsing</a> requirement of CSS. Parsers may skip these rules without
error.
<p>Also, any descriptors which are not recognized or useful to the
user agent should be ignored in their entirety. This allows adding in
the future optional descriptors for the purpose of better font
substitution, matching, or synthesis. </p>
<H3><A NAME="select">Descriptors for Selecting a Font</a>:
<span class="descinst-font-family">'font-family'</span>,
<span class="descinst-font-style">'font-style'</span>,
<span class="descinst-font-variant">'font-variant'</span>,
<span class="descinst-font-weight">'font-weight'</span>, and
<span class="descinst-font-size">'font-size'</span>
</h3>
<p>The following descriptors have the same names as the corresponding
CSS2 font properties, and take a single value or comma-separated list
of values.
<p>The values within that list are exactly the same as those specified
for CSS2. If there is a single value, that is the value that must be
matched. If there is a list, any of the list items constitutes a
match. If the descriptor is omitted from the @font-face, the
initial value is used.
<!-- #include src=descriptors/font-family.srb -->
<p>This is the descriptor for the <a href="#font-family">family
name</a> of a font and takes the same values as the <span
class="propinst-font-family">'font-family'</span> property.
<!-- #include src=descriptors/font-style.srb -->
<p>This is the descriptor for the style of a font and takes the same
values as the <span class="propinst-font-style">'font-style'</span>
property except that a comma separated list is permitted. The value
'normal' indicates that this is the normal face of a font; it is
either the only face in a a font, or it is the face which is intended
to be used alongside other companion faces. The value 'oblique'
indicates that this face is a more slanted companion face than than
the normal face. The value 'italic' indicates that this is a more
cursive companion face to the normal face. This avoids having to label
slightly slanted normal faces as oblique, or Greek faces as italic.
<!-- #include src=descriptors/font-variant.srb -->
<p>This is the CSS indication whether this face is a small-caps
variant of a font. It takes the same values as the <span
class="propinst-font-variant">'font-variant'</span> property except
that a comma separated list is permitted. Cyrillic <i>pryamoĭ</i>
faces may be labeled with a <span
class="descinst-font-variant">'font-variant'</span>
of small-caps, which will give better consistency with Latin faces
(and the companion <i>kursiv</i> face labeled with <span
class="descinst-font-style">'font-style'</span> italic for the
same reason).
<!-- #include src=descriptors/font-weight.srb -->
<p>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 <span
class="propinst-font-weight">'font-weight'</span> property with three
exceptions:
<ol><li>relative keywords (bolder, lighter) are not permitted
<li>a comma separated list of values is permitted
<li>an additional keyword, 'all' is permitted
</ol>
<!-- should values not a multiple of 100 also be allowed? -->
<!-- #include src=descriptors/font-size.srb -->
<p>This is the descriptor for the sizes provided by this font. Only <a
href="syndata.html#absrel-units">absolute length</a> units are
permitted, in contrast to the <span
class="propinst-font-size">'font-size'</span> property, which allows
both relative and absolute lengths and sizes. A comma separated list
of absolute lengths is permitted.
<p>The initial value of 'all' is suitable for scalable fonts, so this
descriptor will only be useful in an @font-face for bitmap fonts,
or for scalable fonts which have hand-tuned bitmaps at specific point
sizes.
<!-- how to indicate tuned bitmaps at certain point sizes? -->
<H3><A NAME="dataqual">Descriptors for Font Data Qualification</a>: <span
class="descinst-unicode-range">'unicode-range'</span></H3>
<P>
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.
<!-- #include src=descriptors/unicode-range.srb -->
<P>This is the descriptor for the range of <a rel="biblioentry"
href="./refs.html#ref-ISO10646">[ISO10646]</a> characters covered by
the font. Since this is sparse (most fonts do not cover the whole of
<a rel="biblioentry" href="./refs.html#ref-ISO10646">[ISO10646]</a>)
this descriptor lists blocks or ranges which do have <em>some</em>
coverage (no promise is made of complete coverage). This method is
extensible to future allocation of characters in Unicode, without
change of syntax and without invalidating existing content.
<p>The values of <span class="index-def" title="<urange>,
definition of"><a name="value-def-urange"><urange></a></span>
are expressed using hexadecimal numbers prefixed by "U+",
corresponding to character code positions in <a rel="biblioentry"
href="./refs.html#ref-ISO10646" class="normref">[ISO10646]</a> (which
specifies the document character set of <a rel="biblioentry"
href="./refs.html#ref-HTML40" class="informref">[HTML40]</a>).
For example, <tt>U+05D1</tt> is the <a rel="biblioentry"
href="./refs.html#ref-ISO10646" class="normref">[ISO10646]</a>
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:
<tt>U+A1234</tt> 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
legal, but not required.