web-dev-qa-db-ja.com

CSSを使用したアンチエイリアスの強制:これは神話ですか?

最近、クライアントがIE6のシステムフォントの外観について苦情を言っています。基本的にこの問題は、IE6がフォントスムージング/アンチエイリアシングをサポートしていないことです(OSの設定などでオンにできることは知っています)。しかし、誰かがこの宝石を捨てました:

「pxの代わりにptを使用して、CSSでフォントアンチエイリアスを強制できます。」

さまざまなブラウザーで簡単なPOCを実行しましたが、違いはありませんでした。このフォーラムの最後の投稿である、オンラインでの参照を見つけました。

http://www.webmasterworld.com/css/3280638.htm

これは、Web開発者の都市神話に相当するように聞こえますが、私はそれがBSであると感じています。誰もそれに遭遇したことがありますか?

61
FriendOfFuture

いいえ、Web開発者としてこれを制御する方法は実際にはありません。

小さな例外は、 sIFR を介してFlashを使用することで、アンチエイリアスの偽の強制を実行できることです。一部のブラウザは、ビットマップ/ピクセルフォントをアンチエイリアスしません。 アンチエイリアシング / アンチエイリアシング )。

また、ダニエルが述べたように、すべてのフォントにem単位を使用することが理想的です。詳細については、 CSSを使用した信じられないほどのEmとElastic Layouts を参照してください。

29
Chad Birch

そうそうできる:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;

Firefoxのソース 、ありがとう ジャスティン .

47
Ryan Brodie

CSS3には、これらのエキサイティングな新しいプロパティがあります。

font-smooth:always;
-webkit-font-smoothing: antialiased;

それでも、彼ら自身であまりテストをしていませんが、ほとんど間違いなくIEには向いていません。 Chrome WindowsでもFirefoxでも便利です。前回チェックしたとき、OSXのように小さなものを自動的にアンチエイリアスしませんでした。

[〜#〜] update [〜#〜]

これらは、IEまたはFirefoxではサポートされていません。font-smoothプロパティは、覚えている限りiOSサファリでのみ使用可能です。

39

ズームとフィルターmsのみのプロパティを使用して、本当に厄介なソリューションを見つけました。例(aa、標準、cleartypeなしで試してください): force-antialias.html

使い方:

-zoom:x、x> 1でテキストを拡大

-いくつかのぼかし(または他のフィルター)を適用する

-zoom:1/xで縮小

それは少し遅いです、そして非常に!メモリを大量に消費する方法であり、白以外の背景では、わずかに暗いハローがあります。

CSS:

.insane-aa-4b                  { zoom:0.25; }
.insane-aa-4b .insane-aa-inner { zoom:4; }
.insane-aa-4b .insane-aa-blur  { zoom:1;
  filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
}

HTML:

<div class="insane-aa-4b">
<div class="insane-aa-blur">
<div class="insane-aa-inner">
  <div style="font-size:12px;">Lorem Ipsum</div>
</div></div></div>

この短いjQueryを使用してアンチエイリアスを強制し、ieaaクラスを何かに追加するだけです。

$(function(){ $('.ieaa').wrap(
'<div style="zoom:0.25;"><div style="zoom:1;filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);"><div style="zoom:4;"><'+'/div><'+'/div><'+'/div>'
); });
16
biziclop

次のCSS行を追加すると、Chromeで機能しますが、Internet ExplorerやFirefoxでは機能しません。

text-shadow: #fff 0px 1px 1px;

8
Matthew

私はチャド・バーチに同意しません。少なくとも Chrome では、-webkit-text-strokeプロパティを使用した単純なcssトリックを使用して、 can アンチエイリアスを強制します。

-webkit-text-stroke: 1px transparent;
7
Salman for Hire

私はその神話を言います。

Pt、px、パーセントベースのフォントの違いは、[メニュー]> [表示]> [テキストサイズ]> [設定]のときにIEがどのようにスケーリングするかという点だけです変更されます。

ちゃんと覚えたら:

  • pxおよびptベースのフォントは拡大縮小されません
  • percentベースのフォントはIEでスケールします

私の知る限り:

  • フォントのアンチエイリアスは、主に"ClearType"のウィンドウ設定によって、またはIE7/IE8の場合はClearTypeのIE固有の設定によって制御されます。
3
scunliffe

Pxからptへの修正は、Google Web Fontsのフォントを使用するサイトで機能しました。 Win7-IE8では、アンチエイリアスレンダリングの欠如が正しく修正されました。

2
Matt

少し間違えたと思います。あなたが貼り付けたスレッドの誰かが、あなたはforceではなくpxの代わりにptを使用することでアンチエイリアスができると言いますforce後者を使用して。私は両方の主張に少し懐疑的ですが...

2
Deniz Dogan

(DXTransformフィルターを介して)99%の不透明度設定を使用すると、少なくともバージョン7では、実際にInternet ExplorerでClearTypeがオフになります。 Source

1
Pekka 웃

修正が見つかりました...

.text {
            font-size: 15px;  /* for firefox */
            *font-size: 90%; /* % restart the antialiasing for ie, note the * hack */
            font-weight: bold; /* needed, don't know why! */
        }  

最も徹底的な解決策は http://www.elfboy.com/blog/text-shadow_anti-aliasing/ にあるようです。 FirefoxはChromeほど効果的ではありませんが、FirefoxとChromeで動作します。

0

純粋なCSSではなく、フォント置換ハックのないネイティブにサポートされている方法:フォントをSVGに変換し、@ font-faceの順序で(WOFFまたはTTFの前に)上位に配置するだけです。出来上がり!フォントはスムーズになりました。これは、フォントとしてではなく、SVGシェイプとして扱われ、スムーズになったためです。

注:SVGは、WOFFまたはTTFを超える重みがあることに気付きました。

0
Pawel

サイドノートとして、GeckoとWebKitは

text-rendering

プロパティも。

0
Jbird

アンチエイリアスを実現する良い方法は次のとおりです。

text-shadow: 0 0 1px rgba(0,0,0,0.3);
0
Jason Foglia

とにかくブラウザに何かを強制することはできないと思います。システム構成、使用するフォント、ブラウザの設定などに依存します。私にとってもBSのようです。

注として、PXではなく常に相対サイズを使用してください。

0
Daniel A. White