files/ja/web/css/font-size-adjust/index.html


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

---
title: font-size-adjust
slug: Web/CSS/font-size-adjust
tags:
  - CSS
  - CSS Fonts
  - CSS Property
  - Reference
  - 'recipe:css-property'
translation_of: Web/CSS/font-size-adjust
---
<p><strong><code>font-size-adjust</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 (大文字の大きさを定義する) 現在のフォントサイズに相対的な小文字の大きさを設定します。</p>

<pre class="brush:css no-line-numbers notranslate">/* 指定されたフォントサイズを使用 */
font-size-adjust: none;

/* 小文字のフォントサイズを、指定された
フォントサイズの半分にする */
font-size-adjust: 0.5;

/* グローバル値 */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: unset;
</pre>

<p>このプロパティが便利なのは、特に小さなサイズのフォントの読みやすさは、大文字の高さではなく小文字の高さで決まるからです。最初に選択した {{Cssxref("font-family")}} が利用できず、その代替フォントのアスペクト比 (小文字の大きさとフォントの大きさの比率) が著しく異なる場合、読みやすさが問題になることがあります。</p>

<p>このプロパティの使い方は、 <code>font-size-adjust</code> に対応していないブラウザーと互換性を持たせるため、 {{ Cssxref("font-size") }} プロパティに掛け合わせる数値として指定します。つまり、このプロパティ指定された値は、ふつう最初に選択されたフォントのアスペクト比になります。例えば、次のように指定されたスタイルシートでは、</p>

<pre class="brush: css notranslate">font-size: 14px;
font-size-adjust: 0.5;
</pre>

<p>実際のところ、フォントの小文字が <code>7px</code> の高さ (0.5 x 14px) を持つべきであると指定しています。これは、 <code>font-size-adjust</code> に対応していないブラウザーでは <code>14px</code> のフォントが使用されている場合でも、妥当な結果が得られます。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>{{ Cssxref("font-size") }} プロパティだけを基準にフォントサイズを選びます。</dd>
 <dt>{{cssxref("&lt;number&gt;")}}</dt>
 <dd>
 <p>{{ Cssxref("font-size") }} に掛け合わせて小文字の高さ (そのフォントの文字 x の高さ) になるような値を指定し、フォントサイズを選びます。</p>

 <p>指定した数値は、通常は最初に選んだ {{ Cssxref("font-family") }} のアスペクト比 (文字 x の高さとフォントサイズの比率) にしてください。こうすれば、最初に選んだフォントが利用可能なら、ブラウザーが <code>font-size-adjust</code> に対応しているかどうかに関わらず、どのブラウザーでも同じサイズで表示されます。</p>

 <p><code>0</code> は高さが 0 のテキスト (非表示テキスト) になります。</p>
 </dd>
</dl>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{cssinfo}}</p>

<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>

{{csssyntax}}

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Adjusting_lower-case_letter_sizes" name="Adjusting_lower-case_letter_sizes">小文字の大きさの調整</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;p class="times"&gt;This text uses the Times font (10px), which is hard to read in small sizes.&lt;/p&gt;
&lt;p class="verdana"&gt;This text uses the Verdana font (10px), which has relatively large lowercase letters.&lt;/p&gt;
&lt;p class="adjtimes"&gt;This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">.times {
  font-family: Times, serif;
  font-size: 10px;
}

.verdana {
  font-family: Verdana, sans-serif;
  font-size: 10px;
}

.adjtimes {
  font-family: Times, serif;
  font-size-adjust: 0.58;
  font-size: 10px;
}
</pre>

<h4 id="Results" name="Results">結果</h4>

<p>{{ EmbedLiveSample('Adjusting_lower-case_letter_sizes', 500, 200) }}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</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>

<div class="note">
<p><code>font-size-adjust</code> は最初に CSS 2 で定義されましたが、 CSS 2.1 で削除されました。 CSS 3 で新たに定義し直されました。</p>
</div>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("css.properties.font-size-adjust")}}</p>

<div>{{CSSRef}}</div>