首页 > 解决方案 > 增加浏览器的默认字体大小是如何工作的?

问题描述

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

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

标签: htmlcss

解决方案


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

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

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

如果您在 DOM 树的下方指定字体大小,则将使用默认大小,直到遇到指定的大小,如果指定的大小是相对大小,则它是相对于当前大小的相对大小,这可能是浏览器的默认值;例如:

<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 和其他浏览器也可能有最小字体大小的设置;页面中指定的小于最小值的字体将增加到最小值——但这不是标准的一部分,并且(可能)取决于浏览器。


推荐阅读