161921

Purple town

応用編　その３【FONT】

応用編　スタイル宣言　その３　文字の入れ替え【FONT指定】

２を見てお解りのようにスタイルの表示方法は<div style="指定のスタイル"> ～ </div>。
あとは改行の幅によって『p』にするか『div』にするかである。
指定は『"タグの種類:その指定"』。複数ある場合は『"タグの種類:その指定同種のタグ:その指定"』か『"タグの種類:その指定;別のタグ:その指定"』と入力します。
いままでやってきたタグと大きな違いは一つのスタイルにいろいろなタグを混ぜることが出来ること。

まずは文字を指定してみましょう。

font-style

指定できる値は標準（normal）、イタリック体（italic）、斜体（oblique）です。

<p style="font-style: italic;"> styleの定義 </p>

styleの定義

font-variant

指定できる値は標準（normal）かスモールキャップ（small-caps）です。
スモールキャップとは、小文字の表示形式が小文字サイズの大文字になっているものを指します。指定したフォントにスモールキャップがない場合には大文字を縮小したものを小文字として表示します。

<p style="font-variant: small-caps;"> styleの定義 </p>

styleの定義

font-weight

文字の太さを指定します。
種類は全部で９種類。
数字で指定する場合は100、200、300、400、500、600、700、800、900。
キーワード指定は以下の通り。ただしMacはnormalかboldの表示にしかならないかも。
normal（標準の太さです。数値400と同じ）
bold（一般的な太字の太さです。数値700と同じ）
lighter（相対的に一段階細くします）
bolder（一段階太くします）

styleの定義

<div style="font-weight: 100;"> styleの定義 </div>
<div style="font-weight: 200;"> styleの定義 </div>
<div style="font-weight: 300;"> styleの定義 </div>
<div style="font-weight: 400;"> styleの定義 </div>
<div style="font-weight: 500;"> styleの定義 </div>
<div style="font-weight: 600;"> styleの定義 </div>
<div style="font-weight: 700;"> styleの定義 </div>
<div style="font-weight: 800;"> styleの定義 </div>
<div style="font-weight: 900;"> styleの定義 </div>
<div style="font-weight: normal;"> styleの定義 </div>
<div style="font-weight: bold;"> styleの定義 </div>
<div style="font-weight: lighter;"> styleの定義 </div>
<div style="font-weight: bolder;"> styleの定義 </div>

font-family

フォント名が指定できる。
フォントの種類はカンマ（ , ）で区切って複数の候補を並べることができます。
より先に記述されているものから優先されます。ない場合もしくは機種によって反映されません。
ダサ字,Impact,Arial,ＭＳ明朝 etc

またはキーワードで指定することも出来ます。
sans-serif（ゴシック系のフォント）
serif（明朝系のフォント）
cursive（筆記体・草書体のフォント）
fantasy（装飾的なフォント）
monospace（等幅フォント）

<p style="font-family:平成明朝,ＭＳ明朝,serif; "> styleの定義 </p>

styleの定義

font-size

文字サイズ指定です。単位はpx（ピクセル）、pt（ポイント）、in（インチ）、cm（センチ）、mm（ミリ）、pc（バイカ）、em、ex、%のいずれか。
キーワードは７つあります。xx-small、x-small、small、medium、large、x-large、xx-large。
mediumが標準サイズです。大きさが1段階づつ上下します。

<div style="font-size: 10px;"> styleの定義 </div>

styleの定義

<div style="font-size: 1cm;"> styleの定義 </div>

styleの定義

<div style="font-size: xx-small;"> styleの定義 </div>

styleの定義

指定する際に優先順位が発生します。
font-style＝font-variant＝font-weight＞font-size＞line-height＞font-family

line-heightについては次で解説します。

この回のおさらい。
<div style="font-style:oblique;font-weight:900;font-size: 2em;font-family:平成明朝,ＭＳ明朝,serif;"> 斜体で太さが900。2emの明朝体。 </div>

斜体で太さが900。2emの明朝体。

<div style="font:oblique 900 2em 平成明朝,ＭＳ明朝,serif;"> 斜体で太さが900。2emの明朝体。 </div>
これでもＯＫ。

斜体で太さが900。2emの明朝体。

ジャンル別一覧