Question

我有一些内容以预览比例显示，通过使用em来处理所有内容，然后在我想缩小/放大时缩放根字体大小，所以您可以通过单击预览来查看完整内容，我使用jQuery将字体大小设置为100％：

基本上是这样的：

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()，当您放大和缩小时也会导致blurring（请参阅原始问题下的评论）。

我的建议：

首先使用convert将您的字体cufon转换为等效的画布。 Cufon使用Canvas和VML的混合来渲染字体。
使用cufon / canvas是很好的第一步。但是，如果您查看一个cufonned文本here的示例，您会注意到如果放大和缩小，您将看到通常与位图关联的相同像素化/质量损失症状。进一步research证明画布缩放将显示像素化（请参阅此示例http://jsfiddle.net/mBzVR/4/）。
要解决这个问题，而不是简单地通过乘以高度和数字来缩放画布，例如..您可以以每秒25帧（FPS）渲染画布，在每帧时略微增加/减小其大小以1/25秒的速度渲染。我从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比我想象的还要糟糕 - 调整后文本超出了容器的范围。

我认为我们可能需要支持一步，再一次思考问题。所以：

有任意大小（虽然相同）的文本容器（＆＃34;文本容器＆＃34;）
这些容器包含在另一个任意大小的容器中（＆＃34;外容器＆＃34;）
浏览器根据容器宽度可以容纳多少单词来换行文本（假设为overflow: auto;）
所以，假设所有这些事情在调整大小期间保持相对大小，你描述的症状应该是不可能的（没有浏览器错误等等......）

这个推理过程让我检查了你的jsfiddle，当然，不是你的例子中的各个部分在调整大小期间保持相对大小的情况。

在我的机器上（笔记本电脑，因此像素大小很小，但这不会影响逻辑），单个文本容器（最里面的.padder）的宽高比为{{ 1}}，而外容器（143px / 53px = 2.70）的宽高比为.examples。

这会产生以下后果：

调整大小期间比例的行长更改
所以，至少对于某些情况下的某些行，在调整大小期间，换行符的位置也必须更改

我只能找到一种解决方案来防止您遇到的问题：强制外部容器和文本容器具有相同的宽高比（即，因为任何涉及使用的解决方案实际HTML文本和在转换过程中更改宽高比会产生同样的问题。）

这也应该纠正我在Chrome中看到的文本高度超过容器高度的问题。发生这种情况是因为行数发生了变化，但扩大后的文本容器的高度由外部容器预先确定（它与文本容器中文本的高度完全无关）。

在字体大小上执行jQuery动画时避免文本换行

4 个答案: