【问题标题】:How can I set font size for my entire HTML webpage using CSS?如何使用 CSS 为整个 HTML 网页设置字体大小?
【发布时间】:2020-04-09 11:33:12
【问题描述】:

您好,我是 CSS 的新手,我想知道是否有人可以帮助建议我如何设置整个网页的字体大小?

我一直在看的教程只是向我展示了如何为每个单独的部分设置字体大小。我在 99% 的页面上使用相同的字体大小,所以我不想对每一个新段落、表格行、单元格等都进行编码。

我已经在使用一个简单的代码来更改整个页面的字体系列(见下文),所以我假设有一个简单的代码可以实现相同的大小。

    <style>
    *{font-family: Verdana;}
    </style>

谢谢!

【问题讨论】:

    标签: html css font-size


    【解决方案1】:

    在正文标签中设置字体系列和大小,除了少数例外,页面中的所有元素都将继承该大小:

    body{
       font-family: Verdana, sans-serif;
       font-size: 12px
    }
    

    或者,您可以将任何元素设置为em font-size:

    p{
       font-size: 1.5em;
    }
    

    1 em 等于元素父元素的字体大小,因此在这种情况下,p 标记是div 标记大小的一倍半。由于div标签为12px(继承自body),p标签为18px:

    body{
       font-family: Verdana, sans-serif;
       font-size: 12px
    }
    
    p{
       font-size: 1.5em;
    }
    <div>
       <p>I'm in a p tag, my font size is 18px</p>
    </div>

    【讨论】:

      【解决方案2】:
      <style>
        *{
        font-family: Vedana;
        font-size: 24px; // change size to what you need for you page
        }
      <style>
      

      【讨论】:

        【解决方案3】:

        您好,欢迎来到 Stack Overflow。您可以使用 HTML 标记来执行此操作。有些人可能不同意这个位置,但我喜欢把它放在这里,因为它位于元素的根部。当你更深入时,你可能会开始更多地使用 REM 和 EM 单位,这对我来说似乎更有意义。但实际上您可以将其放在星号、正文或 HTML 上。其中每一个都使用相同的 CSS:

        font-size: XXpx;

        HTML {
          font-size: XXpx;
        }
        
        body {
          font-size: XXpx;
        }
        
        * {
          font-size: XXpx;
        }
        

        Here's a good link 可能有一些更高级的主题,但有一些很好的讨论

        祝你的开发之旅好运!

        【讨论】:

        • 通配符选择器覆盖 h1...h5 标签,不像 body 或 html
        • 是的,没错。这就是为什么我特别推荐 HTML 标签,但不确定 OP 是否需要更大的通配符 font-size
        【解决方案4】:

        您可以在同一个通配符选择器中使用font-size

        * { 
          font-size: 1rem;
        }
        

        请记住,通配符选择器* 携带最少的specificity;在别处声明的任何字体大小都将覆盖此声明。

        【讨论】:

        • 感谢您的快速回复!这似乎成功了!
        • 这会重置标签的默认字体大小,例如 h1...h5
        • @rogue_otter 请注意,这将覆盖所有元素的默认font-sizes,例如&lt;h1&gt;&lt;h5&gt; 标签。
        • @symlink 你是对的。我的标题也改变了。我确实想要一个适用于整个页面的解决方案,除非我特别指定具有自己大小的某个部分。谢谢!
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-07-21
        • 2021-03-11
        • 1970-01-01
        • 2011-03-05
        相关资源
        最近更新 更多