1

すべてに em を使用し、縮小/拡大するときにルート フォント サイズをスケーリングすることにより、プレビュー スケールで表示されるコンテンツがいくつかあるので、プレビューをクリックして完全なコンテンツを表示できますか? jQuery を使用して、font-size を 100% までアニメーション化します。

http://jsfiddle.net/5fCd5/3/

だから基本的に：

CSS:

.example section {
  font-size: 30%;    
}

JS:

zoomed.animate({
  fontSize: '100%'
});

しかし、より良いアイデアを得るためにフィドルを見てください。

問題は、コンテナーがフォント サイズに合わせてスケーリングされているにもかかわらず、ブラウザーがアニメーション全体でわずかに異なるポイントでテキストをラップすることです。これが発生する理由のロジスティクスを理解しています (さまざまなサイズ/ヒンティングなどでレンダリングされたときの文字の比率が異なる) .)、しかし、それはひどく見えます。Firefox よりも Chrome の方がはるかに目立ちます。興味深いことに、IE10 では、行が折り返される場所はまったく変更されていません。これは Windows の場合です。おそらく、OSX でのフォント レンダリングにはこの問題はありません。

誰かが何らかの修正または回避策を考えることができますか?

私が最初に検討した1つの回避策は次のとおりです。

プレビューを 100% のフォント サイズで作成し、テキストを空白で分割し、一度に 1 単語ずつコンテナに追加します。コンテナの高さが増したら位置を保存し、各行を空白の no-wrap 要素でラップして、コンテナのオーバーフロー: 非表示。

ただし、プレビューに任意の HTML (ems のサイズの画像を含む) を使用したいので、これは実際には実現可能ではありません。

4

4 に答える 4

1

アイデアは、通常のテキストを拡大することによって、それをcss/htmlに拡大する方法の決定を与えるということです。テキストのアニメーション化とズームをより細かく制御できる方法を考案したいと考えています。

その一例は、テキストをビットマップに変換してからスケーリングすることです。フォントをビットマップに変換するコストが高いことや、ビットマップ自体がスケーリングされるとピクセル化されたように見える（つまり、品質が低下する）などの明らかな理由から、これは適切な選択ではありません。さらに、cssを使用しても、ズームインおよびズームアウトscale()するとぼやけが発生します（元の質問の下のコメントを参照してください）。

私のおすすめ：

  1. まず、cufonを使用してフォントを同等のキャンバスに変換します。Cufonは、との混合を使用してフォントをレンダリングします。CanvasVML
  2. cufon/canvasを使用することは良い最初のステップです。ただし、ここでcufonnedテキストの例を見ると、ズームインおよびズームアウトすると、通常はビットマップに関連付けられているのと同じピクセル化/品質低下の症状が見られることがわかります。さらなる調査により、キャンバスのズームでピクセル化が示されることが証明されています（この例http://jsfiddle.net/mBzVR/4/を参照）。
  3. これを回避するには、たとえば、高さに数値を掛けてキャンバスを単純にスケーリングする代わりに、25フレーム/秒（FPS）でキャンバスをレンダリングし、1でレンダリングされるすべてのフレームでサイズをわずかに増減できます。 /25秒。このアイデアは、キャンバスチャートをレンダリングするためのjQueryライブラリであるFlotから得ました。彼らのホームページの例を見ると、左/右にパンすることでアニメーション化されたチャートが表示されます。そのページを保存すると、flot.demo.jsに次のようなものが表示されます。

flotcharts.orgから：

// Update the random dataset at 25FPS for a smoothly-animating chart
setInterval(function updateRandom() {
    series[0].data = getRandomData();
    plot.setData(series);
    plot.draw();
}, 40);

このようにして、アニメーションのラッピングを完全に制御し、ピクセル化/ズームが発生しないようにすることができます。

于 2013-02-25T05:30:05.333 に答える
0

css の文字間隔の使用div.padderなど:

letter-spacing: 1px;

少し違いますが、それがまさにあなたが望んでいる変化であるかどうかはわかりません.

于 2013-02-25T03:23:45.920 に答える
0

等幅フォントを使用することをお勧めします。これにより、アニメーションでフォント サイズが変化するときに見られる小さな間隔の変化がなくなります。これは、少なくとも同じ問題が発生しないかどうかを確認するために、Google Web Fonts で試すことができるものです。

http://www.fonts.com/search/web-fonts?searchtext=Helvetica+Monospaced&SearchType=WebFonts&src=GoogleWebFonts

于 2013-02-25T03:16:14.467 に答える
0

うーん。私の Mac では、Firefox にはまったく問題がありませんが、Chrome は、お気づきだと思いますが、サイズ変更後にテキストがコンテナーの境界を超えています。

一歩下がって、もう一度問題を考える必要があるのではないかと思います。そう：

  • 任意のサイズの (ただし同一の) テキストのコンテナー (「テキスト コンテナー」) があります。
  • これらのコンテナは別の任意のサイズのコンテナ (「外側のコンテナ」) に含まれています。
  • ブラウザーは、コンテナーの幅に収まる単語数に応じてテキストを折り返します (仮定overflow: auto;)
  • したがって、これらすべてが resize 中に相対的なサイズを維持すると仮定すると、あなたが説明する症状は不可能であるはずです（ブラウザのバグなどがなければ...）

その推論のプロセスにより、あなたの jsfiddle をチェックするようになりました。確かに、例のさまざまな部分が resize 中に相対的なサイズを保持しているわけではありません。

私のマシン (ラップトップなのでピクセル サイズは小さいですが、ここのロジックには影響しません) では、個々のテキスト コンテナー (最も内側の.padder) のアスペクト比は143px / 53px = 2.70で、外側のコンテナー ( .examples) のアスペクト比は です。526px / 253px = 2.08.

これには、次の結果があります。

  • サイズ変更中の線の長さとコンテナーの幅の比率の変化
  • そのため、少なくとも一部の行では、サイズ変更中に改行の位置も変更する必要があります

あなたが経験している問題を防ぐために私が見ることができる解決策は1つだけです.外側のコンテナとテキストコンテナを強制的に同じアスペクト比にすることです（つまり、実際のHTMLテキストを使用し、変換中にアスペクト比を変更するソリューションは同じ問題）。

これにより、Chrome でテキストの高さがコンテナーの高さを超えるという問題も修正されるはずです。これは、行数が変化するために発生しますが、拡大されたテキスト コンテナーの高さは外側のコンテナーによって事前に決定されます (テキスト コンテナー内のテキストの高さとはまったく関係ありません)。

于 2014-12-19T15:38:16.890 に答える