CSSでのネットワークフォントの使用

3759 ワード

css

現在,ウェブページに直接ネットワークに格納されているフォントを指定することは可能である,いわゆるWeb Fontsである.
まず、ブラウザでサポートされているWebフォントのフォーマットを見てみましょう.
(1)TrueType形式、ファイル接尾辞ttf.これはよく使われるベクトルフォントの中で最も古いものです.
(2)OpenType形式、ファイル接尾辞otf.これはTrueTypeフォント形式の代替版です.
(3)EOT形式、ファイル接尾辞eot.フルネームEmbedded Open Typeは、マイクロソフトがネットワークの状況に合わせて改善したフォントフォーマットです.
(4)WOFF形式、ファイル接尾辞はwoff.フルネームWeb Open Font Formatは、Mozilla財団が2009年に発売したフォントフォーマットで、すぐにFirefox 3.5、Chrome 6.0、IE 9.0、Opera 11.10、Safari 5.1などの主流ブラウザがこのフォントフォーマットをサポートし始めた.
(5)SVG形式で、接尾辞はsvgである.SVGはベクトルパターンのフォーマットであり、フォントフォーマットとしてもよい.Chrome 4+,Opera 10+,Safari 3.1+などのブラウザではこのフォーマットのフォントはサポートされていますが、IEやFirefoxではサポートされていません.
ネットフォントを使う方法も簡単で、CSSで@font-face属性を指定するだけでOKです.例:

@font-face {

    font-family: 'Outliner';

    src: url('http://example.com/outliner.ttf');

}

しかし、ブラウザによってサポートされるフォントのフォーマットが異なり、実際には複数のフォントを用意し、次のようにロードする必要があります.

@font-face {

    font-family: 'Outliner';

    src: url('outliner.eot');

    src: url('outliner.eot?#iefix') format('embedded-opentype'),

         url('outliner.woff') format('woff'),

         url('outliner.ttf') format('truetype'),

         url('outliner.svg#outliner') format('svg');

    font-weight: normal;

    font-style: normal;

}

上記のコードは、IE 9の互換モードを含むブラウザ間の考慮に加えて、ブラウザが余分なHTTP接続を開始しないことを保証します.理由は参考資料のFontspringの詳細を見ることができます.
注意FirefoxおよびIE 9+では、ドメイン間でネットワークフォントを使用することは許可されていません.これは、フォントサーバにCORSを設定する必要があります.Firefoxでローカルページを開き、@font-faceのsrcにたとえばsrc('.../font/myfont.woff')では、このフォントは使用できません.
もう一つの問題は、様々なネットフォントのMIME-Typeが何なのかということです.EOTフォントとSVGフォントには正式なMIME-Typeがあり、それぞれアプリケーション/vndである.ms-fontobjectとimage/svg+xml.他のいくつかのネットフォントはまだ正式なMIME-Typeがないので、いろいろな使い方があり、混乱しています.しかし、一時的にアプリケーション/octet-streamを使用しても問題はないはずです.EOTフォントの場合、W 3 Cはアプリケーション/font-woffとしてMIME-typeを登録する予定です.
参考資料:[1]Webフォントフォーマット紹介およびブラウザ互換性一覧[2]@font-face - Mozilla Developer Network[3]Correct MIME Type for CSS Web Fonts[4]Web Fonts: No MIME Types, No Problem[5]IANA | MIME Media Types[6]Mime type for WOFF fonts?[7]Register an Internet Media Type for a W3C Spec[8]WOFF File Format 1.0[9]Create Your Own @font-face Kits | Font Squirrel[A]Bulletproof @font-face syntax - Paul Irish[B]The New Bulletproof @Font-Face Syntax | Fontspring[C]Further Hardening of the Bulletproof Syntax | Fontspring
[YAML] Update: 2013-12-01 11:07:00

データベース内の改行記号(n)htmlインタフェースでは認識できません.

ASP.NET MVC 3学習ノート5(Controller)