2

Chrome と Firefox でレンダリングされた ttf ファイルを取得しようとしましたが、うまくいかないようです。.woff ファイルのレンダリング中は正常に動作しています。

からコレクションをダウンロードし、http://www.google.com/webfonts#UsePlace:use/Collection:Philosopher名前を に変更してPhilosopher-Regular.ttfから、次のことfancyfont.ttfを試しました。

@font-face {
    font-family: 'Fancyfont';
    src: url('fonts/fancyfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

しかし、フォントがウェブページに追加されていないようです。ただし、woffファイルの名前をfancyfont.woffに変更して試してみると:

@font-face {
    font-family: 'Fancyfont';
    src: url('fonts/fancyfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

その後、Chrome と Firefox ですべて正常に動作します。

ブラウザーにレンダリングされている ttf ファイルを見たので、この問題の解決策はありますか?

4

3 に答える 3

4

Google Font API Web サイトから TTF をダウンロードしないでください。フォントをダウンロードするためのものではありません。@font-face代わりに、使用したいフォントの定義を含むスタイルシートにリンクします。

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

(複数<link>のフォントが必要な場合は、複数の を含めないでください。代わりに、ツールを使用して、ページに必要なすべてのフォントをコレクションに追加すると、適切な<link>タグが生成されます。)

Google にフォントをホストさせることは、よく知られている jQuery の CDN を使用するようなものです。ユーザーのかなりの部分が、サイトにアクセスする前に既にフォントをキャッシュしている可能性が十分にあります (同じフォントを使用している他のサイトを閲覧したことがあります)。

API からリンクする CSS は、実際にはGoogle のサーバーによって個々のリクエストごとに生成され、ユーザーのブラウザに合わせて調整されることに注意してください。ユーザー エージェントに基づいて、最も適切な形式 (WOFF、EOT、TTF など) が選択され、それらのみがスタイルシートにリストされます。

WOFF のような形式はサイズの点で TTF よりもはるかに効率的であるため、ほとんどのブラウザーでは TTF バージョンが表示されることはありません。ただし、心配はいりません。フォントはすべてのブラウザで正しく表示されます。

于 2013-01-18T06:28:36.910 に答える
-1

実際の問題は、TTFファイルの名前を変更できないか、名前を変更してはならないということでした。私が同じことをしたので、それらはブラウザによってレンダリングされていませんでした。WOFFの名前は圧縮ファイルであるため、名前の変更は問題ありません。

Philosopher-Regular.ttfこの問題は、フォント面を次のように使用したときのように、間違いなく名前が変更されていました。

@font-face {
    font-family: 'Fancyfont';
    src: url('fonts/Philosopher-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

それはうまくいきました。

于 2013-01-18T06:48:42.580 に答える