如何在所有缩放级别中保持字体大小相等？答案

【问题标题】：how to keep font size equal in all zoom levels?如何在所有缩放级别中保持字体大小相等？
【发布时间】：2015-07-14 18:35:53
【问题描述】：

我使用图标字体和文本阴影制作了一些气泡，我需要在所有缩放级别中保持这些气泡的大小相同

这是我的语法

span.bubble_1 {
        position: absolute;
        top: percentage(22 / 661);
        left: percentage(66 / 658);

        &:before {
            content : attr(data-icon);
            color: transparent;
            opacity: 0.18;
            font-size: 132px;
            @include text-shadow(0 0 30px #0070b1);
        }
}

字体大小实际上是我的气泡大小，我希望我的字体大小在浏览器的所有缩放级别中都相同

有没有纯css方式？

编辑：我搜索了很多，发现有一个名为 TEXT-SIZE-ADJUST 的 CSS3 属性，但任何主流浏览器都不支持它

【问题讨论】：

标签： css zooming font-size

【解决方案1】：

试试这个。

132 * 缩放级别

确保您的缩放级别值为小数点后一位。

【讨论】：

你想让字体大小是动态的吗？如果是这样，这是更改字体大小的数学逻辑.. 132 是当前字体大小

【解决方案2】：

如果你愿意使用 javascript，代码如下：

HTML：

<p>This text will preserve its size</p>

Javascript：

window.onload = setSize();
window.onresize = setSize();

function setSize()
{
    para = document.querySelector('p');
    windowHeight = parseInt(window.innerHeight);
    newSize = 0.05*windowHeight;        // Change 0.05 to control size
    para.style.fontSize = newSize;  
}

在这个简单的代码中，文本会由于边距大小的变化而改变位置，所以只需添加以下内容即可避免这种情况：

body {  margin: 0; }

这不适用于 jsfiddle，因为输出区域不是网页本身。直接运行。

【讨论】：