在字體大小上做一個jQuery動畫時避免文字環繞

我有一些內容以預覽比例顯示，使用em表示所有內容，然後在我想縮小/放大時縮放根字體大小，所以可以您可以通過點擊預覽看到完整內容，在這一點上，我使用jQuery動畫字體大小高達100％：在字體大小上做一個jQuery動畫時避免文字環繞

所以基本上：

CSS：

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

個

JS：

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

但看到小提琴，以獲得更好的主意。

的問題是，雖然容器與字體大小縮放，瀏覽器將包裹整個動畫在略微不同的點文字 - 我明白爲什麼會這樣物流（字符的不同比例時，在不同的呈現大小/提示等），但看起來很糟糕。 Chrome在Firefox中比在Firefox中更明顯。有趣的是，IE10並沒有改變線條包裝的地方。這是在Windows上 - 可能OSX上的字體渲染沒有這個問題。

任何人都可以想到某種修復或解決方法嗎？我最初考慮

一種解決方法是：

創建100％字體大小的預覽，劈在空白的文本，它在同一時間加入到容器中的一個字，在高度店容器增加位置，然後用whitespace no-wrap將每行包裝在一個元素中，並給容器溢出：隱藏。

但是，因爲我想爲預覽使用任意的HTML（包括ems中的圖像），所以這不是真的可行。

來源

2013-02-25 nrkn

您可以使用CSS動畫，它將縮放容器，就好像它是位圖一樣。 – alex 2013-02-25 02:28:14

您需要設置容器上隱藏的溢出：然後將動畫應用到容器。 – Epik 2013-02-25 03:05:29

嗨亞歷克斯 - 我會給出一個鏡頭，謝謝 – nrkn 2013-02-25 03:15:11

我建議使用等寬字體 - 這將消除字體大小在動畫上發生變化時看到的小間距變化。您可以嘗試使用Google Web Fonts來查看是否至少沒有遇到同樣的問題。

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

來源

2013-02-25 03:16:14

不幸的是，它並沒有什麼區別 - 即使使用等寬字體，這些小的變化仍然會發生。不管怎麼說，還是要謝謝你。 – nrkn 2013-02-25 03:19:00

用css字母間距荷蘭國際集團的div.padder，如：

letter-spacing: 1px;

使有點區別的，以爲我不知道這是否正是你希望的變化。

來源

2013-02-25 03:23:45 JakeParis

的想法是，通過放大正常文本，你正在給出的決定如何將放大到css/html。您想要設計一種方法，讓您可以更好地控制文字的動畫和縮放。

一個例子就是將你的文本轉換成位圖，然後對其進行縮放。由於顯而易見的原因，這將是一個糟糕的選擇，例如將字體轉換爲位圖的高成本，以及一旦縮放（即存在質量損失），位圖本身就會看起來像素化。此外，即使使用css scale()放大和縮小時也會導致一些blurring（請參閱原始問題下的註釋）。

我的建議：

所有convert你的字體到使用cufon畫布相當於第一。 Cufon使用Canvas和VML的混合來渲染字體。
使用cufon/canvas是第一步。但是，如果您查看一個縮寫文本here的示例，您會注意到，如果放大和縮小，您將看到通常與位圖相關的像素/質量損失症狀。進一步research證明了畫布縮放將顯示像素化的點（請參閱此示例）。
爲了解決這個問題，不是簡單地通過乘以數字來放大畫布，而是通過數字乘以高度......您可以以每秒25幀（FPS）渲染畫布，在每一幀處稍微增加/減小其大小以1/25秒呈現。我從Flot獲得了這個想法，這是一個用於渲染canvas圖表的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);

這樣你就可以完全控制你的動畫包裝，並確保沒有像素/放大正在發生。

來源

2013-02-25 05:30:05 abbood

這是一個非常聰明的解決方案，並且非常感謝花費這麼多時間 - 但是不幸的是它不適合，因爲正如我在我的問題中提到的，儘管小提琴只是使用文本，但預覽實際上將包含任意的HTML。 – nrkn 2013-02-25 05:52:07

巧妙地收到投票了嗎？ ;）無論如何，在你的情況..我認爲你應該prolly堅持'.scale（）'..這一切都取決於你想投資多少時間在這個問題上。 – abbood 2013-02-25 06:08:13

是:)投票。根據我上面的評論，我可能會給出一個規模。 – nrkn 2013-02-25 06:33:30

嗯。在我的Mac上，Firefox沒有任何問題，但Chrome瀏覽器比我認爲你已經注意到的要糟糕 - 在調整大小後，文本超出了容器的範圍。

我想我們可能需要備份一個步驟，並再次考慮問題。所以：

有任意大小（雖然相同的）文本的容器（「文本容器」）
這些容器被包含在另一個任意大小的容器（「外容器」）
瀏覽器渦卷根據有多少話可以放入容器的寬度文本（假設overflow: auto;）
所以，假設所有這些東西的大小調整過程中保持自己的相對大小，你所描述的症狀應該是不可能的（沒有瀏覽器的bug和什麼......）

這種推理的過程使我檢查你的jsfiddle，果然，它不是在你的例子中，各個部分的大小調整過程中保持其相對大小的情況下。

在我的機器上（筆記本電腦，所以像素尺寸很小，但這並不影響此處的邏輯），個別文本容器（最裏面的.padder）的縱橫比爲143px/53px = 2.70，而外部容器.examples）的縱橫比爲526px/253px = 2.08。

這具有以下結果：線長的

的比例到容器寬度調整大小

所以期間改變，至少在某些情況下一些線，的位置換行符必須也調整大小時改變

只有一個解決方案，我可以看到公關遇到您遇到的問題：強制外部容器和文本容器具有相同的縱橫比（即，因爲涉及使用實際HTML文本和的任何解決方案都會在轉換過程中改變縱橫比，所以會有相同的問題）。

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

來源

2014-12-19 15:38:16 bhotel

在字體大小上做一個jQuery動畫時避免文字環繞

回答

相關問題