フォント

トップ > 逆引きリファレンス > フォント

フォントを変更するには

フォントを変更するにはスタイルシートの font-family を指定します。指定可能なフォント名は「フォントの一覧」を参照してください。空白文字を含むフォント名の場合は、'...' で囲んで指定します。

HTML
文字を <span style="font-family:'MS 明朝'">明朝体</span> で表示します。
表示
文字を 明朝体 で表示します。

文字のサイズを変えるには

文字のサイズを変更するにはスタイルシートの font-size を指定します。

HTML
通常の文字 <span style="font-size:16pt">16ptの文字</span>
表示
通常の文字 16ptの文字

太字にするには

太字にするには、<b> を用います。

HTML
<b>太い文字</b>
表示
太い文字

スタイルシートの場合は font-weight を用います。

HTML
<span style="font-weight:bold">太い文字</span>
表示
太い文字

太字にする目的が「強調」であれば、<b> ではなく <strong> を用いることが推奨されています。ブラウザによっては色を変えるなど、太字以外の手段で表現されることもあります。

HTML
<strong>強調された文字</strong>
表示
強調された文字

斜体にするには

斜体にするには、<i> を用います。

HTML
<i>Italic</i>
表示
Italic

スタイルシートの場合は font-style を用います。

HTML
<span style="font-style:italic">Italic</span>
表示
Italic

斜体にする目的が「強調」であれば、<i> ではなく <em> を用いることが推奨されています。ブラウザによっては色を変えるなど、斜体以外の手段で表現されることもあります。

HTML
<em>強調された文字</em>

下線を引くには

下線を引くには <u> を用います。

HTML
<u>下線文字</u>
表示
下線文字

スタイルシートの場合は text-decoration を用います。

HTML
<span style="text-decoration:underline">下線文字</span>
表示
下線文字

点線の下線を引くには

下線を点線にするには、border-bottom を使用します。

HTML
<span style="border-bottom:1px dotted gray">点下線</span>
表示
点下線

取り消し線(打ち消し線)を引くには

取り消し線(打ち消し線)を引くには <s><del> を用います。

HTML
<s>取り消し線</s>
<del>取り消し線</del>
表示
取り消し線 取り消し線

スタイルシートの場合は text-decoration を用います。

HTML
<span style="text-decoration:line-through">取り消し線</span>
表示
取り消し線

文字を点滅させるには <blink> を使用していましたが、現在では非推奨となっています。

HTML
<blink>この部分の文字が点滅します</blink>

JavaScript を用いて点滅を実現するには、下記のようにします。

HTML
<script>
window.addEventListener("load", function() {
    setInterval(function() {
        var objs = document.getElementsByClassName("blink");
        for (var i = 0; i < objs.length; i++) {
            obj = objs[i];
            if (obj.style.visibility == "visible") {
                obj.style.visibility = "hidden";
            } else {
                obj.style.visibility = "visible";
            }
        }
    }, 800);
});
</script>
<div class="blink">AAA</div>
表示

文字の右上に小さな数字を書くには

H2O(水)や、E=mc2 など、元素記号や 2乗を表すには、<sup><sub> を用います。

HTML
H<sub><small>2</small></sub>O
E=mc<sup><small>2</small></sup>
表示
H2O E=mc2

Copyright (C) 2003-2017 杜甫々
初版: 2003年10月12日、最終更新:2017年12月17日
http://www.tohoho-web.com/how2/font.htm