リビジョンの比較

font

Change Revisions

リビジョン 168755:

リビジョン 168755 (編集者: Kohei / 編集日時: )

リビジョン 334769:

リビジョン 334769 (編集者: Amigomr / 編集日時: )

タイトル:
font
font
URL スラグ:
CSS/font
CSS/font
タグ:
css, "CSS Reference"
"css", "CSS Reference"
内容:

リビジョン 168755
リビジョン 334769
n10    <h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">n10    <h2 id="Summary">
n12    </h3>n12    </h2>
13    <p>
14      font プロパティは、{{ Cssxref("font-style") }}、{{ Cssxref("font-va
>riant") }}、{{ Cssxref("font-weight") }}、{{ Cssxref("font-size") } 
>}、{{ Cssxref("line-height") }}、{{ Cssxref("font-family") }} をスタイル 
>シート内で一度に指定するための簡略プロパティです。 
15    </p>13    <p>
14      CSS の <code>font</code> プロパティは、{{ Cssxref("font-style") }},
 > {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ 
 >Cssxref("font-size") }}, {{ Cssxref("line-height") }}, {{ Cssxref
 >("font-family") }} を一度に設定するためのショートハンド・プロパティです。また、特定のキーワードを用いることで、
 >要素のフォントにシステムフォントを指定することもできます。
15    </p>
16    <p>
17      他のショートハンド・プロパティ同様、値を指定しなかった場合には、それぞれの初期値が設定されます。結果的に、それ以前にシ
 >ョートハンドでないプロパティを使って指定していた値は上書きされます。
18    </p>
19    <div class="note">
20      <strong>注意</strong>: <code>font</code> ショートハンドを使うときには、注意しなけ
 >ればならない点が若干あります。以下の条件を満たさない場合、そのプロパティは無効とされ、完全に無視されます。<br>
16    <ul>21      <ul>
17      <li>{{ Xref_cssinitial() }}: 各プロパティを参照してください22        <li>キーワードを使う場合を除いて、必ず {{ cssxref("font-size") }} プロパティと {
 >{ cssxref("font-style") }} プロパティの値を両方とも定義しなければなりません。
23        </li>
24        <li>{{ cssxref("font-variant") }} については、すべての値を使うことができるわけで
 >はありません。CSS 2.1 で定義された値、すなわち <code>normal</code> と <code>small-cap
 >s</code> のみを使うことができます。
25        </li>
26        <li>
27          <code>font</code> によって直接指定できるわけではありませんが、{{ cssxref("fon
 >t-stretch") }}, {{ cssxref("font-size-adjust") }}, {{ cssxref("fo
 >nt-kerning") }} の値もそれぞれの初期値にリセットされます。
28        </li>
29        <li>値の順番は完全に自由というわけではありません。まず、{{ cssxref("font-style") }}
 >, {{ cssxref("font-variant") }}, {{ cssxref("font-weight") }} を定義
 >するときには、{{ cssxref("font-size") }} の値よりも前で定義しなければなりません。また、{{ cssxr
 >ef("line-height") }} の値は、{{ cssxref("font-size") }} の直後で <code>/<
 >/code> に続けて、定義しなければなりません。最後に、{{ cssxref("font-family") }} は必須であり、
 >一連の定義される値の中で、最後の値でなければなりません({{ cssxref("inherit") }} 値は動作しません)。
30        </li>
31      </ul>
32    </div>
33    <ul class="cssprop">
18      </li>34      <li>
19      <li>適用範囲: すべての要素35        <dfn>{{ Xref_cssinitial() }}</dfn> 各プロパティを参照してください
36      </li>
20      </li>37      <li>
21      <li>{{ Xref_cssinherited() }}: あり38        <dfn>適用対象</dfn> すべての要素
39      </li>
22      </li>40      <li>
23      <li>割合: N/A41        <dfn>{{ Xref_cssinherited() }}</dfn> あり
42      </li>
24      </li>43      <li>
25      <li>メディア: {{ Xref_cssvisual() }}44        <dfn>割合</dfn> 各プロパティを参照してください
45      </li>
26      </li>46      <li>
27      <li>{{ Xref_csscomputed() }}:47        <dfn>メディア</dfn> {{ Xref_cssvisual() }}
48      </li>
49      <li>
50        <dfn>{{ Xref_csscomputed() }}</dfn> 各プロパティを参照してください
n30    <h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">n53    <h2 id="Syntax">
n32    </h3>n55    </h2>
33    <p>56    <pre class="eval">
34      <code>font:</code> [ &lt;<a href="ja/CSS/font-style">font-s57font: [[ {{ cssxref("font-style") }} || {{ cssxref("font-variant"
>tyle</a>&gt; || &lt;<a href="ja/CSS/font-variant">font-variant</a>) }} || {{ cssxref("font-weight") }} ]? {{ cssxref("font-size") }
>>&gt; || &lt;<a href="ja/CSS/font-weight">font-weight</a>&gt; ]? >} [ / {{ cssxref("line-height") }} ]? {{ cssxref("font-family") }
>&lt;<a href="ja/CSS/font-size">font-size</a>&gt; [ / &lt;<a href=>} ] 
>"ja/CSS/line-height">line-height</a>&gt; ]? &lt;<a href="ja/CSS/f 
>ont-family">font-family</a>&gt; 
35    </p>58       | caption | icon | menu | message-box | small-caption | st
 >atus-bar
36    <p>59</pre>
37      <code>font:</code> <code>caption</code> | <code>icon</code>60    <h3 id="Values">
> | <code>menu</code> | <code>message-box</code> | <code>small-cap 
>tion</code> | <code>status-bar</code> | <code>-moz-window</code>  
>| <code>-moz-document</code> | <code>-moz-workspace</code> | <cod 
>e>-moz-desktop</code> | <code>-moz-info</code> | <code>-moz-dialo 
>g</code> | <code>-moz-button</code> | <code>-moz-pull-down-menu</ 
>code> | <code>-moz-list</code> | <code>-moz-field</code> 
38    </p>
39    <p>
40      <code>font:</code> {{ Cssxref("inherit") }}
41    </p>
42    <h3 id=".E5.80.A4" name=".E5.80.A4">
n45    <p>n
46      {{ Cssxref("font") }} 簡略プロパティを使うと、指定された通常のプロパティを設定しつつ、他のすべて
>のフォント関連のプロパティをそれらの初期値に設定できます。 
47    </p>
48    <p>
49      各プロパティの適切な値については、{{ Cssxref("font-style") }}、{{ Cssxref("fo
>nt-variant") }}、{{ Cssxref("font-weight") }}、{{ Cssxref("font-siz 
>e") }}、{{ Cssxref("font-family") }} を参照してください。 
50    </p>
51    <p>
52      個別の通常のプロパティで指定する<i>代わりに</i>、以下のように {{ Cssxref("font") }} プロ
>パティを使ってシステムフォントを指定することも可能です。 
53    </p>
n56        caption&nbsp;n65        <em>font-style</em>
57      </dt>
58      <dd>
59        キャプション付きコントロールに使われるフォント (ボタン、ドロップダウンなど)。
60      </dd>
61      <dt>66      </dt>
62        icon&nbsp;
63      </dt>
64      <dd>
65        ラベルアイコンに使われるフォント。
66      </dd>67      <dd>
67      <dt>68        {{ Cssxref("font-style") }} プロパティを参照してください
68        menu&nbsp;
69      </dt>
70      <dd>69      </dd>
71        メニューに使われるフォント (ドロップダウンメニュー、メニューリストなど)。
72      </dd>
73      <dt>
74        message-box&nbsp;
75      </dt>70      <dt>
76      <dd>71        <em>font-variant</em>
77        ダイアログボックスに使われるフォント。
78      </dd>
79      <dt>72      </dt>
80        small-caption&nbsp;
81      </dt>
82      <dd>
83        小さいコントロールのラベルに使われるフォント
84      </dd>73      <dd>
85      <dt>74        {{ Cssxref("font-variant") }} プロパティを参照してください
86        status-bar&nbsp;
87      </dt>
88      <dd>75      </dd>
89        ウィンドウのステータスバーに使われるフォント
90      </dd>
91      <dt>
92        -moz-window&nbsp;
93      </dt>76      <dt>
77        <em>font-weight</em>
94      <dt>78      </dt>
95        -moz-document&nbsp;79      <dd>
80        {{ Cssxref("font-weight") }} プロパティを参照してください
81      </dd>
96      </dt>82      <dt>
83        <em>font-size</em>
97      <dt>84      </dt>
98        -moz-workspace&nbsp;85      <dd>
86        {{ Cssxref("font-size") }} プロパティを参照してください
87      </dd>
99      </dt>88      <dt>
89        <em>line-height</em>
100      <dt>90      </dt>
101        -moz-desktop&nbsp;91      <dd>
92        {{ cssxref("line-height") }} プロパティを参照してください
93      </dd>
102      </dt>94      <dt>
95        <em>font-family</em>
103      <dt>96      </dt>
104        -moz-info&nbsp;97      <dd>
98        {{ Cssxref("font-family") }} プロパティを参照してください
99      </dd>
105      </dt>100      <dt>
101        system_font
106      <dt>102      </dt>
107        -moz-dialog&nbsp;103      <dd>
104        通常のプロパティを指定する方法以外に、キーワードを用いることで、特定のシステムフォントで代替させることもできます:
105        <table class="standard-table">
106          <tbody>
107            <tr>
108              <td>
109                <code>caption</code>
110              </td>
111              <td>
112                キャプション付きコントロールに使われるフォント(ボタン、ドロップダウンなど)
113              </td>
114            </tr>
115            <tr>
116              <td>
117                <code>icon</code>
118              </td>
119              <td>
120                ラベルアイコンに使われるフォント
121              </td>
122            </tr>
123            <tr>
124              <td>
125                <code>menu</code>
126              </td>
127              <td>
128                メニューに使われるフォント(ドロップダウンメニュー、メニューリストなど)
129              </td>
130            </tr>
131            <tr>
132              <td>
133                <code>message-box</code>
134              </td>
135              <td>
136                ダイアログボックスに使われるフォント
137              </td>
138            </tr>
139            <tr>
140              <td>
141                <code>small-caption</code>
142              </td>
143              <td>
144                小さいコントロールのラベルに使われるフォント
145              </td>
146            </tr>
147            <tr>
148              <td>
149                <code>status-bar</code>
150              </td>
151              <td>
152                ウィンドウのステータスバーに使われるフォント
153              </td>
154            </tr>
155          </tbody>
156        </table>上記キーワードを実装しているブラウザは、しばしば、さらにいくつかの、接頭辞がついた値も実装していま
 >す。例えば、Gecko は <code>-moz-window</code>, <code>-moz-document</code
 >>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-
 >dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-men
 >u</code>, <code>-moz-list</code>, <code>-moz-field</code> を実装していま
 >す。
108      </dt>157      </dd>
109      <dt>
110        -moz-button&nbsp;
111      </dt>
112      <dt>
113        -moz-pull-down-menu&nbsp;
114      </dt>
115      <dt>
116        -moz-list&nbsp;
117      </dt>
118      <dt>
119        -moz-field&nbsp;
120      </dt>
n122    <h3 id=".E4.BE.8B" name=".E4.BE.8B">n159    <h2 id="Examples">
n124    </h3>n161    </h2>
n128    <pre>n165    <pre class="brush: css">
n130p { font: 12pt/14pt sans-serif }n167p { font: 12px/14px sans-serif }
n132    <pre>n169    <pre class="brush: css">
133/* フォントサイズを親要素あるいは (親要素が存在しない場合) 規定値の 80%、170/* フォントサイズを親要素もしくは(親要素が存在しない場合には)デフォルト値の 80% に設定し、
134フォントファミリーを sans-serif に設定します */ 171フォントファミリーを sans-serif に設定します */
n137    <pre>n174    <pre class="brush: css">
n142    <h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8Fn179    <pre class="brush: css">
>.E7.82.B9"> 
143      注意点180/* ウィンドウのステータスバーで使われているのと同じフォントを使います */
144    </h3>181p { font: status-bar }
145    <p>182</pre>
146      この簡略プロパティのうち、{{ Cssxref("font-size") }} と {{ Cssxref("font-183    <h2 id="Notes" name="Notes">
>family") }} は必須です。これらを省略すると構文エラーとなり、宣言全体が無視されます。 
147    </p>
148    <p>
149      値が与えられていないプロパティは初期値に設定されます。この値は、省略可能なすべてのプロパティ ({{ Cssxref(
>"font-style") }}、{{ Cssxref("font-variant") }}、{{ Cssxref("font-w 
>eight") }}、{{ Cssxref("line-height") }}) で <code>normal</code> とな 
>ります。 
150    </p>
151    <p>
152      {{ Cssxref("font-size-adjust") }} プロパティも、{{ Cssxref("font")
> }} 簡略プロパティが指定された場合、初期値 (<code>none</code>) に設定されます。 
153    </p>
154    <h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98
>.E6.9B.B8"> 
155      仕様184      仕様
156    </h3>185    </h2>
157    <ul>
158      <li>
159        <a class="external" href="http://www.w3.org/TR/CSS1#font"
>>CSS 1</a> 
160      </li>
161      <li>
162        <a class="external" href="http://www.w3.org/TR/1998/REC-C
>SS2-19980512/fonts.html#propdef-font">CSS 2</a> ({{ Cssxref("font 
>-size-adjust") }}) 
163      </li>
164      <li>
165        <a class="external" href="http://www.w3.org/TR/CSS21/font
>s.html#propdef-font">CSS 2.1</a> 
166      </li>
167      <li>
168        <a class="external" href="http://www.w3.org/TR/css3-ui/#f
>ont">css3-ui</a> (新しいシステムフォントの値) 
169      </li>
170    </ul>
171    <h3 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E4.BA.92.E6.8F.9
>B.E6.80.A7" name=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E4.BA.92.E 
>6.8F.9B.E6.80.A7"> 
172      ブラウザ互換性
173    </h3>
nn187      <thead>
188        <tr>
189          <th scope="col">
190            仕様書
191          </th>
192          <th scope="col">
193            策定状況
194          </th>
195          <th scope="col">
196            コメント
197          </th>
198        </tr>
199      </thead>
n177          <th>n202          <td>
178            ブラウザ203            {{ SpecName('CSS3 Fonts', '#font', 'font') }}
179          </th>204          </td>
180          <th>205          <td>
181            最小バージョン206            {{ Spec2('CSS3 Fonts') }}
182          </th>207          </td>
208          <td>
209            変更なし
210          </td>
n186            Internet Explorern214            {{ SpecName('CSS2.1', 'fonts.html#font-shorthand', 'f
 >ont-weight') }}
187          </td>
188          <td>215          </td>
189            3216          <td>
217            {{ Spec2('CSS2.1') }}
218          </td>
219          <td>
220            キーワードへのサポートが追加されました
n194            Netscapen225            {{ SpecName('CSS1', '#font', 'font') }}
195          </td>
196          <td>226          </td>
197            4
198          </td>227          <td>
199        </tr>228            {{ Spec2('CSS1') }}
200        <tr>
201          <td>229          </td>
202            Opera
203          </td>230          <td>
204          <td>231            &nbsp;
205            3.5
t210    <h3 id=".E9.96.A2.E9.80.A3.E8.A8.98.E4.BA.8B" name=".E9.96.A2t236    <h2 id="Browser_Compatibility" name="Browser_Compatibility">
>.E9.80.A3.E8.A8.98.E4.BA.8B"> 
211      関連記事237      ブラウザ互換性
212    </h3>238    </h2>
213    <p>
214      {{ CSS_Reference:Fonts() }}
215    </p>239    <p>
216    <div class="noinclude"></div>{{ languages( { "en": "en/CSS/fo240      {{ CompatibilityTable() }}
>nt", "es": "es/CSS/font", "fr": "fr/CSS/font", "pl": "pl/CSS/font 
>" } ) }} 
241    </p>
242    <div id="compat-desktop">
243      <table class="compat-table">
244        <tbody>
245          <tr>
246            <th>
247              機能
248            </th>
249            <th>
250              Chrome
251            </th>
252            <th>
253              Firefox (Gecko)
254            </th>
255            <th>
256              Internet Explorer
257            </th>
258            <th>
259              Opera
260            </th>
261            <th>
262              Safari (WebKit)
263            </th>
264          </tr>
265          <tr>
266            <td>
267              ショートハンド
268            </td>
269            <td>
270              1.0
271            </td>
272            <td>
273              1.0 (1.0)
274            </td>
275            <td>
276              3.0-4.0
277            </td>
278            <td>
279              3.5
280            </td>
281            <td>
282              1.0 (85)
283            </td>
284          </tr>
285          <tr>
286            <td>
287              システムフォント
288            </td>
289            <td>
290              1.0
291            </td>
292            <td>
293              1.0 (1.0)
294            </td>
295            <td>
296              4.0-5.5
297            </td>
298            <td>
299              6.0
300            </td>
301            <td>
302              1.0 (85)
303            </td>
304          </tr>
305        </tbody>
306      </table>
307    </div>
308    <div id="compat-mobile">
309      <table class="compat-table">
310        <tbody>
311          <tr>
312            <th>
313              機能
314            </th>
315            <th>
316              Android
317            </th>
318            <th>
319              Firefox Mobile (Gecko)
320            </th>
321            <th>
322              IE&nbsp;Phone
323            </th>
324            <th>
325              Opera Mobile
326            </th>
327            <th>
328              Safari Mobile
329            </th>
330          </tr>
331          <tr>
332            <td>
333              基本的なサポート
334            </td>
335            <td>
336              {{ CompatUnknown() }}
337            </td>
338            <td>
339              {{ CompatUnknown() }}
340            </td>
341            <td>
342              {{ CompatUnknown() }}
343            </td>
344            <td>
345              {{ CompatUnknown() }}
346            </td>
347            <td>
348              {{ CompatUnknown() }}
349            </td>
350          </tr>
351        </tbody>
352      </table>
353    </div>
354    <h2 id="See_also">
355      参照
356    </h2>
357    <ul>
358      <li>font 関連の CSS プロパティ: {{ CSS_Reference:Fonts() }}
359      </li>
360    </ul>

前に戻る