Question

浏览器（即Chrome和Firefox）根据字体大小不同地破坏文本，即使容器大小是相对于字体大小指定的

CSS

#main {
    font-size: 12px;
    width: 10em;
} 

<div id="main">
    text
</div>

的JavaScript

$('#main').animate({'font-size': '20px'}, 10000);

你看到单词在行之间跳转。

同样，它取决于缩放级别（但这只是一个侧面问题）：

normal size zoomed in

“分享你的研究”只适合放大一线。

这看起来像一个舍入错误。有没有办法防止它？你能解决换行位置吗？

当然，HTML不适用于排版。但我需要一个解决方案。所以我使用wkhtmltopdf将页面转换为PDF并使用pdf2htmlEX将其转换为HTML并且它有效，但它从HTML（段落，列表等）中删除了所有语义并为列表项目符号创建了位图。

我正在寻找缩放内容的替代解决方案。唯一真正的限制是使用HTML WYSIWYG编辑器作为输入。

Answer 1

我使用这个解决方案。无论你想要分页符什么，请把这样的div放在一起，而不是br

<div class="lnBreak"></div>

.lnBreak{
   border-top : 10px solid #CCC;
}

Answer 2

从广义上讲，这是一个四舍五入的问题，但可能更恰当地称为光栅化效应。我担心没有修复或通用的解决方法。当字体大小改变时，你不能指望分割成线条保持不变。

例如，您不应期望18px大小的某些文本占12px大小的相同文本宽度的1.5倍，除非意外。例如，假设当字体大小为12px时，字母“P”的垂直笔划是一个像素宽。当字体大小增加18px时，您期望发生什么？假设没有混叠，则笔划将为1px或2px宽，而不是1.5px。