フォントの種類
|
1 2 3 4 5 6 7 8 9 |
/*フォントの種類をゴシック体にする*/ font-family:"ＭＳ ゴシック",sans-serif; /*指定したフォントが、ユーザーのパソコンやスマートフォンに入ってない場合を想定*/ font-family:フォント名1,フォント名2,フォント名3; /*一般の指定サンプル*/ body { font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } |
font-familyに指定できる値
「フォント名」または「総称フォントファミリー名」を指定します。ユーザーの環境によって表示するフォントの種類が異なりますので、複数のフォントを指定するのが一般的です。また、特別に見せ方への拘り、デザイン的な事由などの事情を除き、ゴシック体で表示させるのが一般的です。
また、iPhoneが主としているブラウザ「safari」は、デフォルトでは「明朝体」を表示する仕様となっていますので、font-familyの記述が必須と言えます。
【フォント名】
特定のフォント名を指定し、(ダブルクォーテーション)または(シングルクォーテーション)で記述します。
“ＭＳ ゴシック”
“Osaka”
【総称フォントファミリー名】
同じようなスタイルに属する総称(グループ名)です。
- sans-serif
- ゴシック体フォント(セリフのない書体)
- serif
- 明朝体系フォント(セリフがある書体・書体部に太細がある。)
|
1 2 3 4 |
/*ゴシックの場合*/ font-family: "ＭＳ ゴシック",sans-serif; /*明朝の場合*/ font-family: "ＭＳ 明朝",serif; |
こんにちわ。今日は、いいお天気ですね。
でもあしたは雨みたいですよ。
フォントのサイズ
|
1 |
font-size:値 |
文字列のサイズを指定します。値には、文字列のサイズを「数値+単位」で指定するか「絶対サイズのキーワード」で指定する方法もあります。
【文字の単位について】
| px (ピクセル) | 数値に px の単位をつけて指定します。px とは１ピクセルを１とする単位で，実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。 |
|---|---|
| em (エム) | 数値に em の単位をつけて指定します。em とは現在使用中の標準フォントの高さを１とする単位です。 |
| ex (エックスハイト) | 数値に ex の単位をつけて指定します。ex とは現在使用中の標準フォントの小文字の｢x｣の高さを１とする単位です。 |
| % (パーセント) | 親要素のフォントのサイズを基準にして割合を％値で指定します。 |
【サイズに関するキーワード】
| xx-large | 最も大きいサイズ |
|---|---|
| x-large | |
| large | |
| medium | 標準サイズ（初期値） 14～16pxになっている場合が多い |
| small | 小さいサイズ |
| x-small | |
| xx-small | 最も小さいサイズ |
※フォントの大きさは、環境によってかなり異なります。何も指定のないデフォルト（標準）サイズは、14～16pxになっている場合が多いが、明確に特定できないのが現状です。
【その他】
普段よく使うmmやcmセンチメートルなどの絶対指定による単位は、cssでは使いません。また、近年のウェブは、多様なデバイス環境で見ることが増えているので、パーセンテージを指定することが増えている傾向にあります。
フォントの太さ
太字にする
font-weight:bold;
|
1 |
font-weight:値 |
【値について】
normal …… 標準の太さ。
bold …… 一般的な太字で表示
lighter …… 相対的に一段階細く表示します。
bolder …… 相対的に一段階太く表示します。
100～900・・100刻みで指定する方法もあります。(ブラウザによっては指定不可)
フォントスタイル
フォントを斜体にする
font-style:italic
|
1 |
font-style:値 |
【値について】
normal・・標準フォント（斜体にしない）で表示します。
italic・・イタリック体フォントで表示します。
oblique・・斜体フォントで表示します。