JS font-resize 在 IE 之外的浏览器中不能逐渐起作用答案

【问题标题】：JS font-resize not working gradually in browsers apart from IEJS font-resize 在 IE 之外的浏览器中不能逐渐起作用
【发布时间】：2012-03-22 13:35:30
【问题描述】：

我在 javascript 中调整字体的大小，直到它淹没它所在的 div。我这样做是因为网站的布局是流畅的，因此 div 的大小会发生变化，我想相应地匹配字体。

这是一个简单的循环：

    while (!overflow(div)) {
        fontSize += 1;
        div.css("font-size", fontSize + "%");
    }

奇怪的是，只有 IE 才能正确。

Chrome、Firefox 和 Opera 不会线性调整字体大小，而是以不规则的间隔调整。

例如Chrome 只会将字体大小调整为 108%、120% 和 129%，似乎忽略了介于两者之间的所有值。 Moz 和 Opera 有自己的间隔（那个间隔更小），所以要弄清楚那里发生了什么并不容易。

有人有想法吗？

【问题讨论】：

我猜 while 循环的运行速度比 DOM 更新发生的速度快。只是一个疯狂的猜测。
你的溢出函数是什么？
function overflow(obj) { return (obj[0].scrollHeight / obj[0].clientHeight > 1) ? true : false; }
两年后，我在所有其他浏览器中仍然遇到这个问题。

标签： javascript css browser fonts resize

【解决方案1】：

基于 WebKit 的浏览器和 Firefox 进行了优化，可以错开和批量更新 DOM，从而使页面呈现整体更高效。这个想法是，对 DOM 的多次连续更新很少需要单独的渲染，而最后只需要一次渲染。但是，仍然有一种方法可以触发渲染。只需调用一个强制浏览器重新布局页面的 getter。

o = div.offsetWidth;

在你的循环中添加它，在设置样式属性之后，每次迭代都会触发一次渲染。

在 Google 工程师 Tony Gentilcore 的博客中，有 a list 触发 WebKit 中重新布局的所有方法和 getter 属性。

【讨论】：

不，没有这样做。没有效果。如果我等待，“差距”也会持续存在。比如说，我正在调整浏览器窗口的大小：IE 会很好地调整字体，但 Chrome 会在大小之间跳转，造成间隙。我也可以在跳跃时暂停，然后在（例如）108% 和 120% 之间曲折，而实际上应该只有 1% 或 2%。