增加浏览器的默认字体大小是如何工作的？答案

【问题标题】：How does increasing a browser's default font size work?增加浏览器的默认字体大小是如何工作的？
【发布时间】：2020-10-06 15:09:23
【问题描述】：

要更改浏览器 (Chrome) 的默认字体大小，请进入 Chrome > 设置 > 自定义字体。

上面的方法是如何工作的？它是否会增加用户代理在 html 元素上的默认字体大小 16 像素？我问这个的原因是因为我注意到在 html 标签上设置显式字体大小会阻止此方法工作。

【问题讨论】：

您想尝试设置显式字体大小的原因是什么？
@Brad 个人风格偏好。您是否建议不要设置显式字体大小（在 html 元素上），因为这意味着用户无法增加 font-size？
不，绝对不是。网络的一个主要特点是它可以适应不同的设备并以不同的方式显示。不是印刷品。它在不同的条件下应该是不同的。此外，我认为我在近十年内没有设置单一的px 维度。大多数事情，我从em 扩展。默认情况下，1em 是任何设备上的可读大小。因此，如果我想要一个按钮，我可能会将其填充设置为1em 2em 或其他东西。我知道它的尺寸合适。这是一个相对大小。一切都可以根据需要放大/缩小。我离开基地1em。

标签： html css

【解决方案1】：

增加浏览器的默认字体大小仅意味着浏览器将使用更大的字体大小当没有指定字体大小时。

如果页面上没有指定font-size，则使用浏览器的默认值，因此将使用更大的字体大小。一旦你在某物上指定了字体大小，that 就是该元素及其后代使用的字体大小。

如果您在 html 元素上指定该字体大小，则所有内容都是该元素的后代，因此所有内容都有指定的字体大小，因此不使用浏览器的默认大小。

如果您在 DOM 树的下方指定字体大小，则将使用默认大小，直到遇到指定的大小，如果指定的大小是 relative 大小，则它是相对于当前大小的大小，可以是浏览器的默认值；例如：

<body>
    <div>
        <!-- the text below is the browser's default size -->
        <p>Some text in a paragraph</p>
    </div>
    <div style="font-size: 16px">
        <!-- the text below is 16px *regardless* of the browser's default -->
        <p>Some text in another paragraph</p> 
    </div>
    <div style="font-size: 2em">
        <!-- the text below is twice the browser's default size -->
        <p>Some text in a paragraph</p>
    </div>
</body>

Chrome 和其他浏览器也可能有最小字体大小的设置；页面中指定的小于最小值的字体将增加到最小值——但这不是标准的一部分，并且（可能）取决于浏览器。

【讨论】：

谢谢。你会说这种行为在所有浏览器中都相当一致吗？您是否建议不要设置显式字体大小（在 html 元素上），因为这意味着用户无法增加字体大小？
@tonitone106 — 在查看页面时，用户仍然可以使用 Ctrl-Plus / Ctrl-Minus 增大/减小大小。所有浏览器配置的默认字体大小都是在没有指定大小时设置一个大小。大多数页面作者设置字体大小；因为他们想要控制他们的页面布局（其他方式也是可能的），或者无障碍指南建议比大多数浏览器默认设置更大的文本，或者他们的字体在典型的浏览器默认设置下效果不佳。您还可以根据用户的选择设置大小...font-size: 120% 等，如果我想要全局大小，我在 <body> 上使用 .css 文件规则
@tonitone106 您可能想阅读这个其他问题并且它已被接受答案：stackoverflow.com/q/6803016/17300