32

Chrome 14.0.835.2 dev-mを使用して要素を回転させて-webkit-transform: rotate()いますが、要素内のテキストに対して非常に奇妙な処理を行っています。これは、「クリスプ」の代わりに「スムーズ」アンチエイリアシングを使用してテキストを回転させたときにPhotoshopで得られるのと同様の効果を思い出させます。

誰もがここで何が起こっているのか知っていますか？これはこのWebkitまたはChromeバージョンに固有のものですか、それとも修正するためにできることはありますか？（リスト要素間の境界をアンチエイリアスすることもありません）

風変わりなテキスト

CSSは次のとおりです。

div.right-column.post-it
{
  position: relative;
  width: 240px;
  background-color: #fe9;
  padding: 20px;
  -webkit-transform: rotate(.7deg);
  background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
  box-shadow: 1px 1px 0 #ddccaa, 
            2px 2px 0 #dbcaa8,
            3px 3px 0 #d9c8a6,
            4px 4px 0 #d7c6a4,
            5px 5px 0 #d5c4a2,
            6px 6px 1px #d3c2a0,
            4px 4px 2px rgba(90,70,50,.5),
            8px 8px 3px rgba(90,70,50,.3),
            12px 12px 5px rgba(90,70,50,.1);
}
4

2 に答える 2

73

WebkitでCSS3d変換モードをトリガーしてみてください。これにより、Chromeのレンダリング方法が変わります

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);

編集

-webkit-font-smoothing値を取るWebkitのみのスタイル宣言もあります

  • none
  • subpixel-antialiased
  • antialiased

ここsubpixel-antialiasedで、はデフォルト値です。

残念ながら、サブピクセルアンチエイリアスは、回転したテキストには適していません。レンダリングマシンはそれを処理できません。3D変換はちょうどに切り替わりますantialiased。ただし、直接設定することはできます。

ここを参照してくださいhttp://maxvoltar.com/archive/-webkit-font-smoothing

于 2011-09-21T08:22:19.173 に答える
16

フォントがぼやけているのは、-webkit-backface-visibilityを含む奇妙なwebkitの問題が原因です。これは私が理解するのに永遠にかかりました、そして私はまだそれをウェブ上の他のどこにも見ていません。

ここで、-webkit-backface-visibility：hidden;を追加します。CSSリセットスタイルとして私のサイトの本体に。それがあなたのサイト全体のフォントをシャープにするのを見てください、それは驚くべきことです。あなたは3Dではないので、これはとにかく何にも影響しませんが、サイトの他の場所で3D変換を行うことにした場合は、-webkit-backface-visibility：visible;を追加してください。特定の要素に。ちらつきも修正する必要があります。

于 2012-12-10T17:08:52.260 に答える