開発備忘録＆ふと思ったこと

CSSで文字を太くするには、font-weight を使います。

CSS 文字を太くする方法

数値指定で太さを支持する場合

これは100を指定時の文字の太さです。
これは200を指定時の文字の太さです。
これは300を指定時の文字の太さです。
これは400を指定時の文字の太さです。
これは500を指定時の文字の太さです。
これは600を指定時の文字の太さです。
これは700を指定時の文字の太さです。
これは800を指定時の文字の太さです。
これは900を指定時の文字の太さです。

キーワード指定で太さを指示する場合

これはlighterを指定時の文字の太さです。
これはnormalを指定時の文字の太さです。
これはbolderを指定時の文字の太さです。
これはboldを指定時の文字の太さです。

lighterは、数値200と同じ太さです。
nomalは、数値400と同じ太さです。
bolderは、数値500と同じ太さです。
boldは、数値700と同じ太さです。

CSS ではなくタグで太さを指示する場合

これはタグbで太さを指定しています。
これはタグstrongで太さを指定しています。

文字の太さは上のように数値で指定したり、キーワードやタグで指示したりできます。

でも、指定したにも関わらず太さが変わらないものが有ります。
数値で言うと100~500は同じくらいに見えますよね？600と700も同じで800と900も同じように見えます。

変わらないのは使用していいるフォントがその太さを持っていないためです。このブログでは特にフォントを指定していないので、デフォルトのフォントが採用されているはずです。

下にGoogleが開発したNoto Sans Japanese フォントを使用した例を表示します。どうですか？フォントの太さの違いが分かりましたか？ 私のPC画面ではちゃんと太さが違って見えます。

これは100を指定時の文字の太さです。
これは200を指定時の文字の太さです。
これは300を指定時の文字の太さです。
これは400を指定時の文字の太さです。
これは500を指定時の文字の太さです。
これは600を指定時の文字の太さです。
これは700を指定時の文字の太さです。
これは800を指定時の文字の太さです。
これは900を指定時の文字の太さです。

CSSのコードを参考までに貼っておきます。なお、link タグは本来 head 部分に記述するものです。これが読み込めないとフォントを読み込めないので Noto Sans Japanese フォントで表示されません。

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">
<p >
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:100'>これは100を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:200'>これは200を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:300'>これは300を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:400'>これは400を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:500'>これは500を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:600'>これは600を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:700'>これは700を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:800'>これは800を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:900'>これは900を指定時の文字の太さです。</span><br>
</p>

下にGoogleが開発したNoto Sans JPフォントを使用した例を表示します。ちなみに私のPCではNoto Sans Japanese フォントに比べ、Noto Sans JPフォントでは違いが全然分かりませんでした。CSS の stylesheet の呼び出しに間違いがあるのかな？

これは100を指定時の文字の太さです。
これは200を指定時の文字の太さです。
これは300を指定時の文字の太さです。
これは400を指定時の文字の太さです。
これは500を指定時の文字の太さです。
これは600を指定時の文字の太さです。
これは700を指定時の文字の太さです。
これは800を指定時の文字の太さです。
これは900を指定時の文字の太さです。

Noto Sans Japanese と Noto Sans JP の違い

まず、「Noto Sans」と言うGoogleとAdobeが共同開発したフォントファミリーがあります。その中でWebで簡単に使えるのが、「Noto Sans Japanese」と「Noto Sans JP」フォントになります。他にも「Noto Sans CJK JP」フォントとかも有るのですが、Webでは「Noto Sans Japanese」と「Noto Sans JP」が使いやすいです。

Noto Sans Japanese と Noto Sans JP はGoogle fontsとして公開されていますが、Noto Sans Japanese はベータ版として認識されているようです。あとは、フォントの太さの段階(Weight)が7段階か6段階の違いがあります。下の表のようになっています。

数値600の指定はどちらも無いようです。
それにキーワードの異なっていますので、これから太さ指定をする時はキーワードを使わずに数値指定の方が無難そうですね。

以上、「CSS 文字を太くする」でした。