このページ: http://www.anasiamusic.com/bio.html本文 ("Ana Sia's DJ crate is a ticker...") のfont-familyプロパティは次のよう<div>に指定されています。
font-family: 'Economica', sans-serif
これがどのように機能するのか疑問に思っていました.IE7表示モードのInternet Explorerでも、期待どおりに表示されます。私は、Georgia、Verdana などの Web セーフ フォントをボディ コピーに特に使用してきましたが、このようなことを達成してクロスプラットフォーム対応にするためには、@font-face.
明らかに私は間違っています。誰かが説明し、おそらくさらに解明する可能性のある Web タイポグラフィに関するいくつかの優れたリソースを指摘できますか?
私のコンピューターには Economica がインストールされていないことに注意してください (Windows 7)。
Economica はGoogle Web Fonts (フォント標本へのリンク) によって提供されます。
このタグを介してロードされます。この<link>タグは、ページ ヘッドにあります。
<link href='http://fonts.googleapis.com/css?family=Economica:700' rel='stylesheet' type='text/css'>
次に、CSS ルールをサポートするブラウザーによって埋め込まれ@font-face、ページ内でレンダリングできるようになります。詳細について@font-faceは、CSS3 仕様を参照してください。
Google Web Fonts は、その規則と適切な形式を利用して、ブラウザーにフォントを埋め込むように指示します。次にブラウザはフォントをダウンロードし、それが理解できる形式である場合はレンダリングを試みますが、失敗すると、スタック内の次のもの (この場合は一般的なファミリsans-serif) にフォールバックします。本当にそれだけです。
最終的にダウンロードされるフォント形式はブラウザーに依存します。最新のブラウザーはWOFF形式のみをダウンロードする必要がありますが、IE7 などの古いブラウザーは、フォントを埋め込むために EOT と呼ばれる別の形式 (IE4 以降でサポートされています!) を受け取ります。他のブラウザーの以前のバージョンは、TTF、OTF、さらには SVG などの他の形式を取得する場合があります。この@font-faceような防弾構文に関する記事で、さまざまな形式とその使用法について詳しく読むことができます。
別のフォントで同様の問題が発生しました。私がしたことは、このサイトをここで使用し、指示に従ったことです。結局のところ、Font Jazz はすべてのフォント タイプを Web セーフに変換します。使い方もかなり簡単です。js ファイルは 2 つだけです。
それが役立つことを願っています!