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
|
---
title: font-stretch
slug: Web/CSS/font-stretch
translation_of: Web/CSS/font-stretch
---
<p>{{CSSRef}}</p>
<h2 id="Summary">Summary</h2>
<p><span class="seoSummary"><strong><code>font-stretch</code></strong> 属性为字体定义一个正常或经过伸缩变形的字体外观，这个属性并不会通过伸展/缩小而改变字体的几何外形，如{{cssxref("font-feature-settings")}}和{{cssxref("font-variant")}}属性，它仅仅意味着当有多种字体可供选择时，会为字体选择最适合的大小。</span></p>
<p><img alt="The two 'e' belong to the same fonts. One is condensed, the other normal and can be selected by 'font-stretch'." src="/files/4321/Character_in_same_font_but_one_condensed.png" style="display: block; height: 92px; margin: auto; width: 188px;"></p>
<div class="note cleared">
<p><strong>Note:</strong><strong> </strong>If the font provides several faces, the one fitting the best with the value of the <code>font-stretch</code> property is chosen. E.g. On OS X, in addition to the more common Bold, Regular, Italic, and BoldItalic faces, the "Helvetica Neue" font proposes a second set of faces with condensed, that is shrunk, characters: Condensed. Browsers supporting <code>font-stretch</code> will use the condensed faces for the value <code>ultra-condensed</code> to <code>semi-condensed</code> and the normal faces for the other (<code>normal</code> and all expanded values).</p>
<img alt="Font-stretch results with a font having 2 faces, one condensed and one normal." src="/files/4317/Font_stretch_with_2_faces.png" style="display: block; height: 58px; margin: auto; width: 292px;">
<p>If the font has no condensed or expanded faces, like the default "Times New Roman" on Mac OS, <code>font-stretch</code> will not have any visible effect as the only suitable face will be used in all cases.:<br>
<img alt="Font-stretch results with a font having 1 single face." src="/files/4319/Font_stretch_with_1_face.png" style="display: block; height: 58px; margin: auto; width: 258px;"></p>
</div>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush:css">/* Keyword values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;
</pre>
<h3 id="Values">Values</h3>
<dl>
<dt><code>normal</code></dt>
<dd>指定默认字体</dd>
<dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
<dd><font face="Consolas, Liberation Mono, Courier, monospace">小于默认字体，其中ultra-condensed是缩的最小的字体</font></dd>
<dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
<dd>大于默认字体的值</dd>
</dl>
<h3 id="Interpolation">Interpolation</h3>
<p>Font stretch values are interpolated in discrete steps. The interpolation happens as though the ordered values are equally spaced real numbers; the result is rounded to the nearest value, with values exactly halfway between two values rounded towards the later value, that is the most expanded one.</p>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Example">Example</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div class="ultra stretch"> This is text with the font extremely expanded</div>
<div class="stretch"> This is text with the font stretched</div>
<div class="normal"> This is text without font stretching</div>
<div class="condensed"> This is text with the font condensed</div>
<div class="ultra condensed"> This is text with the font extremely condensed</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.ultra.stretch{font-stretch: ultra-expanded;}
.stretch {font-stretch: expanded;}
.normal {font-stretch: normal;}
.condensed {font-stretch: condensed;}
.ultra.condensed {font-stretch: ultra-condensed;}</pre>
<h3 id="Result">Result</h3>
<p>{{ EmbedLiveSample('Example', '500', '', '', 'Web/CSS/font-stretch') }}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch') }}</td>
<td>{{ Spec2('CSS3 Fonts') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<p>The CSS property <code>font-stretch</code> was initially defined in CSS 2, but dropped in CSS 2.1 due to lack of implementation experience. It has been newly defined in CSS 3.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>48.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoDesktop("9.0") }}</td>
<td>9.0</td>
<td>35.0</td>
<td>{{ CompatNo() }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatNo() }}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoMobile("9.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
</tbody>
</table>
</div>
|
