CSS

A mechanism that enables the use of custom fonts on web pages.

@font-face

　CSSの @font-faceは、ウェブページを見る人がパソコンにインストールしていない特別なフォント（文字のスタイル）を使えるようにする仕組みです。考えてみてください、自分だけのユニークな文字で手紙を書きたいけど、友達のパソコンにはその文字がないという状況を。@font-faceを使えば、その特別な文字をウェブページと一緒に送ることができるので、友達もあなたの選んだ文字で手紙を読むことができます。

　具体的には、@font-faceルールを CSSファイルに書き込むことで、フォントファイルをウェブサイトにリンクします。そして、そのフォントをウェブページ内のテキストに適用させることができます。これにより、デザイナーや開発者は、標準のフォントに限定されることなく、ページの見た目をカスタマイズできます。

　例えば、こんな感じで書きます。

CSS

@font-face {
	font-family: フォント名; /* ここに好きなフォント名を設定 */
	src: url(フォントファイルのURL);
	オプション;
}

　そして、このフォントを使いたいときは、CSS内で以下のように指定します。

CSS

body {
	font-family: フォント名, sans-serif; /* 最初にカスタムフォント、それがダメなら代替フォント */
}

　この仕組みによって、ウェブサイトの見た目をより個性的に、そして美しくすることができます。ただし、すべてのフォントが @font-faceで使えるわけではないこと、そしてフォントによってはライセンス（使用許可）が必要な場合もあることに注意が必要です。

値の指定方法

フォント名

　任意のフォント名を指定します。font-family、fontプロパティを使うときに、この値を指定すると、@font-face規則で指定した Webフォントで表示されます。

　フォントの名前は、@font-face {...} 内で

CSS

font-family: 名前;

の書式で指定します。ここで指定する名前は、フォントのファイル名とは異なる名前をつけられます。

フォントのURLとファイル形式

　URLとファイル形式は、@font-face {...} 内で

CSS

src: url(URL) format("形式");

の書式で指定します。

　URLに Webフォントのファイルがある URLを指定します。

　Webフォントのファイル形式として指定できる値は、以下の通りです。フォントのURLに続けて、半角スペースで区切って記述します。フォントのURLとフォントの形式はセットは、カンマ（,）で区切って複数指定できます。

format("woff")
Web Open Font Formatフォントです。
format("truetype")
Truetypeフォントです。
拡張子 .ttf
format("opentype")
OpenTypeフォントです。
拡張子 .ttf, .otf
format("embedded-opentype")
Embedded-OpenTypeフォントです。Internet Explorer 8以降で必要とされる形式です。
拡張子 .eot
format("svg")
SVGフォントです。

　ただし、IE はフォントのフォーマットとして EOT(Embedded OpenType) 形式にしか対応していません。しかも、format() の書式に未対応で、「format("embedded-opentype")」のように指定するとフォントが適用されなくなりますのでご注意ください（format() の指定は必須ではありません）。

オプション

　以上に加えて、以下のプロパティと値を指定可能です。unicode-rangeは CSSプロパティではありませんが同様にして指定できます。

font-style
フォントのスタイルを指定します。
font-weight
フォントの太さを指定します。
font-stretch
フォントの幅を指定します。
font-variant
フォントのスモールキャップを指定します。
font-feature-settings
OpenTypeフォントの使用を指定します。
unicode-range
Webフォントの適用範囲を指定します。
unicode-range

　unicode-rangeは、ウェブページ上で特定の文字範囲に特別なフォントを使いたいときに便利な機能です。例えば、英語の文字と日本語の文字で異なるフォントを使いたい場合にこの設定が役立ちます。

　unicode-rangeを使うと、フォントが適用されるべき文字の範囲を指定できます。これは、文字にはそれぞれユニークなコードが割り当てられていて、これを「ユニコード」と言います。unicode-rangeでは、このユニコードを使って、どの文字にどのフォントを使うかを細かく設定できます。

　たとえば、あなたがウェブページで使いたい特定の漢字にだけ特別なフォントを適用したい場合、その漢字のユニコード範囲を指定して、その範囲に該当する文字にのみそのフォントが使われるように設定できます。

　こうすることで、ウェブページのテキストが読みやすく、かつ美しく表示されるようになります。また、必要なフォントデータの量を減らすことができるため、ウェブページの読み込み速度を速くする効果も期待できます。

CSS

@font-face {
	font-family: MyFont;
	src: url(path/to/font.woff);
	unicode-range: U+30A0-30FF; /* この範囲は、カタカナのユニコード範囲 */
}

　この例では、カタカナにのみ MyFont が適用されます。このように unicode-rangeを使うことで、文字ごとに最適なフォントを使うことができるようになり、よりコントロールされたウェブデザインが可能になります。

日本語の文字に対応するユニコード範囲
ひらがな（Hiragana）: U+3040-309F
この範囲には、標準的なひらがな文字セットが含まれています。
カタカナ（Katakana）: U+30A0-30FF
標準的なカタカナ文字セットがこの範囲に含まれます。
カタカナ補助（Katakana Phonetic Extensions）: U+31F0-31FF
小さなカタカナ文字や特殊な発音記号が含まれます。
CJK統合漢字（CJK Unified Ideographs）: U+4E00-9FFF
一般的に使用される漢字がこの範囲に含まれます。
CJK統合漢字拡張A（CJK Unified Ideographs Extension A）: U+3400-4DBF
より稀に使われる漢字が含まれます。
CJK統合漢字拡張B（CJK Unified Ideographs Extension B）〜E:
U+20000-2A6DF（拡張B）
U+2A700-2B73F（拡張C）
U+2B740-2B81F（拡張D）
U+2B820-2CEAF（拡張E）
非常に稀な漢字や古典的な文献で使用される漢字が含まれます。
半角および全角形（Halfwidth and Fullwidth Forms）: U+FF00-FFEF
半角および全角のラテン文字、カタカナ、句読点などが含まれます。
CJK互換文字（CJK Compatibility Forms）: U+FE30-FE4F
縦書きテキスト用の特定の記号や、他の範囲との互換性のための文字が含まれます。

　これらのユニコード範囲を利用することで、ウェブページやアプリケーションでの日本語テキストの正確な表示と処理が可能になります。特に多言語サイトや日本語を豊かに表現したい場合、適切な範囲の指定が重要になります。

一般的な言語と文字セットのユニコード範囲

　これらの範囲は、ウェブページやアプリケーションで特定の言語や記号を適切に表示するために設定することができます。例えば、ウェブサイトが多言語対応であり、特定の言語で書かれたテキストに特有のフォントを適用したい場合、unicode-rangeを使用してその言語の文字に対応するユニコード範囲を指定することで、見た目をカスタマイズできます。このようにして、デザイナーや開発者は、ウェブページ上での文字の表示をより細かく制御し、ユーザーにとって読みやすく魅力的なコンテンツを提供することが可能になります。

　unicode-rangeの利用は、特に多言語サイトや文化的な多様性を反映したデザインにおいて重要です。異なる言語の文字に適したフォントを選択することで、テキストの可読性を高め、各言語の文化的なニュアンスを尊重することができます。

　例えば、アラビア語のテキストにはナスタリーク書体を、ラテン文字にはサンセリフフォントを適用することで、それぞれの言語の特性に合った表現を実現することが可能です。このように unicode-rangeを使用することで、ウェブページ全体のデザインと一貫性を保ちつつ、言語ごとに最適化されたフォントを適用することができます。

　また、特定の範囲の絵文字や特殊記号に対しても、このプロパティを用いて特別なフォントを割り当てることができます。これにより、ウェブサイトの表現力を高め、ユーザーエクスペリエンスを向上させることが可能になります。

　unicode-rangeの活用は、ウェブデザインにおける表現の幅を広げるための強力なツールです。適切なフォントの選択と組み合わせによって、ウェブページはより魅力的で、ユーザーフレンドリーなものになります。

Sample

　以下の使用例では「ふい字置き場」にて公開されている日本語フリーフォント「おひさまフォント」を使用しています。Webフォントを使用する際は、ライセンス的な問題がないことを事前に確認するようにしてください。

HTML

<p class="sample">こんにちは、遊戯苑へようこそ。</p>

CSS

@font-face {
	font-family: OhisamaFont;
	src: url(https://www.yugien.xyz/OhisamaFont11.ttf) format("truetype");
}

.sample { font-family: OhisamaFont; }

こんにちは、遊戯苑へようこそ。

Browser support

Data on support for the fontface feature across the major browsers from caniuse.com
Data on support for the font-unicode-range feature across the major browsers from caniuse.com