10

私たちは私たちのサイトでいくつかのウェブフォントを使用しています、例えば

<link href="http://fonts.googleapis.com/css?family=Anton" 
    rel="stylesheet" type="text/css">

IE8のバグのため、他の方法で回避する必要はありません。サイトの作成者には、Webフォントを指定するときにフォールバックフォントを提供しないことをお勧めします。たとえば、次の代わりに：

font-family: 'Anton', "Arial Black", sans-serif;

..行う...

font-family: 'Anton';

これが問題を引き起こす可能性がある実際のシナリオはありますか？つまり、提供しているフォントのフォールバックを提供する必要があるのはなぜですか？

4

11 に答える 11

5

Googleフォントは@font-faceタグを使用します。フォールバックフォントは、@ font-faceがサポートされていないか利用できない場合に、デザイン/レイアウトの一貫性を保つことを目的としています。

参照：http ：//webdesignerwall.com/tutorials/css3-font-face-design-guide

于 2012-08-21T16:41:29.247 に答える
5

フォールバックを使用しないということは、次のことを完全に信頼していることを意味します。

  • あなたのサイトは常に良好なインターネット接続でロードされます
  • 外部フォントアセットは、リクエストした場所で常に完全に利用できます
  • フォントが読み込まれない場合、サイト内の影響を受けるテキストは、フォントがなくてもまったく問題なく表示されます。

これらのいずれかに同意できない場合は、はい、元の選択が利用できない場合に備えて、フォールバックとして設計されたフォールバックフォントを使用する必要があります。

于 2012-08-29T19:52:22.317 に答える
4

Googleの「フォントサーバー」がダウンしているか、到達できないか、そうでない場合、ブラウザはデフォルトのフォントにフォールバックすると思います。したがって、その場合は、フォールバックフォントを自分で定義しておくと便利な場合があります。

于 2012-08-21T17:08:47.953 に答える
3

Googleが到達不能になるという問題があるとは思えません。ただし、一部のブラウザは、ダウンロードされたフォントが使用可能になるまでフォールバックフォントを使用します。

Googleから：https ：//developers.google.com/webfonts/faq

ブラウザがフォントファイルをロードしている間、テキストはどのように表示されますか？

ブラウザの動作は、ブラウザの種類によって異なります。フォントファイルがロードされた後にのみテキストを表示するものもあれば、フォントスタックからのフォールバックフォントを使用し、フォントが使用可能になったときにページを更新するものもあります。後者の動作は、一般に「スタイルなしテキストのフラッシュ」と呼ばれます。ブラウザの詳細については、技術的な考慮事項のページを参照してください。

フォントの読み込み中にブラウザがどのように動作するかをより細かく制御するには、WebFontLoaderを使用します。

于 2012-08-29T14:09:00.470 に答える
2

...フォントのアプリケーションによって異なります：

関連するデザイン

  • アプリの上に余分な砂糖を追加するデザインリソースの場合は、間違ったスタイルの要素を表示する代わりに、そのフォントを使用してテキストを残す方が安価で、おそらくより良いでしょう。例：大きな特別な文字や背景のサイン（例： "？！＃）
  • 非常にデザイン中心のページにとって重要な場合-より良いフォールバックは、静的なグラフィックスか、フォントからレンダリングされたもの（Typeface / sIFR / Cufon）です。

関連する機能

  • デフォルトのインタラクションアイテム（送信/ボタン/リンクなど）に特別なフォントを使用する
  • フォントを使用して、ナビゲーション要素などの一意のアイコン（Raphael経由のアイコンセット）を配信します。これは、ユーザーの既知および未知の部分に影響を与えるため、フォールバックを処理するために絶対に不可欠です。これで、IE8の問題について理解し、それらを処理するための努力をしたくありませんが、実際のすべてのブラウザーとシステムはどうなりますか？ユーザーベースシステム（イントラネット/企業環境）を知っているか、今すぐ拡張するために処理できない場合より大きなサポート（市場投入までの時間/開発コスト）に今のところそれを残しても大丈夫

コンテンツのスタイリング

  • これは完璧なフォールバックシナリオであり、追加費用は発生せず、顧客は引き続き記事やヘッドラインなどを読むことができます。この場合、フォールバックの可能性を残すのは悪い方法です。
  • 標準フォントが指定されていない場合、印刷サポートが失敗する可能性があります（印刷の問題の例）
  • コンテンツを読みやすくするために、コントラストと読みやすさを向上させたり、フォントを削除したりするオペレーティングシステム/アシストシステムは、独自のフォントまたはデフォルトのフォントを使用します

私は確かにいくつかのアプリケーションを見逃しています-より良いヘルプのために、いくつかの例で最良の場合、使用法のタイプを指定してください。ただし、すべての場合（外部リソースが読み込まれていると想定することはできません）、ユーザーにアプリを処理してもらいたい場合は、ネットワークの信頼性、速度、またはシステムの制限に関係なく、ユーザーに処理を許可してください。

よろしく。

于 2012-08-28T20:07:40.133 に答える
2

少なくとも1つのフォールバック（serifまたはsans-serif）を提供することは常に良い考えです。このフォントは、@ font-faceリクエストが失敗した場合、またはロードに時間がかかりすぎる場合に表示されます。

さらに、googleフォントローダーを使用して、Webサイトの読み込み方法をきめ細かく制御できます。

https://developers.google.com/webfonts/docs/webfont_loader

于 2012-08-29T18:35:50.870 に答える
1

マーフィーの法則を除いて、ウェブ上では何も信用しないでください。

私は常にフォールバックを示します（<offtopic>と反対側では、StylishやGreasemonkeyよりもQuickJavaのように、サイトごとにフォントフェイスを非アクティブ化するFirefox拡張機能を探していますposition: fixed。くだらないウェブサイト。一部のデザイナーからの不適切な選択や悪用にうんざりするときに、ユーザーがそれを使い始めることを期待してください。すべてではありません。 </ offtopic>）gzipで縮小して10〜16バイトかかるためです。スタイルシートで、私の場合は他の問題は発生しません。

それがあなたに問題を引き起こすならば、それから賛否両論を比較検討して決定してください。

フォールバックがあります。これは、デフォルトのファミリ（ serif）のデフォルトのフォントです。TimesまたはTimesNewRomanほとんどの場合（私が信じている一部またはほとんどのLinuxを除く）。

OS X、Windows、Ubuntuでサイトがserifでうまく表示される場合は、問題の1つを解決しました。
もしあなたが〜なら：

  • XP、W7、OS X、UbuntuのFirefox、IE、Chromeとは異なるレンダリングで、「Cleartype」が使用されているか、ユーザーによってアクティブ化されていない場合でも、ピクセルパーフェクトなレンダリングが期待されます。
  • heightの代わりに使用min-height
  • 等々

訪問者が使用するシステムからあまり期待してはいけない難しい方法を学ぶかもしれません。

于 2012-08-28T20:12:25.923 に答える
1

非JSブラウザ用のフォールバックフォントを提供する必要があります。確かに、デスクトップではこれはまれな問題であり、商品を販売する場合にのみ関連する可能性があります。ただし、さまざまなデバイスをサポートする必要があるレスポンシブデザインの場合は、JS以外のフォールバックが必要です。

于 2012-08-30T18:23:43.807 に答える
0

はい、フォールバックフォントを提供する必要があります。それらを持っていることはあなたにもっと大きなコントロールを与えますが、それらを持っていないことはあなたをクライアントの慈悲に任せます。http://cssfontstack.com/は、適切なフォントを見つけるための優れたリソースです。

于 2012-08-30T18:34:24.937 に答える
0

そのスタイルシートのリンクにアクセスすると、...

@font-face {
   font-family: 'Anton';
   font-style: normal;
   font-weight: 400;
   src: local('Anton'), 
   url(http://themes.googleusercontent.com/static/fonts/anton/v3/tilmJBBU81h1G7ZsdY3Hmw.woff) format('woff');
}

ユーザーがアクトンのローカルコピーを持っているlocal('Acton')ように見えるので、local('Acton'), url('http://themes.google...), local('Arial');代わりに次のようなものを書いて、グーグルのAPIを介したものではなく、独自の編集済みスタイルにリンクすることができます...しかし、それかどうかはわかりませんA）正しく機能するか、B）一部の利用規約に違反します（理由はわかりませんが）。

于 2012-08-25T17:22:45.700 に答える
0

Googleが提供する「woff」形式は、すべてのブラウザとデバイスで機能するわけではありません。

ブラウザがサポートするフォーマットの小さなリストを次に示します。

  • .TTF： Firefox 3.5以降、Opera 10以降、Safari 3.1以降、Chrome4.0.249.4以降
  • .EOT： InternetExplorer4以降
  • .WOFF： Firefox 3.6以降、Internet Explorer 9以降、Chrome5以降
  • .SVG： iPadとiPhone

'woff'形式をレンダリングできないシステムは、Times NewRomanまたはシステムのデフォルトフォントが何であれ、ほとんどの場合使用します。それでよければ、Googleのサービスに問題はありません。

そうでない場合は、 Font Squirrel @ font-face Generator（または同様のコンバーター）を使用してフォントの必要なすべてのフォーマットを作成し、@font-faceを使用してサーバーから直接フォーマットをロードすることをお勧めします。

例えば。

@font-face {
font-family: 'EnigmaticRegular';
src: url('../fonts/Enigma__2-webfont.eot');
src: url('../fonts/Enigma__2-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/Enigma__2-webfont.woff') format('woff'),
     url('../fonts/Enigma__2-webfont.ttf') format('truetype'),
     url('../fonts/Enigma__2-webfont.svg#EnigmaticRegular') format('svg');
font-weight: normal;
font-style: normal; 
}
于 2012-08-30T08:34:05.383 に答える