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

【问题标题】：How to set a fixed font size/ prevent browser scaling for a specific single element?如何为特定的单个元素设置固定的字体大小/防止浏览器缩放？
【发布时间】：2022-01-27 20:04:20
【问题描述】：

我希望导航栏中的字体为固定大小 - 不受浏览器字体大小更改的影响。我完全可以接受其余的文本是流畅的，但是我的网站设计是这样的，我需要导航栏文本无论如何都保持相同的大小。

这是我想做的一个例子。不知道这是怎么做到的。右上角的导航栏不受字体大小增加/减少的影响。如果有人能提示我，将不胜感激！ :)

http://studiogang.net/

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

【问题讨论】：

只需设置像素大小（即12px）？或者您的意思是当用户也缩放时？
他们使用了背景图片studiogang.net/graphics/nav/top.png - 不推荐。事实上，他们对该页面上的所有文本都使用图像。如果用户想要/需要增加字体大小，为什么要拒绝他们？
我很确定他的意思是“不受浏览器缩放级别更改的影响”...
示例站点受浏览器缩放级别的影响。背景图像变得更大更模糊。
感谢 cmets。不是在这里谈论缩放 - 这对我来说很好。我尝试以像素和 em 为单位定义大小。 @davidpauljunior 我看到他们有背景图片。嗯...但他们在 html 中也有文本。他们是否在图像上叠加了文字？这可能是我想做的事情。

标签： css font-size

【解决方案1】：

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

</ul>

【讨论】：

【解决方案2】：

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

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

它只适用于移动设备。

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

【讨论】：

【解决方案3】：

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

话虽如此，当确实需要时（在这方面我也不是无辜的），一个令人满意的解决方案很简单。

根据屏幕大小使用字体大小，但最好只在大屏幕上这样做。

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

【讨论】：

【解决方案4】：

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

【讨论】：