在字體大小上執行jQuery動畫時避免文本換行

Question

我有一些內容以預覽比例顯示，方法是將em用作所有內容，然后在我要縮小/放大時縮放根字體大小，因此您可以通過單擊預覽查看全部內容，這時我使用jQuery動畫化字體大小，最高可達100％：

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

所以基本上：

CSS：

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

JS：

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

但是，請擺弄小提琴以獲得更好的主意。

問題是，盡管容器根據字體大小縮放，但瀏覽器將在整個動畫中將文本包裝在稍有不同的位置上-我理解為什么會發生這種情況（以不同大小/提示呈現時，不同比例的字符等） 。），但看起來很糟糕。 在Chrome中，它比在Firefox中更引人注目。 有趣的是，IE10根本不會改變行的換行位置。 這是在Windows上-可能OSX上的字體呈現沒有此問題。

誰能想到某種修復或解決方法？

我最初考慮的一種解決方法是：

以100％字體大小創建預覽，在空白處分割文本，一次將其添加到容器中一個單詞，當容器高度增加時，存儲位置，然后將每行換成空白且不換行並添加到元素中容器溢出：隱藏。

但是，由於我想使用任意HTML（包括ems大小的圖像）進行預覽，所以這實際上是不可行的。

Answer 1

這個想法是通過擴大常規文本，您放棄了如何將其放大為css / html的決定。 您想設計一種方法，使您可以更好地控制文本的動畫和縮放。

例如，將文本轉換為位圖，然后對其進行縮放。 出於顯而易見的原因，這將是一個糟糕的選擇，例如將字體轉換為位圖的高昂成本，以及位圖本身在縮放后會顯得像素化（即質量下降）。 此外，即使使用css scale()也會在放大和縮小時造成一些模糊 （請參閱原始問題下的注釋）。

我的建議：

1. 首先，使用cufon 將字體轉換為等效的畫布。 Cufon使用Canvas和VML的混合物來渲染字體。
2. 使用cufon / canvas是一個不錯的第一步。 但是，如果您在此處查看經過修改的文本的示例，則會注意到，如果放大和縮小，您將看到通常與位圖相關的相同像素化/質量損失症狀。 進一步的研究證明了畫布縮放將顯示像素化這一點（請參見此示例http://jsfiddle.net/mBzVR/4/ ）。
3. 要解決此問題，而不是簡單地例如通過用倍數和高度乘以數字來縮放畫布。您可以以每秒25幀（FPS）的速度渲染畫布，在以1渲染的每一幀處略微增加/減小其大小/ 25秒。 我從Flot那里得到了這個想法， Flot是一個用於發布畫布圖表的jQuery庫。 如果您查看他們的主頁示例，則會看到通過左右左右移動動畫的圖表。 如果保存該頁面..您將在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);

這樣，您可以完全控制動畫的環繞，並確保沒有像素化/縮放發生。

Answer 2

我建議使用等寬字體-可以消除動畫中字體大小變化時看到的小間距變化。 您可以嘗試以下一種使用Google網絡字體的方法，看看是否至少不會遇到同樣的問題。

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

Answer 3

使用CSS字母間距將div.padder為：

letter-spacing: 1px;

有所作為，以為我不知道這是否正是您所希望的更改。

Answer 4

嗯。 在我的Mac上，Firefox完全沒有問題，但是Chrome的性能比我想像的還要差-調整大小后，文本超出了容器的范圍。

我認為我們可能需要備份一個步驟，再思考一次問題。 所以：

• 有任意大小（盡管相同）的文本容器（“文本容器”）
• 這些容器包含在另一個任意大小的容器（“外部容器”）中
• 瀏覽器根據可以容納多少個單詞的寬度來包裝文本（假設overflow: auto; ）
• 因此， 假設所有這些事情在調整大小過程中都保持其相對大小 ，那么您描述的症狀應該是不可能的（缺少瀏覽器錯誤和諸如此類的東西...）

這種推理過程使我檢查了jsfiddle，並且可以肯定的是， 在調整大小期間，示例中的各個部分並非都保持其相對大小 。

在我的機器上（一台筆記本電腦，因此像素很小，但這並不影響此處的邏輯），單個文本容器（最里面的.padder ）的長寬比為143px / 53px = 2.70 ，而外部容器（ .examples ）的寬高比為526px / 253px = 2.08 。

這具有以下后果：

• 調整大小時線長與容器寬度的比例 變化
• 因此，至少在某些情況下，對於某些行，換行的位置也必須在調整大小時更改

我只能看到一種解決方案來防止遇到問題： 強制外部容器和文本容器具有相同的長寬比 （即，因為任何涉及使用實際HTML文本並在轉換過程中更改長寬比的解決方案都將具有相同的問題）。

這也應該糾正我在Chrome中看到的文本高度超過容器高度的問題。 發生這種情況是因為行數發生了變化，但是按比例縮放的文本容器的高度由外部容器預先確定（外部容器完全與文本容器中的文本高度無關）。