Question

我正在制作一个自适应网站，当用户有一些奇怪的字体大小配置时（对于视觉问题等）设计以一种可怕的方式打破......显然我不想忘记可访问性......那么：有没有办法知道用户何时试图强制使用字体大小，禁用它并给他不同的样式？

Answer 1

通常，您在页面上的字体大小设置会覆盖在浏览器设置中设置的字体大小设置，除非您在设置%时使用em或font-size，在这种情况下，它们可能相对于在browset设置中设置的大小（具体取决于您设置大小的方式）。

这意味着如果你有，在你的CSS中说body { font-size: 9px }并且视障用户在普通Chrome设置中选择了最大尺寸（对应于24px），则会覆盖用户设置并使用难以辨认的尺寸。这就是为什么用户不经常改变浏览器字体大小设置的一个原因：当单独使用时，它们的效果相当有限。

但是，如果用户将浏览器设置为忽略网页上指定的字体大小（例如，可以通过“辅助功能”设置在IE中），则无论您做什么，都会使用浏览器设置中的字体大小。（根据某些元素的浏览器默认值，页面中的字体大小可能仍会有所不同，例如由于使用small标记或标题元素，但页面上任何字体大小的CSS设置都会被有效禁用。）

类似的考虑因素也适用于最小字体大小设置，这些设置相当常见，甚至可以通过浏览器的出厂设置进行设置。它们在正常的CSS级联产生一些大小后生效 - 如果该大小小于最小值，则使用最小值。

有一些间接方法可以尝试找出浏览器实际使用的字体大小，例如：通过使用clientHeight属性获取元素的高度。如果对line-height: 1的元素执行此操作，通常会获得使用的实际字体大小。但你无法禁用它;它几乎是浏览器设置的本质，它覆盖了网页上无法覆盖它们的网页设置。

Answer 2

您可以通过阅读根html元素的属性来获取getComputedStyle的默认字体大小（除非您有修改其font-size的css规则）。

// get default font size in px
var computedStyle = window.getComputedStyle(document.getElementsByTagName("html")[0], null);
var defaultFontSize = parseFloat(computedStyle.getPropertyValue('font-size'));

对于大多数浏览器，默认值应为16px。

Answer 3

要覆盖用户样式表中的值，请将!important添加到指定字体大小的规则中，例如：

body {
    font-size: 16px !important;
}

但请注意，一般情况下应避免这种情况。另见这个问题： when to use !important property in css?

我可以禁用用户字体大小配置吗？

3 个答案: