フォントプロパティコミュ

3.1千文字の記事

掲示板へ

記事編集

ニコニコ大百科:HTMLタグ一覧スタイルシートプロパティの一覧フォントに関するプロパティ

フォントに関するプロパティ一覧

フォントのサイズを指定する（font-size）
フォントの太さを指定する（font-weight）
フォントをイタリック・斜体にする（font-style）
フォントの種類を指定する（font-family）

クリックするとジャンプします

フォントのサイズを指定する

↑

プロパティ	適用対象
font-size	すべての要素

値
%指定	親要素のフォントサイズに対する割合を指定。
数値＋単位	数値に単位（px、exなど）を付けて指定。詳しくはこちら
xx-small	mediumより３段階小さい
x-small	mediumより２段階小さい
small	mediumより１段階小さい
medium	ブラウザの標準サイズ。ブラウザによってはsmallが標準サイズとされる事もある。
large	mediumより１段階大きい
x-large	mediumより２段階大きい
xx-large	mediumより３段階大きい

ニコニコ大百科では%指定、数値＋単位で指定する方法と、７段階の絶対サイズのキーワードで指定する方法が使えます。

使える単位にはpx、ex、emなどがあります。詳しくはこちらをご覧ください。

また大百科のデフォルトのフォントサイズは、h2で1.4em、h3で1.25em、h4で1.16em、h5で1em、h6で0.8em、sup及びsubで0.7em、その他で0.9emとなっています。

ソースコード
<p><span style="font-size:80%">文字の大きさ80%</span><br> <span style="font-size:100%;">文字の大きさ100%</span><br> <span style="font-size:120%;">文字の大きさ120%</span><br> <span style="font-size:2em;">文字の大きさ2em</span><br> <span style="font-size:2ex;">文字の大きさ2ex</span><br> <span style="font-size:14px;">文字の大きさ14px</span><br> <span style="font-size:22px;">文字の大きさ22px</span><br> <span style="font-size:xx-small;">文字の大きさxx-small</span><br> <span style="font-size:x-small;">文字の大きさx-small</span><br> <span style="font-size:small;">文字の大きさsmall</span><br> <span style="font-size:medium;">文字の大きさmedium</span><br> <span style="font-size:large;">文字の大きさlarge</span><br> <span style="font-size:x-large;">文字の大きさx-large</span><br> <span style="font-size:xx-large;">文字の大きさxx-large</span></p>
表示結果
文字の大きさ80% 文字の大きさ100% 文字の大きさ120 % 文字の大きさ2em 文字の大きさ2ex 文字の大きさ14px 文字の大きさ22px 文字の大きさxx-sm all 文字の大きさx-sm all 文字の大きさsm all 文字の大きさmedium 文字の大きさlarge 文字の大きさx-large 文字の大きさxx-large

フォントの太さを指定する

↑

プロパティ	適用対象
font-weight	すべての要素

値
normal	標準
bold	太字

ニコニコ大百科では上記の２種類の値のみとることができます。

大百科のデフォルトのフォントの太さは、dt・thでbold、その他でnormalとなっています。また一般的なブラウザでは、h2～6のフォントの太さはboldになります。

ソースコード
`<p><span style="font-weight:normal;">文字の太さnormal</span><br> <span style="font-weight:bold;">文字の太さbold</span></p>`
表示結果
文字の太さnormal 文字の太さbold

フォントをイタリック・斜体にする

↑

プロパティ	適用対象
font-style	すべての要素

値
normal	標準
italic	イタリック体
oblique	斜体（ほとんどの場合日本語フォントではイタリック体と同じ）

ニコニコ大百科では上記３種類の指定をすることができますが、日本語フォントでは多くの場合イタリック体と斜体が同じ様に表示されます。

また大百科のデフォルトのフォントスタイルはnormalとなっています。

ソースコード
`<p><span style="font-style:normal;">標準-Normal</span><br> <span style="font-style:italic;">イタリック体-Italic</span><br> <span style="font-style:oblique;">斜体-Oblique</span></p>`
表示結果
標準-Normal イタリック体-Italic 斜体-Obl ique

フォントの種類を指定する

↑

プロパティ	適用対象
font-family	すべての要素

値
sans-serif	ゴシック系のフォント
'MS PGothic'（'MS Pゴシック'）	Windowsにおける定番フォント。
'Mona'（'IPAMonaPGothic'、'IPA モナー Pゴシック'）	MS P ゴシックと同じ幅を持ったフリーフォント。

上の２番目、３番目のようにフォントネームを指定する際は名前を'～'（シングルクオーテーション）で囲んでください。

また,（カンマ）で区切る事によって、複数の候補を並べる事が出来ます。その場合、左から順に利用可能なものが選択されます。

ニコニコ大百科ではほとんどのフォントが指定できません。またフォントの種類を指定する際にエラーが頻発します。このプロパティを使うのはAAを張る時など最低限にとどめるべきでしょう。

ソースコード
`<p style="font-size: 16px; line-height: 18px; font-family: 'Mona','IPAMonaPGothic','IPA モナー Pゴシック','MS PGothic AA','MS PGothic','ＭＳＰゴシック',sans-serif;">` 　　　　　　　　　　　　　　　　　　＿　＿　　　　　.'　　，　．. ∧＿∧<br> 　　　　　　　　　　∧　　_　- ― ＝￣　￣`:,　.∴　'　　　　　（　　　）<br> 　　　　　　　　　,　-''￣　　　　＿＿――＝',　・,‘　ｒ⌒>　 _／／<br> 　　　　　　　　／　　　-―　￣￣　　￣"'"　. 　　’ \|　ｙ'⌒　　⌒i<br> 　　　　　　　/　　　ノ　　　　　　　　　　　　　　　　　\|　　／　　ノ｜<br> 　　　　　　/　　, ｲ）　　　　　　　　　　　　　　　　, ー'>>301／´ヾ_ﾉ<br> 　　　　　/　　_,　＼　　　　　　　　　　　　　　　／　,　　ノ<br> 　　　　　\|　　/ ＼　 `､　　　　　　　　　　　　／　／／<br> 　　　　　ｊ　 /　　ヽ　\|　　　　　　　　　　　／　／　,'<br> 　　　　／　ノ　　　｛　\|　　　　　　　　　／　／\| 　\|<br> 　　／　／　　　　\|　（_　　　　　　　　!､＿／ / 　〉<br> 　　`､＿〉　　　　　ー‐‐`　　　　　　　　　　　　\|_／</p>
表示結果
＿　＿　　　　　.'　　，　．. ∧＿∧ 　　　　　　　　　　∧　　_　- ― ＝￣　￣`:,　.∴　'　　　　　（　　　）　　　　　　　　　,　-''￣　　　　＿＿――＝',　・,‘　ｒ⌒>　 _／／　　　　　　　　／　　　-―　￣￣　　￣"'"　. 　　’ \|　ｙ'⌒　　⌒i 　　　　　　　/　　　ノ　　　　　　　　　　　　　　　　　\|　　／　　ノ｜　　　　　　/　　, ｲ）　　　　　　　　　　　　　　　　, ー'>>301／´ヾ_ﾉ　　　　　/　　_,　＼　　　　　　　　　　　　　　　／　,　　ノ　　　　　\|　　/ ＼　 `､　　　　　　　　　　　　／　／／　　　　　ｊ　 /　　ヽ　\|　　　　　　　　　　　／　／　,' 　　　　／　ノ　　　｛　\|　　　　　　　　　／　／\| 　\| 　　／　／　　　　\|　（_　　　　　　　　!､＿／ / 　〉　　`､＿〉　　　　　ー‐‐`　　　　　　　　　　　　\|_／

ソースコード

<p style="font-size: 16px; line-height: 18px; font-family: 'Mona','IPAMonaPGothic','IPA モナー Pゴシック','MS PGothic AA','MS PGothic','ＭＳＰゴシック',sans-serif;">


　　　　　　　　　　　　　　　　　 　＿　＿　　　　　.'　　，　．. ∧＿∧<br>
　　　　　　　　　　∧　　_　- ― ＝￣　￣`:,　.∴　'　　　　　（ 　　　）<br>
　　　　　　　　　,　-''￣　　　　＿＿――＝',　・,‘　ｒ⌒>　 _／ ／<br>
　　　　　　　　／　　　-―　￣￣　　￣"'"　. 　　’ |　ｙ'⌒　　⌒i<br>
　　　　　　　/　　　ノ　　　　　　　　　　　　　　　　　|　　／　　ノ ｜<br>
　　　　　　/　　, ｲ ）　　　　　　　　　　　　　　　　, ー'>>301／´ヾ_ﾉ<br>
　　　　 　/　 　_,　＼　　　　　　　　　　　　　　　／　,　　ノ<br>
　　　　 　|　　/ ＼　 `､　　　　　　　　　　　　／　／ ／<br>
　　　　 　ｊ　 /　　ヽ 　|　　　　　　　　　　　／　／　,'<br>
　　　　／　ノ　　　｛ 　|　　　　　　 　　　／　 ／| 　|<br>
　　 ／　／　　　 　|　（_　　　　　　　 　!､＿／ / 　 〉<br> 
　　`､＿〉　　　　 　ー‐‐`　　　　　　　　　　　　|_／</p>

表示結果

　　　　　　　　　　　　　　　　　　＿　＿　　　　　.'　　，　．. ∧＿∧
　　　　　　　　　　∧　　_　- ― ＝￣　￣`:,　.∴　'　　　　　（　　　）
　　　　　　　　　,　-''￣　　　　＿＿――＝',　・,‘　ｒ⌒>　 _／／
　　　　　　　　／　　　-―　￣￣　　￣"'"　. 　　’ |　ｙ'⌒　　⌒i
　　　　　　　/　　　ノ　　　　　　　　　　　　　　　　　|　　／　　ノ｜
　　　　　　/　　, ｲ）　　　　　　　　　　　　　　　　, ー'>>301／´ヾ_ﾉ
　　　　　/　　_,　＼　　　　　　　　　　　　　　　／　,　　ノ
　　　　　|　　/ ＼　 `､　　　　　　　　　　　　／　／／
　　　　　ｊ　 /　　ヽ　|　　　　　　　　　　　／　／　,'
　　　　／　ノ　　　｛　|　　　　　　　　　／　／| 　|
　　／　／　　　　|　（_　　　　　　　　!､＿／ / 　〉
　　`､＿〉　　　　　ー‐‐`　　　　　　　　　　　　|_／