Skip to content

Commit bd29a7b

Browse files
litherumlitherum
committed
[css-fonts-4] Clean up font-weight section
r=fantasai
1 parent 4223887 commit bd29a7b

File tree

1 file changed

+137
-115
lines changed

1 file changed

+137
-115
lines changed

‎css-fonts-4/Overview.bs‎

Lines changed: 137 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -382,134 +382,148 @@ Generic font families</h4>
382382

383383
<h3 id="font-weight-prop">Font weight: the 'font-weight!!property' property</h3>
384384

385-
<pre class="propdef">
386-
Name: font-weight
387-
Value: <<font-weight-absolute>> | bolder | lighter
388-
Initial: normal
389-
Applies to: all elements
390-
Inherited: yes
391-
Percentages: n/a
392-
Computed value: numeric weight value (see description)
393-
Media: visual
394-
Animatable: As <<number>>
395-
</pre>
396-
397-
The 'font-weight!!property' property specifies the weight of glyphs in the font, their degree of blackness or stroke thickness.
398-
399-
This property accepts values of the following:
385+
<pre class="propdef">
386+
Name: font-weight
387+
Value: <<font-weight-absolute>> | bolder | lighter
388+
Initial: normal
389+
Applies to: all elements
390+
Inherited: yes
391+
Percentages: n/a
392+
Computed value: numeric weight value (see description)
393+
Media: visual
394+
Animatable: As <<number>>
395+
</pre>
400396

401-
<pre class="prod"><dfn id="font-weight-absolute-values">&lt;font-weight-absolute&gt;</dfn> = [normal | bold | <<number>>]</pre>
397+
The 'font-weight!!property' property specifies the weight of glyphs in the font,
398+
their degree of blackness, or stroke thickness.
402399

403-
Values have the following meanings:
400+
This property accepts values of the following:
404401

405-
<dl dfn-for=font-weight dfn-type=value>
406-
<dt id="font-weight-numeric-values"><dfn><<number>></dfn>
407-
<dd>
408-
These values form an ordered sequence, where each number indicates a weight that is
409-
at least as dark as its predecessor. Only values greater than or equal to 1, and less than or equal to 1000, are valid, and all other values are treated as parse errors. Certain numeric values correspond to the commonly used weight names below (Note that a font might internally provide its own mappings, but those mappings within the font are disregarded):
410-
411-
<ul>
412-
<li>100 - Thin
413-
<li>200 - Extra Light (Ultra Light)
414-
<li>300 - Light
415-
<li>400 - Normal
416-
<li>500 - Medium
417-
<li>600 - Semi Bold (Demi Bold)
418-
<li>700 - Bold
419-
<li>800 - Extra Bold (Ultra Bold)
420-
<li>900 - Black (Heavy)
421-
</ul>
402+
<pre class="prod"><dfn id="font-weight-absolute-values">&lt;font-weight-absolute&gt;</dfn> = [normal | bold | <<number>>]</pre>
422403

423-
<dt><dfn>normal</dfn>
424-
<dd>
425-
Same as ''400''.
404+
Values have the following meanings:
426405

427-
<dt><dfn>bold</dfn>
428-
<dd>
429-
Same as ''700''.
406+
<dl dfn-for=font-weight dfn-type=value>
407+
<dt id="font-weight-numeric-values"><dfn><<number>></dfn>
408+
<dd>
409+
Each number indicates a weight that is at least as dark as its predecessor.
410+
Only values greater than or equal to 1, and less than or equal to 1000, are valid,
411+
and all other values are <a>invalid</a>.
412+
Numeric values typically correspond to the commonly used weight names below.
413+
414+
<ul>
415+
<li>100 - Thin
416+
<li>200 - Extra Light (Ultra Light)
417+
<li>300 - Light
418+
<li>400 - Normal
419+
<li>500 - Medium
420+
<li>600 - Semi Bold (Demi Bold)
421+
<li>700 - Bold
422+
<li>800 - Extra Bold (Ultra Bold)
423+
<li>900 - Black (Heavy)
424+
</ul>
425+
426+
Note: A font might internally provide its own weight name mappings,
427+
but those mappings within the font are disregarded in CSS.
428+
429+
<dt><dfn>normal</dfn>
430+
<dd>
431+
Same as ''400''.
430432

431-
<dt><dfn>bolder</dfn>
432-
<dd>
433-
Specifies a bolder weight than the inherited value.
433+
<dt><dfn>bold</dfn>
434+
<dd>
435+
Same as ''700''.
434436

435-
<dt><dfn>lighter</dfn>
436-
<dd>
437-
Specifies a lighter weight than the inherited value.
438-
</dl>
437+
<dt><dfn>bolder</dfn>
438+
<dd>
439+
Specifies a bolder weight than the inherited value.
440+
See [[#relative-weights]].
439441

440-
Font formats that use a scale other than a nine-step scale should map
441-
their scale onto the CSS scale so that 400 roughly corresponds with a
442-
face that would be labeled as Regular, Book, Roman and 700 roughly
443-
matches a face that would be labeled as Bold. Or weights may be
444-
inferred from the style names, ones that correspond roughly with the
445-
scale above. The scale is relative, so a face with a larger weight value
446-
must never appear lighter. If style names are used to infer weights,
447-
care should be taken to handle variations in style names across locales.
448-
449-
Quite often there are only a few weights available for a particular
450-
font family. When a weight is specified for which no face exists, a
451-
face with a nearby weight is used. In general, bold weights map to faces
452-
with heavier weights and light weights map to faces with lighter weights
453-
(see the <a href="#font-matching-algorithm">font matching section
454-
below</a> for a precise definition). The examples here illustrate which
455-
face is used for different weights, grey indicates a face for that
456-
weight does not exist so a face with a nearby weight is used:
442+
<dt><dfn>lighter</dfn>
443+
<dd>
444+
Specifies a lighter weight than the inherited value.
445+
See [[#relative-weights]].
446+
</dl>
457447

458-
<figure>
459-
<img alt="weight mappings for a family with 400, 700 and 900 weights" src="images/optimaweights.png" >
460-
<figcaption>Weight mappings for a font family with 400, 700 and 900 weight faces</figcaption>
461-
</figure>
448+
Font formats that use a scale other than a nine-step scale
449+
should map their scale onto the CSS scale
450+
so that 400 roughly corresponds with a face that would be labeled as Regular, Book, Roman
451+
and 700 roughly matches a face that would be labeled as Bold.
452+
Alternately, weights may be inferred from style names
453+
that correspond roughly with the scale above.
454+
The scale is relative,
455+
so a face with a larger weight value must never appear lighter.
456+
If style names are used to infer weights,
457+
care should be taken to handle variations in style names across locales.
458+
459+
<h4 id="relative-weights">
460+
Relative Weights</h4>
461+
462+
Specified values of ''bolder'' and ''lighter'' indicate weights
463+
relative to the weight of the parent element.
464+
The computed weight is calculated based on the inherited 'font-weight!!property' value
465+
using the chart below.
466+
467+
<table id="bolderlighter" class="data" summary="Bolder/lighter mappings">
468+
<thead>
469+
<tr>
470+
<th>Inherited value (<var>w</var>)
471+
<th>bolder
472+
<th>lighter
473+
<tbody>
474+
<tr><th><var>w</var> &lt; 100<td>400<td>No change
475+
<tr><th>100 &le; <var>w</var> &lt; 350<td>400<td>100
476+
<tr><th>350 &le; <var>w</var> &lt; 550<td>700<td>100
477+
<tr><th>550 &le; <var>w</var> &lt; 750<td>900<td>400
478+
<tr><th>750 &le; <var>w</var> &lt; 900<td>900<td>700
479+
<tr><th>900 &le; <var>w</var><td>No change<td>700
480+
</table>
481+
482+
Note: The table above is equivalent to selecting the next relative bolder or lighter face,
483+
given a font family containing normal and bold faces
484+
along with a thin and a heavy face.
485+
Authors who desire finer control over the exact weight values used for a given element
486+
can use numerical values instead of relative weights.
487+
488+
<h4 id="missing-weights">
489+
Missing weights</h4>
490+
491+
Quite often there are only a few weights available for a particular font family.
492+
When a weight is specified for which no face exists, a face with a nearby weight is used.
493+
In general, bold weights map to faces with heavier weights and light weights map to faces with lighter weights.
494+
(See the [[#font-matching-algorithm]] for a precise definition.)
462495

463-
<figure>
464-
<img alt="weight mappings for a family with 300, 600 weights" src="images/hiraginoweights.png" >
465-
<figcaption>Weight mappings for a font family with 300 and 600 weight faces</figcaption>
466-
</figure>
496+
<div class="example">
497+
The examples here illustrate which face is used for different weights.
498+
Grey indicates that a face for the desired weight does not exist, so a face with a nearby weight is used.
467499

468-
Most user agents model a font as having a particular weight which often corresponds to one of the numbers in the nine-step scale mentioned <a href="#font-weight-numeric-values">above</a>.
469-
While this is true of most fonts, some fonts might be configurable so as to
470-
support a range of weights. In this situation, the user agent uses a face
471-
with a weight as close as possible to the weight requested (see the
472-
<a href="#font-matching-algorithm">font matching section below</a> for the
473-
precise algorithm). In particular, a user agent using a font which supports
474-
a range of weights should behave the same as if a font is present at each
475-
individual weight in the range. For TrueType / OpenType fonts which use variations, the "wght"
476-
variation is used to implement varying weights. Fractional weights are
477-
valid.
478-
479-
Although the practice is not well-loved by typographers, bold faces are often
480-
synthesized by user agents for faces that lack actual bold faces. For
481-
the purposes of style matching, these faces must be treated as if they
482-
exist within the family. Authors can explicitly avoid this behavior
483-
by using the 'font-synthesis' property.
484-
485-
Specified values of ''bolder'' and ''lighter'' indicate weights
486-
relative to the weight of the parent element. The computed weight is
487-
calculated based on the inherited 'font-weight!!property' value using the chart
488-
below.
489-
490-
<table id="bolderlighter" class="data" summary="Bolder/lighter mappings">
491-
<thead>
492-
<tr>
493-
<th>Inherited value
494-
<th>bolder
495-
<th>lighter
496-
<tbody>
497-
<tr><th>- 99<td>400<td>No change
498-
<tr><th>100 - 349<td>400<td>100
499-
<tr><th>350 - 549<td>700<td>100
500-
<tr><th>550 - 749<td>900<td>400
501-
<tr><th>750 - 899<td>900<td>700
502-
<tr><th>900 -<td>No change<td>700
503-
</table>
500+
<figure>
501+
<img alt="weight mappings for a family with 400, 700 and 900 weights" src="images/optimaweights.png" >
502+
<figcaption>Weight mappings for a font family with 400, 700 and 900 weight faces</figcaption>
503+
</figure>
504504

505-
The table above is equivalent to selecting the next relative bolder or lighter face,
506-
given a font family containing normal and bold faces along with a thin and a heavy face.
507-
Authors who desire finer control over the exact weight values used for a given element
508-
can use numerical values instead of relative weights.
505+
<figure>
506+
<img alt="weight mappings for a family with 300, 600 weights" src="images/hiraginoweights.png" >
507+
<figcaption>Weight mappings for a font family with 300 and 600 weight faces</figcaption>
508+
</figure>
509+
</div>
509510

510-
Note: There is a small behavior change between [[CSS-FONTS-3]] and this specification with the animation of the 'font-size' property.
511-
Previously, interpolated values of font-weight were rounded to their closest multiple of 100, and the font-matching algorithm was run on these
512-
rounded values. In this specification, the font-matching algorithm is able to accept any value, so no rounding occurs. The small behavior change is due to the discontinuous nature of the font-matching algorithm.
511+
Most user agents model a font as having a particular weight
512+
which often corresponds to one of the numbers in the nine-step scale in [[#font-weight-numeric-values]].
513+
While this is true of most fonts, some fonts might be configurable so as to support a range of weights.
514+
In this situation, the user agent uses a face with a weight as close as possible to the weight requested
515+
(see [[#font-matching-algorithm]] for the precise algorithm).
516+
In particular, a user agent using a font which supports a range of weights
517+
should behave the same as if a font is present at each individual weight in the range.
518+
For TrueType / OpenType fonts that use variations,
519+
the <code>wght</code> variation is used to implement varying weights.
520+
Fractional weights are valid.
521+
522+
Although the practice is not well-loved by typographers,
523+
bold faces are often synthesized by user agents for families that lack actual bold faces.
524+
For the purposes of font matching,
525+
these faces must be treated as if they exist within the family.
526+
Authors can explicitly avoid this behavior by using the 'font-synthesis' property.
513527

514528
<h3 id="font-stretch-prop">
515529
Font width: the 'font-stretch!!property' property</h3>
@@ -2634,6 +2648,14 @@ if all font style properties were set to their initial value.
26342648
Once the closest matching weight has been determined by this process,
26352649
faces with weights which do not include this determined weight are removed from the matching set.
26362650

2651+
Note: There is a small behavior change between [[CSS-FONTS-3]] and this specification
2652+
with the animation of the 'font-weight' property.
2653+
Previously, interpolated values of font-weight were rounded to their closest multiple of 100,
2654+
and the font-matching algorithm was run on these rounded values.
2655+
In this specification, the font-matching algorithm is able to accept any value,
2656+
so no rounding occurs.
2657+
The small behavior change is due to the discontinuous nature of the font-matching algorithm.
2658+
26372659
4. 'font-size' must be
26382660
matched within a UA-dependent margin of tolerance. (Typically, sizes
26392661
for scalable fonts are rounded to the nearest whole pixel, while the

0 commit comments

Comments
 (0)