ここではどのフォント技法が使用されていますか?


8

このイベント(http://worldtour.fogcreek.com/)に参加していたときに、このページの左上隅にあるアドレス部分のカスタムフォント(「Fog Creek Software 55 Broadway Fl 55 ....」など)に気づきました。ソースコードを見たとき、彼らが何をしているのか実際には判断できませんでしたが、次の条件を満たしていました。

  1. IE 7,8(および他のすべてのブラウザー)で正常に動作します
  2. 必要なフォントを使用できます
  3. テキストベース、つまりフラッシュ、画像などではありません。したがって、SEOやインデックス作成などに適しています。

だから彼らはここでどんなテクニックを使っていますか?

回答:


13

彼らは@font-face技術を使用しています。さまざまなファイルといくつかの疑似ブラウザ検出を使用することにより、すべてのブラウザで一貫してフォントを提供できます。使用:

  • Webkit、Gecko、およびOperaのTrue TypeおよびWOFF
  • Internet ExplorerのEOT
  • iOS向けSVG

CSSは構造化されているため、フォントがローカルで使用可能かどうかを確認し、そうでない場合はIEである場合、EOTを使用し、他には何もロードしません。IEでない場合は、必要なフォントをロードします。

詳細についてはFont Squirrel、@ font-faceキット、@ font-faceフォントとCSSのジェネレーターをご覧ください。

彼らはまたtext-shadow、テキストの色に近い色で使用しています。これにより、テキストにぼかし効果が作成されます。


2

このWebサイトは、WOFF(World Open Font Format)と呼ばれるフォント技術を使用しています。現在、W3Cの推奨に基づいて標準化されています。フォントを直接Webページに埋め込むことができます。

http://en.wikipedia.org/wiki/Web_Open_Font_Format

読んでください。非常に興味深いコンセプトのようであり、昨年草案が作成されたにもかかわらず、広く受け入れられ始めています。


1
WOFFだけでは、実際にはすべてのブラウザーで機能するわけではありません(どちらのブラウザーを推測します)。そのため、EOTが必要です。
Lèseはmajesté

2

また、「Webセーフ」と見なされないフォントの使用を開始するための優れた方法であるGoogleのフォントディレクトリも確認してください。基本的には、適切なフォントのリンクタグを、それを使用するCSSの前のディレクトリに追加するだけです。Googleはユーザーエージェントを介してブラウザーを決定し、必要なfont-face cssを吐き出します。その後、「font-family」プロパティでフォントを使用できます。

こちらがクイックスタートガイドです:http : //code.google.com/apis/webfonts/docs/getting_started.html

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.