8

@font-faceユーザーがフォントをインストールするのではなく、に切り替えようとしています（正確には、 TTFバージョンではなくTerminusフォントです）。

残念ながら、この画像に示されているように、リモートでホストされているファイルを処理するときに、フォントの奇妙な「太字」または「歪み」に遭遇しました。

ここに画像の説明を入力してください

ご覧のとおり、何らかの理由で、リモートでフェッチされたフォントのサイズは12、14、16、18、20、24に歪んでいます。ローカルフォントには、これらの部分に何らかの「正規化」が適用されているため、見栄えがよくなります。場所。

もう1つ言及すべきことは、スクリーンショットがこれらのCSSコードに沿ってそれぞれ表示されているDemo-htmlsであるFontSquirrelのWebFontGeneratorを使用しようとしたことです。

@font-face {
   font-family: 'terminus_ttfmedium';
   src: url('terminusmedium-4.38-webfont.ttf') format('truetype');
}

と

@font-face {
   font-family: 'terminus_ttfmedium';
   src: local('Terminus (TTF)');
}

Terminus（TTF）はファイルの同じパックであり、にインストールされたばかり/usr/share/fonts/です。

どんな洞察も大歓迎です！

編集：FontSquirrelの詳細オプションを変更しても、この問題はまったく解決しないようです。

EDIT2：私が試みたすべてのメソッドがFirefoxで動作するわけではありません。さらに、フォントを作業ディレクトリ（ローカルで使用されているものと同じ）にコピーし、「url」フィールドを介してリンクしましたが、それでも歪みが維持されます。これは無駄です！

4

5 に答える 5

1

font-squirrel には、複数の出力を持つセクションがありました。TTF は、ブラウザのすべてのバージョンで機能するわけではありません

     src: url('Bevan-webfont.eot?#iefix') format('embedded-opentype'),
     url('Bevan-webfont.woff') format('woff'),
     url('Bevan-webfont.ttf') format('truetype'),
     url('Bevan-webfont.svg#BevanRegular') format('svg');

これらすべての拡張機能を備えたフォントパックを使用していましたが、サイトで見つけることができなくなったようです.

于 2013-03-13T20:33:57.063 に答える
1

ぼやけたレンダリング要素に次を含めることが役立つことがわかりました。

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
于 2013-11-08T17:28:31.253 に答える
0

コメントするのに十分なポイントがないので、これを回答として追加します。しかし、それは質問です: Terminus はローカルにインストールされていますか? その場合は、アンインストールしてみて、何が得られるかを確認してください。

回答としてコメントして申し訳ありません...

于 2013-03-15T15:29:13.543 に答える
0

実際には、TTF は mozilla のみを受け入れます。TTF、SVG、WOFF、eot など、多くのフォント タイプがあります。すべてのフォント ファイルを使用する必要があります。これは、フォントフェイスを生成するための素晴らしいツールです。

http://www.fontsquirrel.com/tools/webfont-generator

次に例を示します。

@font-face {
    font-family: 'YourFontName';
    src: url('gershwinscript.eot');
    src: url('gershwinscript.eot?#iefix') format('embedded-opentype'),
         url('gershwinscript.woff') format('woff'),
         url('gershwinscript.ttf') format('truetype'),
         url('gershwinscript.svg#gershwin_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

これはあなたを助けると思います。

于 2013-03-15T14:15:33.750 に答える
-1

すべての CSS コードと、複数のブラウザーで動作させるために必要なすべてのファイルを追加する代わりに、Google WebFonts を試してみてください。http://www.google.com/webfonts

于 2013-03-15T17:02:47.023 に答える