ホーム / Front-end Developer Handbook /

フロントエンド技術を学ぼう 2-14.Webフォントとアイコンについて学ぶ

2020年7月25日土曜日

CSS Design Front-end Developer Handbook

t f B! P L

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

第24回はPart II: Learning Front-End Devから、14項のLearn Web Fonts & Iconsを紹介します。

Webフォントとアイコンについて学ぶの説明です。


Webフォントとアイコンについて学ぶ

Webタイポグラフィとは、World Wide Web上でのフォントの使用を指します。
HTMLが最初に作成されたとき、書体とスタイルは各Webブラウザの設定によってそれぞれ制御されていました。Netscapeが1995年にHTML 3.2仕様で標準化したタグを導入するまで、個々のWebページがフォント表示を制御する仕組みはありませんでした。

ただし、タグで指定されたフォントをユーザのコンピュータにインストールするか、ブラウザのデフォルトのサンセリフまたはモノスペースフォントなどのフォールバックフォントを使用する必要があります。最初のCascading Style Sheets(CSS)仕様は1996年に発行され、同じ機能を提供しました。

CSS2の仕様は1998年にリリースされ、フォントマッチング、合成、ダウンロードを追加することでフォント選択プロセスを改善しようとしました。これらの手法はあまり使用されず、CSS2.1仕様では削除されました。

しかしInternet Explorerは、1997年にリリースされたバージョン4.0のフォントダウンロード機能をサポートしました。

その後、CSS3フォントモジュールにフォントのダウンロードが追加され、Safari 3.1、Opera 10、Mozilla Firefox 3.5に実装されました。これにより、Webのタイポグラフィへの関心が高まり、フォントのダウンロードも増加しました。

参照元：英語版Wikipedia


タイポグラフィ

タイポグラフィとは活字の配置や大きさなどのバランスを整えることを指しますが、Web上でもそれは可能です。

Beautiful Web Type a Showcase of the Best Typefaces from the Google Web Fonts Directory(Google Webフォントディレクトリによる、美しい書体のショーケース)は、Googleが公開しているGoogle Font上のWebフォントを使用したショーケースです。

Google FontはフリーのWebフォントリソースで2017年6月現在、819のフォントファミリーが無料で利用できます。フォントの選択は、Find great Google Fontsの様なツールを使うと便利です。


Webフォントを使用する

Webフォントを利用するにはCSS内で、@font-faceを使用してフォントファミリーを読み込みます。

@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.ttf');
}

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

font-familyでCSS内で使用するフォントファミリー名を設定し、src:url()でフォントファイルの場所を指定します。

Reference from Quick Guide to Webfonts via @font-face(Webフォントのクイックガイド via @font-face)


FOUT

Webフォントを読み込むまでの時間、ブラウザはフォールバックフォントを表示します。これをFOUT(Flash of Unstyled Text)といい、整形されていないフォントが表示されるこの現象と戦うべく様々なテクニックが試行されています。

Zach Leatherman氏がA Comprehensive Guide to Font Loading Strategies(フォント読込戦略の包括ガイド)という記事にてWebフォント読み込みの最適化方法をいくつか挙げており、中でも以下2つの方法が勧められています。

簡単に2つの方法を説明すると、FOUT with a Classは全てのWebフォントが読み込まれたタイミングを待ってからフォールバックフォントを置き換えます。

それに加えてCritical FOFT with Data URIは、フォールバックフォントが表示されないように最低限のフォントファミリーをbase64形式で読み込んでおき、その後にWebフォントに置き換えます。

参照元： A Comprehensive Guide to Font Loading Strategies(フォント読込戦略の包括ガイド)


一般的な学習リソース


QooQ