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

Question

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

这是我的语法

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 属性，但任何主流浏览器都不支持它

Answer 1

试试这个。

132 * 缩放级别

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

Answer 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，因为输出区域不是网页本身。直接运行。