11

CSS3 プロパティ »rotate« を使用して、単純なテキスト行をある程度、正確に 1.5 度回転させようとしています。

  -webkit-transform: rotate(1.5deg);
  -moz-transform: rotate(1.5deg);
  -ms-transform: rotate(1.5deg);
  -o-transform: rotate(1.5deg);
  transform: rotate(1.5deg);

Chrome (v18) での結果は問題ないように見えますが、Firefox (v10) と Safari (5.1.5) では見栄えが悪いですが、見苦しい結果が得られます。

@font-face で実装されたフォントを使用していますが、Arial ではまだ問題が発生します (少なくとも Firefox では)。以下の例を参照してください。

本当に奇妙なのは、Safari でシステム フォント (Arial) に切り替えると問題が解決するのに対し、Firefox では問題が解決しないことです。

ヘルプ、回避策、またはハックをいただければ幸いです。

1) Chrome 18 / font-family: Calibri / 配置OK

2) Firefox 10 / font-family: Calibri / 配置が悪い

3) Firefox 10 / font-family: Arial / 配置がまだ醜い

4) Safari 5.1.5 / font-family: Calibri / 配置が悪い

5) Safari 5.1.5 / font-family: Arial / 配置OK

これまでのところ、次のスレッドを見つけましたが、問題の解決方法について説明しているスレッドはありません。

https://bugzilla.mozilla.org/show_bug.cgi?id=403447

CSS3 バグ - transform:rotate ルールを使用する際の問題 (Safari + Firefox)

CSS Transform Rotate 文字配置

また、このチュートリアルで説明されているように、DirectWrite 変数を設定してみました (フォント レンダリングを変更するため) 。 /ですが、結果は同じです。

4

1 に答える 1

1

これはあなたが修正できるものではありません.バグレポートやその他のビットから、ブラウザメーカーはこれらの問題を認識しているように見えます.

テキストを独自の div コンテナーに入れて、テキストを直接回転させるのではなく、それを回転させてみませんか?

ただし、実稼働サイトでこれが必要な場合は、テキストを画像に置き換えてください。ユーザーは、新しい CSS3 をサポートしていないブラウザーを使用しているため、重要な場合は、それを使用しないか、適切に低下することを確認してください (すべてのプラットフォームで機能しますが、いくつかの機能が失われる可能性があります)。つまり、ブラウザーでテキストの回転を無効にします。醜く見える。

于 2012-05-04T23:01:31.237 に答える