1

Web サイトでカスタム フォントを使用しようとしていますが、css には次のコードがあります。

@font-face {
    font-family: 'Sketch';
    src: url('../fonts/Sketch.eot');
    src: url('../fonts/Sketch.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
ul#holder {font-family:'Sketch'}

フォントは、Firefox で必要なように表示されます。Chrome では、フォントがスムーズにレンダリングされていないようで、Firefox のように表示されません (サイドバーでフォントを使用するという考えをやめて、代わりにスムーズなテキストを表示する画像を使用する必要がありますか?;-/)

IE では、フォントがまったく表示されません。これらのフォントを Chrome で適切に滑らかにし、IE で動作させるにはどうすればよいですか?

4

4 に答える 4

8

さまざまなブラウザーがさまざまなフォント形式をサポートしています。

フォント形式

したがって、すべての形式でフォントを作成する必要があります。Font Squirrelを使用できます ( effecticaさん、ありがとうございます)。

そして、次のようにインポートできます。

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

それが唯一の可能な方法ではありません。この質問の詳細については、Paul Irish のブログを参照してください。

とにかく、それらの外観はブラウザーによって少し異なる場合があります。

于 2012-08-11T14:02:31.553 に答える
4

主要なブラウザはすべてフォント レンダリング エンジンや技術がわずかに異なり、レンダリング出力の品質も異なります。そのため、さまざまなブラウザー間でフォントが「ピクセル パーフェクト」である可能性は低く、品質に多少の違いが見られます。最終的にどれが一番見栄えがするかは、フォントによって異なります。Chrome と IE では見栄えがよく、Firefox では少し色あせて見えるグリフ フォントがあります。

とにかく、フォントを IE で動作させるのに役立つちょっとしたハックがあります。2 番目の src 行を参照してください。これが必要なのは、追加のフォント形式を追加することですべてのブラウザーのサポートが保証される一方で、残念ながら IE 9 より前のバージョンで問題が発生するためです。これらの古いブラウザーは、最初の url(' と最後の ') の間のすべてを 1 つの URL 要求として認識するため、フォントの読み込みに失敗します。このハックは、src プロパティの残りの部分がそのクエリ文字列の引数であるとブラウザに認識させるため、正しい URL を探してフォントをロードします。

@font-face {
    font-family: 'Sketch';
    src: url('../fonts/SketchRockwell.eot');
    src: url('../fonts/SketchRockwell.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SketchRockwell.woff') format('woff'),
         url('../fonts/SketchRockwell.ttf') format('truetype'),
         url('../fonts/SketchRockwell.svg#countersoftfontRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

上記は、 http://www.fontsquirrel.com/fontface/generatorでアクセスできる Font Squirrel の @font-face Kit Generator からのものです。そこで、フォントをアップロードして、必要な形式に変換できます。出力する CSS 構文を制御したり、文字をサブセット化してファイル サイズを縮小したり、より多くのオプションを使用してフォントを微調整したりすることもできます。

また、テキストにボールドまたはイタリックを使用する場合は、各組み合わせに応じて font-weight と font-style を変更するルールのバージョンを含める必要があります。これにより、ブラウザーは CSS に遭遇したときに使用するフォントを認識します。太字のルール。

通常、各フォントにはデザイン目的があり、特定の仕事のために作成されています。ほとんどの商用フォントは、画面上で小さいサイズで表示されるように設計されていないため、多くの場合、これらの @font-face を見出し用に予約し、本文コピー用に Georgia や Lucida などの Web セーフ フォントを引き続き使用することが最も理にかなっています。

読みやすさに影響を与えるフォントのもう 1 つの側面は、フォントのアンチエイリアスとヒントです。現在、Web フォントは一般的に、従来のフォントよりも端がギザギザになっています。これは、通常、ほとんどが画面上で表示するように設計されていないためです。高品質のフォントは、Web 用に設計されたフォントと同様に、ヒンティングが優れています。

于 2012-08-11T14:16:08.160 に答える
2

埋め込み可能なフォント パックを作成するための優れた URL は次のとおりです。

http://fontface.codeandmore.com/

TTF または OTF フォントをアップロードすると、HTML および CSS の実装例を含むフォント キット全体が作成されます。

乾杯！

于 2012-08-11T14:05:23.770 に答える
1

エドワードはすべてを語った。Chrome では、特定のフォントの表示方法に頭がおかしくなりました。

フォント ファイルがある場合は、font squirrelを使用して、すべてのブラウザーに必要なコードとすべてのフォント ファイルを生成できます。

于 2012-08-11T14:09:50.570 に答える