問題タブ [webfonts]

これは非常に単純な質問であることを願っていますが、多くのグーグルが答えを見つけられていません!

Extended-DをサポートするJunicodeを使用して、Latin Extended-D セットの Unicode 文字を Web ページ ( Extended-D の PDF 説明)に表示したいと考えています。

表示したいコードは「A760 LATIN CAPITAL LETTER VY」です。

これは私のページの全文です:

そして、これは私のスタイルシートがどのように見えるかです:

確認したところ、Junicode が正しく読み込まれています。しかし、最初の Unicode 文字は ῦ として正しく表示されますが、2 番目の文字&#A760はページにリテラルしか表示されません。

これを Unicode 拡張 D 文字 A760 として表示する必要があることをどのように示すことができますか?

initialise2つの条件が満たされたときにトリガーしたい関数がアプリにあります：1）ウィンドウがロードされました：および$(window).load()2）Typekitがロードされました。

現時点では、このコードは、ウィンドウが読み込まれるまで（画像などのすべてのリソースを含む）待機してから、Typekit Webフォントの読み込みを開始します。その後、読み込みが完了すると、初期化されます。

ただし、ウィンドウが読み込まれる前にTypekitを読み込む必要があります。それらは非同期でロードする必要があります。それで：

現在、Webフォントは非同期で読み込まれていますが、問題は、 1）ウィンドウが読み込まれたときと2）Typekitが読み込まれinitialiseたときの両方でのみトリガーする関数が必要なことです。$(window).load()Typekitがロードされる前にウィンドウがロードされる場合もあれば、その逆の場合もあります。

だから私の質問は、initialise私の両方の基準が満たされたらすぐにトリガーするにはどうすればよいですか？

Android でローカル Web ページをレンダリングし、ローカルで参照される Web フォントをwoff、ttfおよびsvg形式 ( HTTP 経由でフェッチされない) に含めます。ただし、これらは 2 つの異なるデバイス (API 2.2 および 2.3) ではまったくレンダリングされず、コンソール ログは空のままです。もちろん、フォントは、Web フォント対応のブラウザーや、Android で使用されている WebKit バージョン (533.1) より古い (529.x) 古い WebKit バージョンでさえ、正常に機能します。パズルで欠けているピースの手がかりはありますか?

大量のGoogleWebフォントを1つのページに読み込むためのより良い方法はありますか？

ページの読み込み中に特定のものの読み込みを遅らせる可能性がありますか？または、ユーザーが特定のポイントまでスクロールダウンした後にのみ特定のフォントをロードしますか？

仕方がないのですが、いくつかのフォントをロードするより良い方法があると思います。Googleの「フォントコレクション」に2つまたは3つ入れた後、ページの読み込みは明らかにかなり高くなっています。

たくさんのフォントを使ってデザインすることで厄介なことをしようとはしていませんが、見本のようなもので、たくさんのフォントを表示するためのより良い方法を考えようとしています。

最良の例は、 Myfontsの無限スクロールだと思います。これらのフォントはWebフォントを使用して表示されないことは知っていますが、Webフォントをロードする同様の方法があるはずです。つまり、グーグルはどのようにしてこれらすべてのフォントをホームページにロードするのでしょうか？

Web サイトで Ubuntu フォントを使用しようとしています。FontSquirrel @font-face ジェネレーターを使用しています。Ubuntu フォントがインストールされているコンピューターでは、font-family: Ubuntu. しかし、他のコンピューターでは、どの特定の品種が好きfont-family: UbuntuRegularかを明示的に指定しない限り、機能しませんfont-family: UbuntuBoldItalic。これは、すべてのブラウザで同じ状況です。

毎回体重とスタイルを宣言しなければならないのはばかげています. 一般的なフォントファミリを宣言し、必要に応じて太字と斜体を自動的に使用する方法はありませんか?

フォント「Lato」、フォントの太さ100のGoogleのWebフォントAPIを使用しています。

デスクトップブラウザでは、すべてが正常に表示されることをテストしました。ただし、iPadまたはiPhone（両方ともiOS5）でWebページを表示すると、フォントが非常に薄く、正しく表示されているように見えるのはドットだけです。

Javascript、LINK-Tag、CSS @importメソッドを使用してフォントを実装しようとしましたが、すべて同じ結果になります。

FAQで、次のように述べられていることがわかりました。GoogleWeb Fonts APIは、Android2.2以降やiOS4.2以降（iPhone、iPad、iPod）を含む最新のモバイルオペレーティングシステムの大部分で確実に動作します。以前のiOSバージョンのサポートは制限されています。

つまり、うまくいくはずですよね？これを解決する方法はありますか？

ありがとう

私はさまざまなブラウザでWebフォントの問題に取り組んでおり、最新の推奨ソリューションと思われるFontSpringの推奨事項に従っています。

ただし、CDNを使用していて、別のドメインからCSSファイルを提供していると、IEもFirefoxもCDNからWebFontsをロードせず、などのエラーが発生することがすぐにわかりました@font-face failed cross-origin request。私のCSSには、次のようなものがありました。

ご覧のとおり、フォントへのパスはCSSを基準にしているため、フォントはCDNから読み込まれません。フォントが同じオリジンからロードされるように、サイトのドメインでスタイルシートにハードコーディングする必要がありました。したがって、私の新しいスタイルシートは次のようになります。

そして今、組み込みドメインを使用すると、すべてがHTTPSおよびHTTPトラフィック全体で完全に機能します。ただし、フォントファイルを提供するためにCDNを使用しなくなったため、完全に満足しているわけではありません。また、パフォーマンスを重視しています。クロスオリジンドメインの問題を回避できないように思われるため、代わりにフォントを埋め込むことを検討してきました。http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntaxを見ると、次のようにdata-uri埋め込み形式が推奨されていることがわかります。

だから私はこれについてかなりの数の質問があります：

• 確かに、TTFおよびWOFF形式のBase64エンコーディングを使用してスタイルシートにフォントを2回埋め込むと、スタイルシートのデータが2倍以上になることで、埋め込みの利点が失われる可能性があるまで、スタイルシートを膨らませることになります。
• なぜこの例ではsrc：が各url（data：...）の前に使用されていないのですか。これはタイプミスですか、それとも意図的なものですか？
• フォントを埋め込む場合、すべてのブラウザーはEOTバージョンよりも埋め込まれたバージョンを使用するため、サーバーのラウンドトリップを節約できますか？埋め込まれたTTFまたはWOFFファイルを使用するブラウザはどれですか？
• EOTバージョンを埋め込まないのはなぜですか？

この投稿にはかなりの部分が含まれていることに感謝しますが、この投稿が同じジレンマに直面している他の人にも役立つことを願っています。

マット

私はいくつかの Google Web Fonts を使用しています。Google はさまざまなブラウザ間のすべての問題に対処し、リクエスト ヘッダーのブラウザに応じてさまざまなメディアを提供していると聞いています。

私の質問は、どの時点でこれを行うのですか?

その理由は、API の場合、@font-faceリクエストを含む CSS ファイルを単純に含めることができるからです。その CSS を独自の CSS ファイルに単純に含めて、HTTP リクエストを保存することはできますか? または、CSS は、それを要求するブラウザーに応じて変更されますか?

それが理にかなっていることを本当に願っています。

たとえば、Google は CSS ファイルに次の内容を含めることを推奨しています。

@import url(http://fonts.googleapis.com/css?family=Exo);

その内容は次のとおりです。

Google Font Loader を使用して、いくつかの Google Web フォントをロードしています。

数値形式で重量を指定する推奨形式をロードするフォントを指定すると、機能しないことに気付きました。Google Font Loader がwf-istokweb-n7-inactive を挿入するため、ボールド バリアントのフォント ロードが機能しないことがわかっています。

動作しません:

作品:

ライブデモをご覧ください。(注: jsfiddle は iframe 内にあるため、追加されたクラスを表示するには iframe のタグを掘り下げる必要があります。)

では、フォントの太さを数値で指定するのは適切な方法ではありませんか? それとも、この特定のフォントの異常ですか?

古いブラウザー (例: IE6、Opera9 など) を含むすべてのブラウザーで同じフォントを表示したい場合、どちらを選択するか、または両方を選択する必要があります @font-faceかWeb-font? また、どちらがより速くロードされるか知りたいですか?