You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The figure below shows how nine font-stretch property settings
1011
+
<div class="example" id="ex-font-width-matching">
1012
+
The figure below shows how nine font-width property settings
1013
1013
affect font matching for a font family containing a variety of discrete widths.
1014
1014
Grey indicates a width for which no face exists and a different width is substituted:
1015
1015
@@ -1019,10 +1019,77 @@ Font width: the 'font-stretch!!property' property</h3>
1019
1019
</figure>
1020
1020
</div>
1021
1021
1022
-
User agents must not synthesize stretched faces for font families which lack actual stretched faces.
1023
-
1024
1022
{{getComputedStyle()}} always serializes its value as a <<percentage>>, regardless of how the value was specified by the author, or whether or not a keyword happens to map to the value.
1025
1023
1024
+
<h4 id="font-stretch-prop">
1025
+
Font width: the 'font-stretch!!property' legacy name alias</h4>
1026
+
1027
+
For historical reasons,
1028
+
a <dfn>font-stretch</dfn> property exists
1029
+
which is a [=legacy name alias=]
1030
+
and functions in the identical way to
1031
+
the 'font-width!!property'.
1032
+
1033
+
<div class="example" id="ex-font-stretch-set">
1034
+
For example, here the legacy 'font-stretch!!property' is used
1035
+
on level one headings.
1036
+
1037
+
<pre>
1038
+
h1 {font-stretch: condensed; }
1039
+
</pre>
1040
+
1041
+
The specified value of the 'font-width!!property'
1042
+
on those headings
1043
+
becomes set to 'condensed'.
1044
+
</div>
1045
+
1046
+
<div class="example" id="ex-font-stretch-set">
1047
+
For example, here the 'font-width!!property' is used
1048
+
on level one headings.
1049
+
1050
+
<pre>
1051
+
h1 {font-width: condensed; }
1052
+
</pre>
1053
+
1054
+
The specified value of the 'font-stretch!!property'
@@ -1689,6 +1756,7 @@ Shorthand font property: the 'font' property</h3>
1689
1756
<ul>
1690
1757
<li>'font-family!!property'</li>
1691
1758
<li>'font-size!!property'</li>
1759
+
<li>'font-width!!property'</li>
1692
1760
<li>'font-stretch!!property' (css3)</li>
1693
1761
<li>'font-style!!property'</li>
1694
1762
<li>'font-variant-caps!!property' (css2)</li>
@@ -1775,20 +1843,20 @@ Shorthand font property: the 'font' property</h3>
1775
1843
'font-style!!property' and 'font-weight!!property'.
1776
1844
1777
1845
The sixth rule sets the 'font-style!!property',
1778
-
'font-stretch!!property',
1846
+
'font-width!!property',
1779
1847
'font-size!!property', and
1780
1848
'font-family!!property',
1781
1849
the other font properties being set to their initial values.
1782
1850
1783
1851
The seventh rule sets 'font-style!!property' to ''oblique 25deg'',
1784
1852
'font-weight!!property' to ''753'', and
1785
-
'font-stretch!!property' to ''condensed''.
1853
+
'font-width!!property' to ''condensed''.
1786
1854
Note that the ''25deg'' in this rule must be
1787
1855
immediately following the "oblique" keyword.
1788
1856
</div>
1789
1857
1790
-
Since the 'font-stretch!!property' property was not defined in CSS 2.1,
1791
-
when using 'font-stretch!!property' values within 'font' rules,
1858
+
Since the 'font-width!!property' property was not defined in CSS 2.1,
1859
+
when using 'font-width!!property' values within 'font' rules,
1792
1860
authors should include a extra version compatible with older user agents:
1793
1861
1794
1862
<pre>
@@ -2901,7 +2969,7 @@ or font format.
2901
2969
2902
2970
<h3 id="font-prop-desc">
2903
2971
Font property descriptors: the 'font-style!!descriptor', 'font-weight!!descriptor', and
2904
-
'font-stretch!!descriptor' descriptors</h3>
2972
+
'font-width!!descriptor' descriptors</h3>
2905
2973
2906
2974
<pre class='descdef'>
2907
2975
Name: font-style
@@ -2918,8 +2986,8 @@ Font property descriptors: the 'font-style!!descriptor', 'font-weight!!descripto
2918
2986
</pre>
2919
2987
2920
2988
<pre class='descdef'>
2921
-
Name: font-stretch
2922
-
Value: auto | <<'font-stretch'>>{1,2}
2989
+
Name: font-width
2990
+
Value: auto | <<'font-width'>>{1,2}
2923
2991
For: @font-face
2924
2992
Initial: auto
2925
2993
</pre>
@@ -3040,7 +3108,7 @@ Font property descriptors: the 'font-style!!descriptor', 'font-weight!!descripto
3040
3108
</div>
3041
3109
3042
3110
<div class="example" id="ex-descriptors-range">
3043
-
Fonts may advertise the range of 'font-weight!!property', 'font-stretch!!property', and 'font-style!!property' they are
3111
+
Fonts may advertise the range of 'font-weight!!property', 'font-width!!property', and 'font-style!!property' they are
3044
3112
compatible with.
3045
3113
<pre>
3046
3114
@font-face {
@@ -3055,7 +3123,7 @@ Font property descriptors: the 'font-style!!descriptor', 'font-weight!!descripto
3055
3123
outside of the 100 - 399 range. For more details, see the [[#font-matching-algorithm]].
3056
3124
3057
3125
As <a href="#ex-descriptors-matching">above</a>, multiple ''@font-face'' rules may be joined together into a single
3058
-
family, spanning multiple ranges of 'font-weight!!property', 'font-stretch!!property', and/or 'font-style!!property':
3126
+
family, spanning multiple ranges of 'font-weight!!property', 'font-width!!property', and/or 'font-style!!property':
3059
3127
<pre>
3060
3128
@font-face {
3061
3129
font-family: Lastima;
@@ -3073,6 +3141,15 @@ Font property descriptors: the 'font-style!!descriptor', 'font-weight!!descripto
3073
3141
'font-weight!!property' is between 400 and 700.
3074
3142
</div>
3075
3143
3144
+
<h4 id="font-stretch-desc">
3145
+
Font width: the 'font-stretch!!descriptor' legacy name alias</h4>
3146
+
3147
+
For historical reasons,
3148
+
a <dfn for="@font-face">font-stretch</dfn> descriptor exists
3149
+
which is a [=legacy name alias=]
3150
+
and functions in the identical way to
3151
+
the 'font-width!!descriptor'.
3152
+
3076
3153
<!--
3077
3154
██ ██ ████████ ███ ██ ██ ██████ ████████
3078
3155
██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██
@@ -3416,7 +3493,7 @@ but will override the "XHGT" axis to have a value of 0.7.
3416
3493
</div>
3417
3494
3418
3495
Note: Because the variation axis values supplied in the
3419
-
'font-weight!!property', 'font-stretch!!property', and 'font-style!!property' properties
3496
+
'font-weight!!property', 'font-width!!property', and 'font-style!!property' properties
3420
3497
are applied before
3421
3498
the value in the 'font-named-instance!!descriptor' descriptor,
3422
3499
there is no need to change the value of those properties
@@ -4070,11 +4147,11 @@ if all font style properties were set to their initial value.
4070
4147
of font faces in that family and then narrows the set to a single
4071
4148
face using other font properties in the order given below. Fonts might be
4072
4149
present in this group which can support a range of
4073
-
'font-stretch!!property', 'font-style!!property', or 'font-weight!!property' properties. In
4150
+
'font-width!!property', 'font-style!!property', or 'font-weight!!property' properties. In
4074
4151
this case, the algorithm proceeds as if each supported combination of
4075
4152
values is a unique font in the set. If such a font is ultimately
4076
4153
selected by this algorithm, particular values for
4077
-
'font-stretch!!property', 'font-style!!property', and 'font-weight!!property' must be applied
4154
+
'font-width!!property', 'font-style!!property', and 'font-weight!!property' must be applied
4078
4155
before any layout or rendering occurs. The application of these values
4079
4156
must be applied in the <a href="#apply-font-matching-variations">Apply
4080
4157
font matching variations</a> step detailed in
@@ -4091,11 +4168,11 @@ if all font style properties were set to their initial value.
4091
4168
</wpt>
4092
4169
4093
4170
<ol id="fontstylematchingalg">
4094
-
1. 'font-stretch!!property' is tried first. If a font
4171
+
1. 'font-width!!property' is tried first. If a font
4095
4172
does not have any concept of varying strengths of stretch values, its stretch value
4096
-
is mapped according table in the <a href="#stretchmappings">property definition</a>.
4173
+
is mapped according table in the <a href="#widthmappings">property definition</a>.
4097
4174
If the matching set includes faces with width values
4098
-
containing the 'font-stretch!!property' desired value, faces with width values which do not include the desired width value
4175
+
containing the 'font-width!!property' desired value, faces with width values which do not include the desired width value
4099
4176
are removed from the matching set. If there is no face
4100
4177
which contains the desired value, a stretch value is chosen using the rules below:
4101
4178
@@ -4115,15 +4192,15 @@ if all font style properties were set to their initial value.
4115
4192
<div class="example" id="ex-ascending-stretch">
4116
4193
This search algorithm can be thought of as a distance function, where the lowest-distance value present in the font family is selected, and all fonts not including that value are eliminated.
4117
4194
4118
-
Consider a font family with three fonts, named A, B, and C, each with associated supported ranges for the 'font-stretch!!property' descriptor. If an element is styled with "font-stretch: 125%", the search algorithm can be visualized as follows:
4195
+
Consider a font family with three fonts, named A, B, and C, each with associated supported ranges for the 'font-width!!property' descriptor. If an element is styled with "font-width: 125%", the search algorithm can be visualized as follows:
The font stretch ranges supported by fonts A, B, and C are shown in the graph above. As you can see, because font B contains the minimum stretch value across the entire family, font B would be selected by this algorithm. However, if font B were somehow eliminated from the family, font C would then contain the lowest distance in the family, so it would be selected.
4123
4200
</div>
4124
4201
4125
4202
<div class="example" id="ex-ascending-stretch-2">
4126
-
Similar to the <a href="#ex-ascending-stretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-stretch: 75%":
4203
+
Similar to the <a href="#ex-ascending-stretch">previous example</a>, here is the conceptual distance graph for an element styled with "font-width: 75%":
See [[#default-features]] for a description of these.
6702
6779
6703
6780
2. <span id="apply-font-matching-variations">Font variations as enabled by the 'font-weight!!property',
6704
-
'font-stretch!!property', and 'font-style!!property' properties are applied.</span>
6781
+
'font-width!!property', and 'font-style!!property' properties are applied.</span>
6705
6782
6706
6783
The application of the value enabled by
6707
6784
'font-style!!property' is affected by font selection, because this property might select an
@@ -6711,7 +6788,7 @@ text run.
6711
6788
not be set together.
6712
6789
6713
6790
If the selected font is defined in an ''@font-face'' rule, then the values applied at this step
6714
-
should be clamped to the value of the 'font-weight!!descriptor', 'font-stretch!!descriptor',
6791
+
should be clamped to the value of the 'font-weight!!descriptor', 'font-width!!descriptor',
6715
6792
and 'font-style!!descriptor'
6716
6793
descriptors in that ''@font-face'' rule.
6717
6794
@@ -7008,7 +7085,7 @@ the table below. Instead, please use the higher-level replacement properties, be
7008
7085
<th>Notes
7009
7086
<tbody>
7010
7087
<tr><td>Weight (<code>wght</code>)<td>'font-weight!!property'<td>The 'font-weight!!property' property will set the <code>wght</code> axis if one is present.
7011
-
<tr><td>Width (<code>wdth</code>)<td>'font-stretch!!property'<td>The 'font-stretch!!property' property will set the <code>wdth</code> axis if one is present.
7088
+
<tr><td>Width (<code>wdth</code>)<td>'font-width!!property'<td>The 'font-width!!property' property will set the <code>wdth</code> axis if one is present.
7012
7089
<tr><td>Slant (<code>slnt</code>) or Italic (<code>ital</code>)<td>'font-style!!property'<td>The 'font-style!!property' property will set the <code>slnt</code> or <code>ital</code> axis, depending on its value.
7013
7090
<tr><td>Optical size (<code>opsz</code>)<td>'font-optical-sizing!!property'<td>The 'font-optical-sizing!!property' property will set the <code>opsz</code> axis if one is present.
0 commit comments