web-dev-qa-db-ja.com

CSS：@ font-faceアンチエイリアシング

@ font-face CSSオプションに少し苦労しています。たくさんの読み、試し、再試行の後、フォントをアップロードするときにすぐに使えるパッケージにするWebサイトにようやく出会いました。現在実行中ですが、フォントはアンチエイリアス処理されていないようです。私は他のウェブサイトでこれが起こっているのを見ていますが、私の見出しは私が望むようにレンダリングしていません。

私のCSSコード：

@font-face {
font-family: 'YanoneKaffeesatzThin';
src: url('../fonts/yanonekaffeesatzthin-webfont.eot');
src: local('☺'), url('../fonts/yanonekaffeesatzthin-webfont.woff') format('woff'), url('../fonts/yanonekaffeesatzthin-webfont.ttf') format('truetype'), url('../fontsyanonekaffeesatzthin-webfont.svg#webfontyC5sm3N9') format('svg');
font-weight: normal;
font-style: normal;}

これを最後にするが、いらいらする問題を解決するために、何をする必要がありますか？

cssrenderingfont-face
21
Ben

CSS3では、 font-smooth プロパティを使用できますが、アンチエイリアスはシステムのデフォルトで制御されます。 OSが何であってもクリーンなアンチエイリアスを強制する必要がある場合は、sIFRを使用して、テキストを自動的にFlashコンポーネントに置き換える必要があります。

16
Chman

参照： http://www.elfboy.com/blog/text-shadow_anti-aliasing/

要点は、text-shadow: 0 0 1px rgba(0,0,0,0.3);を追加すると、アンチエイリアスの外観が得られるということです。

63
user9538

アンチエイリアスに対処するためのあまり一般的ではないCSSルールについての短いメモ。

-webkit-font-smoothing: antialiased;

Webkitブラウザーのフォントレンダリングにはわずかな違いがあります。一般的に、フォントはより鮮明で薄く表示されます。その他の値：

-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: none;

デモページ： http://maxvoltar.com/sandbox/fontsmoothing/

忘れないでください https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions

3
Steve

CufonとTypeface.jsは、このスレッドで説明したHTML5、CSS3、JSソリューションの多くを集約してサニタイズする2つのソリューションです。

それぞれには、フォントファイル（ttf、otf、wotf）を、あなたがやろうとしていることを行うスクリプトに変換できるコンバーターがあります。

2つのうち、私はCufonを好みます http://cufon.shoqolate.com/generate/

1
Rowan

OTFをWOFFに変換する必要があります。

OTF-> WOFF（Works！）

TTF-> OTF-> WOFF（動作！）

TTF-> WOFF（アンチエイリアスが機能しない、 Google Fonts のよくある間違い）

1º） OTFフォントバージョン をダウンロードします

1º代替）フォントがその他でTTFの場合、 https://everythingfonts.com/ttf-to-otf でOTFに変換します

2º）OTFからWOFFへの変換 https://everythingfonts.com/otf-to-woff

EOT、SVG、WOFF2などではなく、WOFFのみを使用してください。

0
lucasgabmoreno