在字体大小上执行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中看到的文本高度超过容器高度的问题。 发生这种情况是因为行数发生了变化，但是按比例缩放的文本容器的高度由外部容器预先确定（外部容器完全与文本容器中的文本高度无关）。