如何使用 CSS 为整个 HTML 网页设置字体大小？

Question

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

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

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

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

谢谢！

Answer 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>

Answer 2

<style>
  *{
  font-family: Vedana;
  font-size: 24px; // change size to what you need for you page
  }
<style>

Answer 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 可能有一些更高级的主题，但有一些很好的讨论

祝你的开发之旅好运！

Answer 4

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

* { 
  font-size: 1rem;
}

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