如何设置固定的字体大小/防止浏览器缩放特定的单个元素？

Question

我希望导航栏中的字体为固定大小-不受浏览器字体大小更改的影响。我对其余部分的内容很满意，但我的网站设计合理，无论任何情况，我都需要导航条文本以保持相同大小。

这里是我喜欢做的一个例子。不知道这是怎么做的。右上角的导航栏不受字体大小增加/减小的影响。如果有人可以帮助我，将不胜感激！：）

此外，我也不想使用图像，因为我想要的下拉菜单不适用于图像映射。或者至少，我宁愿不走那条路。

Answer 1

1
投票

<ul id="navbar" style="font-size:14px">

</ul>

Answer 2

您可以尝试使用text-size-adjust：

 -webkit-text-size-adjust:none;
 -ms-text-size-adjust:none;
 -moz-text-size-adjust:none;
 text-size-adjust:none;

虽然仅适用于移动设备。

除此之外，我认为唯一的选择是使您的布局在不同的缩放级别上都能正常工作。

Answer 3

由于可访问性问题，我们不应该使用此功能。如果将字体设置为“固定”大小，那么那些系统字体为200％或浏览器缩放为100％以上的字体的人，因为它们近在眼前，将无法放大字体并读取内容你打算给他们。

话虽这么说，当确实需要它时（我在这方面也不是无辜的），有些令人满意的解决方案很简单。

使用相对于屏幕大小的字体大小，但是最好只在大屏幕上使用。

@media screen and (min-width: 992px) {
    element {
        /* font-size: 2.5vh; */
        font-size: 2.5vw;
    }
}

Answer 4

-1
投票

尝试使用像素作为字体大小。