6

作業中のプロジェクトにIconMoon@font-faceアイコンフォントを使用しています。

.svgおよび/または.eotフォントのみを含める場合、またはIE9などの他のブラウザーで参照する場合、フォントは素晴らしくスムーズにレンダリングされます。ただし、Chromeでサイトを閲覧し、.ttfや.woff形式を含めると、アイコンが非常に途切れ途切れになり、アンチエイリアシングがまったく発生しなくなります。.ttfまたは.woffの代わりに.eotまたは.svgをロードするようにChromeに指示する方法はありますか？

4

4 に答える 4

2

私はこれがその問題で機能することを発見しました。フォントをスムーズにするソリューションが実際に機能するとは思いません。

@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   src: url('fonts/montserrat-regular-webfont.eot'); /* IE9 Compat Modes */
   src: url('fonts/montserrat-regular-webfont.eot?iefix') format('eot'), 
       url('fonts/montserrat-regular-webfont.ttf')  format('truetype'), 
       url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'),
       url('fonts/montserrat-regular-webfont.woff') format('woff'); 
}

Firefoxはリストの最後のもの（woff）を選択し、機能しているかどうか、IEはeotを使用し、Chromeは最初に機能するもの（svg）を選択します。WoffはChromeでも機能しますが、エイリアスグリフが発生するため、svgをwoffの前に置くと解決します。*

このソリューションは機能しますが、Safariで追加のリクエストが発生するため、元のようにsvgをwoff未満のままにして、次を追加できます。

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'OpenSansLightItalic';
    src: url('fonts/montserrat-regular-webfont.svg#montserratregular')  format('svg');
  }
}

ここでそれについて読んでください：http：//hollisterdesign.wordpress.com/2014/04/29/note-to-self-always-use-this-fix/

于 2013-08-13T20:03:28.723 に答える
1

多分このcssプロパティはあなたの問題を解決します：

yourSelector {
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
}
于 2012-05-18T10:58:50.750 に答える
0

svgフォントのURLを他のすべてのフォントの前に置くと、ChromeがSVGをロードし、特に明るいフォントの場合に優れたレンダリングが得られます。

于 2013-11-29T11:49:02.627 に答える
-1

フォントにこの小さな回転を試してみてください。お役に立てば幸いです。

例：

p{
  transform: rotate(-0.0000000001deg);
}
于 2013-11-29T07:23:49.800 に答える