web-dev-qa-db-ja.com

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

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

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

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

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

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

cssfonts
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
BaronVonKaneHoffen

ズームとフィルター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! */
        }
0
Jean-Philippe Martin

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

0
Matthew O'Riordan

純粋な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