@Font-face の基本的な使い方と、すべてのブラウザと互換性を持たせる方法

@Font-face 基本紹介:

@font-face は、Web ページにカスタムフォントを表示できるようにする CSS2 構文です。クライアントマシンにフォントがインストールされていない場合でも、Web ページを表示できます。

この記事では、@font-face の基本的な使い方と、すべてのブラウザで使用する方法を紹介します。

@Font-face 基本構文:

@font-face { font-family: <a-remote-font-name>; src: <source> [,<source>]*; [font-weight: <weight>]; [font-style: <style>]; }

詳細については、こちらをご覧ください: https://developer.mozilla.org/en/css/@font-face

例:

@font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; }

font-family はフォントの名前、src はフォントのパスです。フォントはクライアントのローカルフォントまたはサーバー上のフォントになります。

@Font-face 現在のブラウザ互換性:

•Webkit/Safari (3.2+): TrueType/OpenType TT (.ttf)、OpenType PS (.otf)。
•Opera (10+): TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、SVG (.svg);
•Internet Explorer: IE4 以降では EOT 形式のフォントファイルをサポートしています。IE9 では WOFF をサポートしています。
•Firefox (3.5+): TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF (Firefox 3.6 以降)
• Google Chrome: TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF バージョン 6 以降
上記から、次の結論が得られます: .eot + .ttf /.otf + svg + woff = すべてのブラウザーを完全にサポートします。

すべてのブラウザに互換性を持たせる@Font-face メソッド:

@font-face 専用のフォントサイトがあります: http://www.fontsquirrel.com/fontface/generator

fontsquirrel の Web サイトでは、さまざまなフォント形式を生成し、CSS および HTML で直接デモを提供できる無料の @font-face Kit Generator ツールが提供されています。ウェブサイトに直接見積もりを送信できます。 fontsquirrel ウェブサイトで提供されているフォントを直接使用することも、独自のフォントをアップロードして使用することもできます。

@font-face キットジェネレーターのデモ
http://www.xunzou.com/demo/font-face/Chopin-Script-fontfacekit/demo.html
@font-face キットジェネレーターのデモ
http://www.font2web.com/

@font-face デモ
http://www.xunzou.com/demo/font-face/font-face.html

その他のフォントサービス:
Google Font API も優れたフォントサービスです。他のフォント代替としては、cufon などがあります。
Google フォント API の詳細については、前の記事を参照してください: http://www.xunzou.com/blog/post/619.html

<<: MySQL ディープページング問題の解決の実践記録

>>: TypeScript のユニオン型、交差型、型ガード