「※」のみフォントを変更したい
タイトルの通り、「※」のフォントのみを他のものに変えたい問題を@font-faceで解決します。
前提
CSSで以下のようなコードを記述すると、基本的に始めに記述してあるフォントから読み込まれ、文字そのフォントに無いorそのフォントが端末で利用不可の場合のみ、次のフォントが読み込まれます。
main.css
* {
font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif;
}
この状態で「※」を記述すると、YuGothicに「※」が存在するため、YuGothicが表示可能な環境ではYuGothicの「※」が表示されます。
しかしこのご時世、この文字だけこのFontで表示してほしいみたいな不思議な要望が来ることがあります
そんなとき、まず思いつくのは以下のようなコードです。
index.html
<html>
<style>
* {
font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif;
}
.kome {
font-family: 'Roboto', sans-serif;
}
</style>
<body>
<p><span class="kome">※</span>こんなことあるんか</p>
</body>
</html>
このコード、ココだけなら問題なさそうです。しかし、「※」の回数が増えたり、動的なコンテンツに対応したりすると辛いものがあります。
@font-faceを定義しよう
そんなときに役に立つのが@font-face規則というCSSの規則です。
これは独自fontを規定するための規則で、オンライン上やデバイス上のフォントを読み込み、font-familyプロパティで呼び出せる形式の名前を定義します。（GoogleFontsなどでimportをした際も@font-faceの塊がインポートされている）
@font-faceについて詳しくは上に記載のMDNのページを見てくれといった感じなのですが、実はこの規則、unicode-rangeで対象のフォントを読み込む範囲を限定できます。
main.css
@font-face {
//ここでのfont-familyは、名前の定義なので自分で名前をつける
font-family: 'kome';
//対象のFontを指定する、もちろんformatを指定してオンライン上やローカルのwoffファイルなどを参照することもできる。今回は面倒なのでRoboto
src: local("Roboto");
//unicodeの範囲指定により、フォントをロードする範囲を限定できる。今回は「※」一文字なので単一の指定(203Bは※のunicode)
unicode-range: U+203B;
//この定義により、※印だけロードされたRobotoのフォントを、「kome」という名前で利用可能になる。
}
* {
//komeフォントを最上位に設定。「※」以外の文字はkomeに存在しないため、下のfontがロードされる。
font-family: 'kome', 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif;
}
これでこのhtmlのすべての要素の「※」は「kome」というフォント名の元Robotoで表示される事になりました。そこからさらに出し分けたいみたいなことがあれば最初の例ようなspanタグ作戦をしましょう。