web-dev-qa-db-ja.com

ここで使用されているフォント技術は何ですか？

このイベントに参加している間（ http://worldtour.fogcreek.com/ ）このページには、左上隅のアドレス部分にカスタムフォントがあることに気付きました（例： "Fog Creek Software 55 Broadway Fl 55 ....」

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

彼らはここでどのようなテクニックを使用していますか？？？

seohtmlcssweb-developmentwebsite-design
8
J Lee

彼らは@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を使用しています。これにより、テキストにぼかし効果が作成されます。

13
Eli Gundry

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

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

読んでください。非常に興味深いコンセプトのようで、昨年ドラフトが作成されていたとしても広く受け入れられ始めています。

2
Matthew Brown

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

クイックスタートガイドは次のとおりです。 http://code.google.com/apis/webfonts/docs/getting_started.html

2
kwood