blob: 0aaa5b46dde28694a012af8393e92e00ac5a67e3 (
plain)
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
|
---
title: font-size-adjust
slug: Web/CSS/font-size-adjust
translation_of: Web/CSS/font-size-adjust
---
<p>{{ CSSRef() }}</p>
<h2 id="概述">概述</h2>
<p><code>font-size-adjust</code> CSS属性定义字体大小应取决于小写字母，而不是大写字母。在字体较小时，字体的可读性主要由小写字母的大小决定，通过此选项即可进行调整。</p>
<p>当<span style="line-height: 19.09090805053711px;">{{ Cssxref("font-family") }}</span>的首选字体不可用时，如果备选字体的尺寸比（小写字母的大小与字体大小的比）有较大的差别时，可读性可能会成为一大问题。</p>
<p>为了兼容于不支持<code>font-size-adjust的浏览器，该属性的值应该被定义为</code>{{ Cssxref("font-size") }}的值所要乘的系数。 这意味着定义的值应该为首选字体的尺寸比。例如，样式表这样定义</p>
<pre class="brush: css">font-size: 14px;
font-size-adjust: 0.5;
</pre>
<p>的真实作用是定义小写字母的大小应该为<code>7px高</code> (0.5 × 14px).</p>
<p>{{cssinfo}}</p>
<h2 id="语法">语法</h2>
<pre class="brush:css">/* 仍使用font size的值 */
font-size-adjust: none;
/* 使用小写字母大小为font size一半大小的字体大小 */
font-size-adjust: 0.5;
font-size-adjust: inherit;
</pre>
<h3 id="值">值</h3>
<dl>
<dt><code>none</code></dt>
<dd>仅根据{{ Cssxref("font-size") }}属性决定字体大小。</dd>
<dt><code><number></code></dt>
<dd>
<p>根据使小写字母大小（根据字体的x-height--西文字体设计中的基线与主线的距离--决定）为该值乘以{{ Cssxref("font-size") }}的结果定义字体。</p>
<p>数字应为{{ Cssxref("font-family") }}的首选字体的尺寸比（x-height和字体大小的比）。这意味着当首选字体可用时，不论浏览器是否支持<span style="font-family: consolas,monaco,andale mono,monospace;">font-size-adjust，都</span>会显示文字为{{ Cssxref("font-size") }}的大小。</p>
</dd>
</dl>
<h3 id="正式语法">正式语法</h3>
<pre class="syntaxbox">{{csssyntax("font-size-adjust")}}</pre>
<h2 id="示例">示例</h2>
<p><a href="/samples/cssref/font-size-adjust.html">查看在线演示</a></p>
<pre class="brush: css">p {
font: 12px Verdana, "DejaVu Sans", sans-serif;
font-size-adjust: 0.58;
} </pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">b</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }}</td>
<td>{{ Spec2('CSS3 Fonts') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<p><code>font-size-adjust</code> CSS属性最初在CSS 2中被定义，但在CSS 2.1被放弃。后又被新添加至CSS 3。</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td rowspan="2">Basic support</td>
<td rowspan="2">
<p class="p1">{{ CompatNo() }}</p>
</td>
<td>1.0 (1.0)<br>
Windows only</td>
<td rowspan="2">{{ CompatNo() }} </td>
<td rowspan="2">{{ CompatNo() }} </td>
<td rowspan="2">{{ CompatNo() }} </td>
</tr>
<tr>
<td>{{ CompatGeckoDesktop("1.9") }}<br>
All platforms</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("1.9.2") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{CompatChrome(42.0)}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="参见">参见</h2>
<ul>
<li><a class="external" href="http://dbaron.org/log/20080613-firefox3-css#font-size-adjust" title="http://dbaron.org/log/20080613-firefox3-css#font-size-adjust">David Baron about font-size-adjust</a></li>
</ul>
|
