如何更改html中的字体大小？答案

【问题标题】：How to change font size in html?如何更改html中的字体大小？
【发布时间】：2013-08-03 03:59:12
【问题描述】：

我正在尝试制作一个网站，我想知道如何更改段落中文本的大小。我希望第 1 段比第 2 段大。只要它更大，多少都没关系。我该怎么做？

我的代码如下：

<html>
<head>
<style>
  p {
    color: red;
  }
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>

【问题讨论】：

您可以使用rem 作为字体大小的比例，以获得更大的灵活性和动态性。

标签： html fonts size

【解决方案1】：

给他们上一堂课，并将你的风格添加到课堂上。

<style>
  p {
    color: red;
  }
  .paragraph1 {
    font-size: 18px;
  }
  .paragraph2 {
    font-size: 13px;
  }
</style>

<p class="paragraph1">Paragraph 1</p>
<p class="paragraph2">Paragraph 2</p>

检查这个EXAMPLE

【讨论】：

这是特定于浏览器的。如果你想要跨浏览器的默认值，你应该自己设置它。

【解决方案2】：

或者内联添加样式：

<p style="font-size:18px">Paragraph 1</p>
<p style="font-size:16px">Paragraph 2</p>

【讨论】：

谢谢。它完美地工作。你知道默认字体大小是多少吗？我认为它大约是 16/17 像素...
内联样式不好！

【解决方案3】：

如果您只想增加任何文档的第一段的字体大小，这是在线出版物使用的效果，那么您可以使用 first-child 伪类来实现所需的效果。

p:first-child
{
   font-size:   115%; // Will set the font size to be 115% of the original font-size for the p element.
}

但是，这将更改作为任何其他元素的第一个子元素的每个 p 元素的字体大小。如果您有兴趣设置 body 元素的第一个 p 元素的大小，请使用以下内容：

body > p:first-child
{
   font-size:   115%;
}

上面的代码只适用于作为body元素子元素的p元素。

【讨论】：

如果我们将它与rem结合配置，并使用rem作为字体大小和其他相关大小数字的比例，它会更加灵活和动态。

【解决方案4】：

如果您想在不添加类的情况下执行此操作...

p:first-child {
    font-size: 16px;
}

p:last-child {
    font-size: 12px;
}

或

p:nth-child(1) {
    font-size: 16px;
}

p:nth-child(2) {
    font-size: 12px;
}

【讨论】：

【解决方案5】：

你不能在 HTML 中做到这一点。你可以在 CSS 中。创建一个新的 CSS 文件并写入：

p {
 font-size: (some number);
}

如果这不起作用，请确保您没有任何“pre”标签，这会使您的代码更小。

【讨论】：

【解决方案6】：

您可以通过在段落标签中设置样式来做到这一点。例如，如果您想将字体大小更改为 28 像素。

<p style="font-size: 28px;"> Hello, World! </p>

你也可以通过设置来设置颜色：

<p style="color: blue;"> Hello, World! </p>

但是，如果您想在将它们添加到您的网站并使用它们之前预览字体大小和颜色（我建议这样做）。我建议事先对其进行测试，以便选择与背景形成鲜明对比的良好字体大小和颜色。如果您愿意，我建议您使用这个网站，找不到其他任何东西：http://fontpreview.herokuapp.com/

【讨论】：