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 * zoomLevel

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

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

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

2 个答案: