1

我有一些以预览比例显示的内容，通过对所有内容使用 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（包括 em 大小的图像）进行预览，所以这并不可行。

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 秒。我从Flot得到这个想法，这是一个用于渲染画布图表的 jQuery 库。如果您查看他们的主页示例.. 您将看到通过向左/向右平移来动画图表。如果您保存该页面.. 您将在 flot.demo.js 中看到类似的内容：

来自fllotcharts.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

Using css letter-spacing ing the div.padder like:

letter-spacing: 1px;

makes a bit of difference, thought I don't know if it's exactly the change you're hoping for.

于 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.

这会产生以下后果：

  • 调整大小期间行长与容器宽度的比例变化
  • 因此，在某些情况下，至少对于某些行，换行符的位置也必须在调整大小期间发生变化

我只能看到一种解决方案来防止您遇到的问题：强制外部容器和文本容器具有相同的纵横比（即，因为任何涉及使用实际 HTML 文本并在转换期间更改纵横比的解决方案都将具有同样的问题）。

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

于 2014-12-19T15:38:16.890 回答