トップ > Web > CSSに変数を使い、さらに文字種ごとにフォントを変える

CSSに変数を使い、さらに文字種ごとにフォントを変える

Web

フォントを変えよう

ウェブサイトの中にはMS PゴシックをCSSで強制してくるものがあります。とくに古くからあるものだとその割合は高いです。ブラウザ設定で自分好みのフォントにしていてもそのサイトだけはダサく見える…、そんなこともあるかと思います。そんな時にはStylishを使ってブラウザ側で書き換えてしまいましょう。

Stylishとは

FirefoxとChromeで使えるアドオンです。CSSを上書きすることで、あらゆるサイトの見た目を好きなように変えてしまえます。 例えば

body {
  background-color: red;
}

このように書いておけばbodyタグ以下のページ要素、すなわちページ全体に対して背景色を指定できます。この場合は真っ赤になります。

何ができるの

とまあ、ここまではご存知のかたも多いでしょう。ここからが本題です。 お伝えしたい点は3つです。

  1. CSSで(LESSやSASSではなく)も変数が使える
  2. @font-faceのsrcというプロパティでローカルにあるフォントファイルを指定できる
  3. @font-faceのunicode-rangeというプロパティでフォントを適用する文字を絞り込める

では具体的に見ていきます。

CSSで変数を使う

このように指定します。

:で始まる名前が名前空間を表し、変数名の先頭には--を付けます。

:root {--font-japanese: "源ノ角ゴシック";}
body {
  font-family:　var(--font-japanese);
}

こうすることで、別のフォントに変えたい時、編集が楽になります。この例では意味がありませんが、CSSが複雑に、長大になってくると効果を発揮します。 ただこれは、残念ながらFirefoxだけしか対応していないようで、Chromeでは使えないのが難点です。

srcプロパティ

ふつうこのようにsrcはサーバーの別ディレクトリーにあるフォントを指定する時に使います。

@font-face {
  font-family: "MS Pゴシック";
  src: url('/fonts/myfont.ttf');
}

が、local()を使うと自分のパソコンに入っているフォントファイルを使う事ができます。 さらに先述の変数化と組み合わせると

@font-face {
  font-family: "MS Pゴシック";
  src: local(var(--font-japanese));
}

unicode-rangeプロパティ

さて、ここまででも十分にウェブサイトを美しいフォントで表示できるようになりました。 しかしまだ残念な点があります。というのは、上掲のCSSをそのまま書いてしまうと、アルファベットや数字まで日本語フォントに引きずられてしまうのです。そのほうが統一感があってよい、という人にはここからの話は関係ありませんが、実際問題アルファベットはアルファベット専用に設計されたフォントで見るほうがより綺麗に見えます。そんな時にはどうするか?

@font-face {
  font-family: "MS Pゴシック";
  src: local(var(--font-japanese));
  unicode-range: U+0080-FFFF;
}

unicode-rangeにはUnicodeの番号を、その名の通りハイフンで繋いで範囲として指定します。この場合80番からFFFF番まで…つまり英数字以外全部です。英数字には別途指定することもできます。また、うまく数字を区切れば、ひらがなだけ、カタカナだけ、キリル文字だけ、サンスクリット文字だけ、というようなこともできるかもしれません。

私の使っているものを晒そうと思いましたが、結構な分量だったので別記事に分けることにします。

zauberer.hatenablog.com