font-face詳細

@font-faceはCSS 3のモジュールであり、その主な役割はカスタムフォントをウェブページに埋め込むことであり、ウェブページフォントの運用をWebセキュリティフォントに限定することなく
もっと素晴らしい

その他のテクニカルブログは、asing 1 elife’s blog

に移動してください.
構文

webFontName:入力したカスタムフォント名は、指定した要素にfont-family: webFontName

を追加します.

source:フォントパス

format:ブラウザの認識を支援するフォントフォーマット、truetype opentype truetype-aat embedded-opentype svg...

weight:フォントが太字かどうか

style:フォントスタイル

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

書式設定

truetype - ttf

WindowsとMacで最も一般的なフォント

RAW形式で、どのWebサイトにも最適化されていない

IE9+、Firefox3.5+、Chrome4+、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フォント最適フォーマット

は、オープンtruetype、opentype圧縮バージョン

です.

は、メタデータパケットの分離

をサポートする.

IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+

embedded-opentype - eot

IE専用フォント

truetypeからこのフォーマット

を作成できます.

IE4+

svg - svg

svgレンダリング

に基づく

Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

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

使用

カスタムフォントの元のファイルを取得し、DaFontに

をダウンロードできます.

Font Squirrelで各ブラウザに対応するWebフォント

にフォントを変換する.

上記の互換性構文に従って@font-faceのフォント

を指定する.

指定要素でカスタムフォント

を呼び出す