4

質問があります。私は現在テキストアニメーションに取り組んでいますが、少し問題があります。-webkit-transformのようなプロパティを使用すると、アニメーション中にフォントが通常から薄くなり、アニメーションが終了すると通常に戻ります。

これがアニメーションの私のコードです：

@-webkit-keyframes flipOne {
    0% {
        -webkit-transform: perspective(40000px) rotateY(0);
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: perspective(40000px) rotateY(720deg);
        -webkit-animation-timing-function: ease-in;
    }
}

これが2枚の写真です（アニメーションの前と最中）

前 ：

ここに画像の説明を入力してください

後：

ここに画像の説明を入力してください

フォントの設定はまったく同じです（アニメーションの前、最中、後）

それはレンダリング設定ですか？はいの場合、皆さんは私に少しヒントを教えてもらえますか？

前もって感謝します。

4

2 に答える 2

5

これはおそらく、Safariが行うフォントのスムージング、つまりテキストにアンチエイリアスを適用することに関連しています。私の推測では、アニメーション中にスムージングは​​適用されません。

次のように設定すると問題が解決すると思います。

-webkit-font-smoothing: none;

ただし、テキストが常にピクセル化される可能性が高いため、少し問題になる可能性もあります。申し訳ありませんが、今これをテストする手段がありません。

次のようなものを追加します

-webkit-font-smoothing: antialiased;

あなたが持っている状態にスムージングを正しく適用するかもしれません。繰り返しますが、これは単なる推測であり、CSS3ベースのソリューションはまだない可能性があります。その場合、コンテナ要素にサイズ変更を適用したくない場合があり（ズームなど）、フォントサイズにEM値を使用します。レスポンシブコンテナを作成します。

それでも問題が解決しない場合は、ここでJavascriptを適用する以外に方法はありません。

于 2012-08-10T09:24:10.760 に答える
0

私は同様の問題に遭遇し、ここでコメントを見つけました。これを追加することによって：

 -webkit-font-smoothing: antialiased;

サファリでの私の問題を解決しているようです（しかし、画面は網膜のものではありません）。しかし、これを注意深く確認したところ、フォントは他のブラウザでのフォントよりも少しスリムに見えることがわかりました。だから私はこれを次のように変更しました：

-webkit-font-smoothing: subpixel-antialiased;

これで私の問題は完全に解決します。

誰かが同じ問題に遭遇する可能性がある場合に備えて、ここにコメントを残してください。

于 2016-09-09T08:40:59.443 に答える