■キー割当表示 [Shift-H] ─ KeyNavi:キーボードを活用して 
ホームページを快適に─
 
ホーム [0] テキスト指定例リスト:1.目次 [1] 4. スタイルシート フォント関連 ・サイトマップ [Shift-S]

テキスト指定例リスト
 ■ 4. スタイルシート フォント関連

【このページ内のトピック: 「Ctrl-矢印」でフォーカス移動・「G/T」連打で自動ナビ】
4.1 フォント名:font-family
4.2 文字のサイズ:font-size
4.3 文字の太さ:font-weight
4.4 イタリック:font-style
4.5 スモールキャップ:font-variant

注1: 「NS,NN=Netscape Navigator」「IE=Internet Explorer」の略です。
注2: ブラウザ名で特に指定が無いものはWindows版についての記述です。
注3: 基本的に スタイルシートの各指定例は<div style="...">などと インラインで行っています。

 ■ 4.1 フォント名:font-family

詳しくは6. フォントファミリー指定例 を参照。
指定内容 日本語 英語
指定無し
美しい日本語
Stylish English
"MS Pゴシック"
美しい日本語
Stylish English
Osaka
美しい日本語
Stylish English
sans-serif
美しい日本語
Stylish English
Arial, sans-serif
美しい日本語
Stylish English
Arial, "MS Pゴシック", Osaka, sans-serif
美しい日本語
Stylish English
"Times New Roman", "MS P明朝", "平成明朝", sans-serif
美しい日本語
Stylish English

IEでは欧文フォントを先に指定した場合に 和文フォントが採用されないことがあります。 例えば最後の例を IEでみると日本語で明朝体が採用されていません。 IEのフォント処理

 ■ 4.2 文字のサイズ:font-size

他の指定例については7. フォントサイズ指定例 を参照。
また詳しい情報については8. 各種フォントサイズとブラウザ互換性 を参照。
指定内容 日本語 英語
指定無し
美しい日本語
Stylish English
x-small
美しい日本語
Stylish English
small
美しい日本語
Stylish English
medium
美しい日本語
Stylish English
large
美しい日本語
Stylish English
0.8em
美しい日本語
Stylish English
1em
美しい日本語
Stylish English
1.2em
美しい日本語
Stylish English
14px
美しい日本語
Stylish English
16px
美しい日本語
Stylish English
18px
美しい日本語
Stylish English
10pt
美しい日本語
Stylish English
12pt
美しい日本語
Stylish English
14pt
美しい日本語
Stylish English

 ■ 4.3 文字の太さ:font-weight

IE3ではbold,lighterは動作。数値,bolder,normalは動作せず。 normalを指定しても親要素から継承する。 親要素がboldの場合lighterを指定すると細くできる。
NS4ではbolder,lighterを数値で処理している?為なのか、 デフォルトではbolderを2回以上入れ子にすれば太字になる。
指定内容 日本語 英語
指定無し
美しい日本語
Stylish English
100
美しい日本語
Stylish English
200
美しい日本語
Stylish English
300
美しい日本語
Stylish English
400
美しい日本語
Stylish English
500
美しい日本語
Stylish English
600
美しい日本語
Stylish English
700
美しい日本語
Stylish English
800
美しい日本語
Stylish English
900
美しい日本語
Stylish English
bold
美しい日本語
Stylish English
bolder
美しい日本語
Stylish English
lighter
美しい日本語
Stylish English
normal
美しい日本語
Stylish English

 ■ 4.4 イタリック:font-style

italicもobliqueも同様に斜体にするだけに見えます。
IE3,NS4ではobliqueを指定しても変化がありません。 IE3ではnormalを指定しても親から継承します。
指定内容 日本語 英語
指定無し
美しい日本語
Stylish English
italic
美しい日本語
Stylish English
oblique
美しい日本語
Stylish English
normal
美しい日本語
Stylish English

 ■ 4.5 スモールキャップ:font-variant

小文字を小さ目の大文字に変換 (これがCSSでできるのは面白いですね。)
IE3,NS4サポート外。
IE4-5.5では全体的に若干小さ目の大文字で表示されるだけのようです。 IE6.0,NS6.0,6.1では動作します。 IE4-5.5,NS7.0では日本語部分も小さくなるようです。
指定内容 日本語 英語
指定無し
美しい日本語
Stylish English
small-caps
美しい日本語
Stylish English
normal
美しい日本語
Stylish English





ページの先頭へ     


前のページへ
次のページへ
テキスト指定例リスト 目次 【数字キーでアクセス】
例 : 「2.1節」は「2」キーを2回連打して移動。「Q or P」で戻る。
「Ctrl-矢印」でフォーカス移動。
1. 目次
2. HTMLテキスト関連一般
3. HTML その他
4. スタイルシート フォント関連
4.1 フォント名:font-family
4.2 文字のサイズ:font-size
4.3 文字の太さ:font-weight
4.4 イタリック:font-style
4.5 スモールキャップ:font-variant
5. スタイルシート テキスト関連
6. フォントファミリー指定例
7. フォントサイズ指定例
8. 各種フォントサイズとブラウザ互換性
9. 縦書き(追加作成中)


ホーム [0] テキスト指定例リスト:1.目次 [1] 4. スタイルシート フォント関連 ・サイトマップ [Shift-S]
■キー割当表示 [Shift-H] ─ KeyNavi Project 2003 ─