Webページでのカスタムフォントの使用
テキストコンテンツは常にウェブサイトの重要な部分でしたが、ウェブの初期の段階では、デザイナーや開発者はウェブページ上にあるタイポグラフィコントロールに厳しい制限がありました。 これには、サイトで確実に使用できるフォントの制限が含まれていました。 あなたは過去に言及した "ウェブセーフフォント"という言葉を聞いた可能性があります。 これは、人のコンピュータに含まれる可能性が高いフォントの小さなセットを指していました。つまり、それらのフォントの1つを使用してサイトを作成した場合、人のブラウザに正しく表示されるという確かな賭けでした。
今日、Web専門家には、新しいフォントとタイプオプションのホストがあり、その1つはWOFFフォーマットです。
WOFFとは何ですか？
WOFFは "Web Open Font Format"の略語で、CSS @ font-faceプロパティで使用するフォントを圧縮するために使用されます。 これは、Webページにフォントを埋め込む方法で、前述のWebセーフフォントの一部である典型的な "Arial、Times New Roman、Georgia"以外の特殊なフォントを使用することができます。
WOFFは、Webページのフォントをパッケージ化するための標準としてW3Cに提出されました。 これは2010年11月16日の作業草案になりました。現在、WOFF 2.0があります。これは、フォーマットの最初のバージョンからほぼ30％圧縮を改善します。 場合によっては、これらの節約はさらに重要なものになります。
なぜWOFFを使用するのですか？
WOFF形式で配信されるWebフォントを含むWebフォントは、他のフォントの選択肢よりも多くの利点を提供します。 これらのWebセーフフォントが有用であると同時に、まだそれらのフォントのための場所がまだ存在しているので、私たちの選択肢を広げて、タイポグラフィオプションを開くのも良いことです。
WOFFフォントには、次の利点があります。
- 彼らはイメージとしてのフォントよりもアクセスしやすいです。 WOFFは、CSSを使ってプレーンなHTMLテキストを作成し、イメージが許されないアクセシビリティとデザインコントロールを提供します。
- WOFFファイルには、文脈形式や古い形式の図形などの活字情報が含まれています。 近似だけでなく、正しい文字を使用しているので、これはあなたのWebページに優れたタイポグラフィを与えます。
- WOFFフォントは、他の言語の文字を含むフォントを埋め込むことができるため、国際化に役立ちます。
- すべてのCSSスタイルのテキストと同様に、WOFFで書式設定されたフォントは、より多くの検索エンジンに役立ちます。 検索エンジンは画像に埋め込まれたテキストを「見る」ことはできません。また、ALTテキストは役立ちますが、テキストそのものに代わるものはありません。
- WOFFフォントは圧縮されているので、他の種類のフォントファイルよりも小さくなります。 これは、サイトのダウンロード速度と全体的なパフォーマンスに役立ちます。
- 企業フォントをWOFFファイルとして埋め込むことによって、ブランド識別を保持するためにWOFFファイルを使用することができます。
WOFFブラウザのサポート
WOFFは現代のブラウザで優れたブラウザサポートを提供しています。
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9以降
- Opera 11.1以降
- Safari 5.1以降
最近Opera Miniのすべてのバージョンが唯一の例外として、本質的にボード全体でサポートされています。
WOFFフォントの使い方
WOFFファイルを使用するには、WOFFファイルをWebサーバーにアップロードし、@ font-faceプロパティで名前を付けてからCSSでフォントを呼び出す必要があります。 例えば：
- myWoffFont.woffというフォントをWebサーバーの/ fontsディレクトリにアップロードします。
- あなたのCSSファイルに@ font-faceセクションを追加してください：
@ font-face {
font-family：myWoffFont;
src：url（ '/ fonts / myWoffFont.woff'）書式（ 'woff'）;
}
- 他のフォント名と同じように、CSSフォントスタックに新しいフォント名（myWoffFont）を追加します：
p {
font-family： myWoffFont 、Geneva、Arial、Helvetica、sans-serif;
}
WOFFフォントを入手する場所
商業的かつ非商用の目的で無料のWOFFフォントをたくさん見つけることができる素晴らしい場所が2つあります。
- フォントライブラリを開く
- フォントリス
WOFF形式では利用できないフォントを使用するライセンスがあれば、Font SquirrelのようなWOFF作成者を使ってフォントファイルをWOFFファイルに変換することができます。 MacintoshとWindowsでTrueType / OpenTypeフォントをWOFFに変換するために使用できるsfnt2woffというコマンドラインツールもあります。
ご使用のシステムに適したバイナリをダウンロードし、コマンドライン（またはターミナル）で実行し、指示に従います。
WOFFの例
WOFFファイルのいくつかの例を以下に示します。WOFF 24時間後のHTML5ページ。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：7/11/17