@Font-face を宣言する
CSS ファイルの先頭で @font-face を宣言し、フォントが保存されている場所へのパスを指定します。
@font-face {
font-family: myFont;
src: url(font_vietvang.woff2);
}
myFont : 宣言されたフォント名
font_vietvang.woff2 : woff2 で宣言されるフォントのファイル。
ブラウザのサポート
たくさんのフォント形式から選択できます
ただし、あるブラウザーをサポートしていても、別のブラウザーをサポートしていない形式もあります。
新しいブラウザのサポートはありますが、古いブラウザのサポートはありません。
=> したがって、それを効果的に使用したい場合は、それを明確に理解する必要があります。
最適な使い方
ほとんどのブラウザをサポートしているため、TTF、OTF、または WOFF 形式のフォントを選択するのはそのためではありませんか? . それぞれのフォントについてよりわかりやすく解説していきます。
Web でフォントフェイスを使用する場合は、1 つのフォントフェイスでさまざまな形式を使用する必要があります。
なぜそうなのか
一般的な宣言順序: woff2 -> woff -> ttf/otf -> svg -> eot。 複数のフォント読み込みパスを宣言する場合。 ブラウザは左から右の順に検索します。サポートされている形式の場合は、その形式で再構築され、他の形式は読み込まれません。
- 最初に woff2 を使用する理由
- このフォントは最も軽いフォントであるためです。 ページをロードする際のスペースの量が削減されます。
- ただし、低バージョンのブラウザをサポートしていないという欠点があります。
- ウォフ：
- 同様にwoff2より重いです。
- ただし、それよりも低いバージョンの多くのブラウザが使用されます。 したがって、優先順位は 2 番目になります。
- ttf/otf
- この形式のフォントは、多くの低バージョンのブラウザをサポートします。 特にsafariは3.1以降から対応可能です。
- しかし、その欠点は非常に重いです。
- svg, eot :
- 上記のブラウザ サポート表を見れば、それがわかります。 サポートされているブラウザはほとんどありません。
- ただし、その利点は、非常にローエンドのブラウザをサポートしていることです。 例: eot は IE 6 からサポートできます。 個人的には、この 2 つのフォントをほとんど使用しません。 なぜなら、今ではこのような非常に低いバージョンを使用する人はもういないため、サポートするブラウザは非常に少ないものの、ストレージ容量は大きい => それが私が使用しない理由でもあります。
=> 目的に応じて適切なフォント形式を選択できます
