Web ページに特殊フォントをインポートするための @font-face 属性の詳細説明_html/css_WEB-ITnose

@font-face は、主に独自に定義した Web フォントを Web ページに埋め込むための CSS3 のモジュールです。

文法規則

まず、@font-face の文法規則を見てみましょう:

@font-face {      font-family: <YourWebFontName>;      src: <source> [<format>][,<source> [<format>]]*;      [font-weight: <weight>];      [font-style: <style>];    }

font-family: : カスタム フォント名 (通常は導入されたフォント名に設定されます)。 -up フォントは、スタイル ルールでこの名前によって参照されます。
src: フォントの読み込みパスと形式を設定します。複数の読み込みパスと形式はカンマで区切ります。
srouce: フォントの読み込みパス。絶対 URL または相対 URL を指定できます。
形式: フォントの形式は主にブラウザの認識に使用され、通常、truetype、opentype、truetype-aat、embedded-opentype、avg などのタイプが含まれます。
font-weight と font-style は以前に使用されていたものと同じです。
src 属性の後には local(フォント名) フィールドもあります。これは、フォントがユーザー システムからロードされ、Web フォントが失敗した後にのみロードされることを意味します。

src: local(font name), url("font_name.ttf")

対応ブラウザ

フォント形式

@font-face の互換性の問題は、ブラウザごとに認識されるフォント形式が異なることです。
TrueType 形式 (.ttf)
Windows と Mac で一般的なフォント形式であるため、Web ページ用に最適化されていません。
対応ブラウザ：IE9+、FireFox3.5+、Chrome4.0+、Safari3+、Opera10+、IOS Mobile Safari4.2+

OpenType形式(.otf)
TrueTypeをベースにしており、独自形式でもありますが、より多くの機能。
ブラウザサポート: FireFox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、IOS Mobile Safari4.2+

Web Open Font format (.woff)
Web ページのための特別な最適化、したがってこれは、Web フォントの中で最も優れた形式であり、オープン TrueType/OpenType の圧縮バージョンであり、メタデータ パッケージの分離をサポートしています。
ブラウザサポート: IE9+、FireFox3.5+、Chrome6+、Safari3.6+、Opera11.1+

Embedded Open Type format (.eot)
IE 固有のフォント形式、この形式のフォントは TrueType 形式から作成できます。
ブラウザサポート: IE4+

SVG形式(.svg)
SVGフォントレンダリングに基づく形式。
ブラウザのサポート: Chrome4+、Safari3.1+、Opera10.0+、IOS Mobile Safari3.2+

これは、@font-face では少なくとも 2 つの形式のフォント、.woff と .eot、さらにはそのようなフォントが必要であることを意味します。 .svg は、より多くの閲覧バージョンをサポートするために必要です。

@font-face がより多くのブラウザーをサポートできるようにするために、Paul Irish は Bulletproof @font-face:

 @font-face {    font-family: 'YourWebFontName';    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */   }

Web フォントを入手

と呼ばれる独自の @font-face 構文を Google Web Fonts と Dafont.com のダウンロードに作成しました。 .ttf 形式のフォントを作成し、Font Squirrel を使用して .woff およびその他の形式のフォントを生成します。
Web フォントは次のサイトでも入手できます:
http://webfonts.fonts.com/
http://typekit.com/
http://kernest.com/
http://nicewebtype.com/fonts /

@font-face ファイル変換

推奨される @font-face ファイル変換 Web サイトをいくつか紹介します:
freefontconverter: http://www.freefontconverter.com/
font-facegenerator: https://everythingfonts.com/ font-face
オンライン フォント コンバーター: http://onlinefontconverter.com/
font2web
その他の変換ツールについては、次のアドレスを参照してください:

特別なフォントはすでにコンピューターにあります。今、入手する方法を見つける必要があります。 @font-face に必要なもの .eot、.woff、.ttf、.svg フォント形式。これらのフォント形式を入手するには、サードパーティのツールまたはソフトウェアも必要です。以下では、一般的に使用されるツール fontsquirrel をお勧めします

ページに入って上の画像が表示されない場合は、ナビゲーションを直接クリックしてください:

上記のインターフェイスが表示されたら、このツールを使用して @font-face に必要なさまざまなフォントを生成する方法を見てみましょう: まず、ダウンロードしたフォントをアップロードします:

アップロード後、次のように実行します。以下:

これで、Font Squirrel からダウンロードしたファイルがローカル コンピューターに保存されました。それを解凍すると、次のようなファイル リストが表示されます:

ここまでで、必要な SingleMalta をカスタマイズしました。最終的な効果まであと 1 ステップで、Web 内の DOM 要素に独自に定義したフォントを適用できます:

h2.singleMalta {       font-family: 'YourWebFontName'   }

参照アドレス:

http://www .w3cfuns.com/article-5597432-1-1.html