Webフォントの3点リーダが下に張り付くのを、3点リーダだけ日本語フォントで上書きして直す方法


本文

ネットでたまに、3点リーダ(…)が地球の重力に引かれてベースラインに張り付いているサイトがあるじゃないですか。まあ英字フォントを指定してるせいなんですけど。

かくいう当サイトもずっとそうなっていたのですが、気になるので直すことにしました。そのときに使った方法を記載しておきます。

この問題の大元の原因は、Unicodeが英字フォントと日本語フォントで違う文字のコード値を共有しているせいです。円マーク(¥)とバックスラッシュ(\)みたいなものですね。Unicodeの設計がクソとか文句を言っても今更変わることはないし、直したければこの仕様に従った上で正しい表示が得られる方法を考える必要があります。

問題の現象と、本来期待している表示結果

↑ベースラインに張り付いている3点リーダというのは、こういうやつです。

↑本来こうなって欲しいと期待している表示はこれです。

先行事例

有名な問題なので対策については先行事例がいくつかあります。適当にググって出てきたのは以下。

しかし、3点リーダ全部に lang="ja" を指定するとか、別のコード値の文字を使うとか、なんか嫌じゃないですか? 私は嫌です。フォントに依存する問題はフォントで解決するべきだと思うんですよ。というわけでフォントで解決します。

英字フォントを適用しても、3点リーダだけは日本語フォントを適用すればよい

CSS3には適用するWebフォントに対して使いたいグリフをUnicode値で指定すると、その部分だけ抽出してダウンロードする仕組みがあります。ならば英字フォントから3点リーダを外すように指定するか、もしくは日本語フォントから3点リーダだけ抜いて上書きさせればいいだけです。

スマホではWebフォントを使っていなくてもデフォルトフォントの時点で3点リーダが下付きで表示されてしまうので、3点リーダだけを抜き出して適用するほうがあらゆる環境に適応できますね。

というわけで、日本語フォントから3点リーダだけを抜き出して適用する方法を採用します。

Noto Sans JPから3点リーダだけ抜き出して適用する

ここではGoogle FontsからNoto Sans JPの3点リーダだけ抜き出します。もちろんNoto Sans JPでなくてもお好みのフォントを選んでもらってもよいです。

Googleフォントの実体はファイルが細かく分割されていて、CSSで複数指定してまとめられています。Noto Sans JPのCSS の中を3点リーダのコード値である「U+2026」で検索すると、116番目のファイルに格納されていることが分かります。なので、自分のサイトのCSSに以下のコードを追加すると、3点リーダだけ抜き出して使うことができます。

@font-face {
font-family: 'Noto Sans JP';
src: local('Noto Sans Japanese Regular'), local('NotoSansJapanese-Regular'), url(https://fonts.gstatic.com/s/notosansjp/v18/-F62fjtqLzI2JPCgQBnw7HFow2os2HUP5pp0erwTqsSGs8dLiZ-nVOFVLsE_RS1PblwsiBhLorUfH78.116.woff2) format('woff2');
unicode-range: U+2026;
}

※Noto Sans JPを既に使用している場合は名称が被らないように @font-face での font-family の指定を適宜変えてください。

あとはフォントを指定している箇所に対し、上で読み込んだ 'Noto Sans JP' (または自分で指定した名前)の優先度が高くなるように指定を追加します。 font-familyは最初に定義したものほど優先的に適用されるので、先頭で指定します。具体的には以下のような感じです。

font-family: "Noto Sans JP", "Roboto", …

結果

こうなる。

3点リーダが真ん中に表示されるようになりました。めでたしめでたし。