logo标签列表

在CSS中如何改变h1和h2的字体大小？

csswordpresshtml-heading
33
在WordPress twenty eleven主题中，我想要改变标题的大小。当我将我的标题包含在h1和h2标签中，如下所示：
<h1>My h1 heading </h1>
<h2> My h2 heading </h2>

我正在使用的主题中，标题字体的大小几乎与内容字体大小相同，除了它们是粗体。所以我的标题不够突出。

我猜我需要在CSS文件中进行一些更改。请指导我需要放入什么。

可能看起来很明显，但请确保您查看的容器内没有另一个定义字体大小的容器。 :) - Alkanshel
还要确保没有人在其他CSS文件中使用了!important。我最终来到这里（这个问题），因为我试图在一个特定的页面上更改h2的大小，但它就是不变。我开始觉得自己疯了，可能是使用了错误的语法或其他什么东西。最终我发现别人已经设置了很多!important的h2大小。唉，永远不要使用“！important”... - ZeekLTK
在某些情况下，您可以直接在HTML中设置样式参数，例如<h1 style="font-size:2.25rem;">My h1 heading </h1>来更改h1或h2标签的字体大小，并让其他标题由.css文件设置。 - Elias
6个回答
51
h1 {
  font-weight: bold;
  color: #fff;
  font-size: 32px;
}

h2 {
  font-weight: bold;
  color: #fff;
  font-size: 24px;
}
请注意，在颜色之后可以使用单词（例如white），十六进制代码（例如#fff）或RGB（例如rgb(255,255,255)）或RGBA（例如rgba(255,255,255,0.3)）。
16
 h1 { font-size: 150%; }
 h2 { font-size: 120%; }

根据需要进行调整。

6
你尝试过什么？这个应该可以解决问题。
h1 { font-size: 20pt; }
h2 { font-size: 16pt; }
1
如果只更改字体大小，则在较小的设备类型上，文本可能会相互交叉。
<style>
.heading-1{
  font-size: 350%!important;
}
</style>

<h1 class="heading-1">
  Get in Touch
</h1>

enter image description here

为了使其响应式，请考虑调整行高。

<style>
.heading-1{
  font-size: 350%!important;
  line-height: 120%!important;
}
</style>

<h1 class="heading-1">
  Get in Touch
</h1>

enter image description here

1
如果您想特别更改标题，这是一个更简单的解决方案。
<style>
    h1.increase {
       font-size: 15px;
}
</style>

<h1 class="increase">Header</h1>
0

您可以快速使用Bootstrap CSS实现。

enter image description here

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Larger Heading</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />

    </head>

    <body>
        <main>
            <h1 class="display-1">Display 1</h1>
            <h1 class="display-2">Display 2</h1>
            <h1 class="display-3">Display 3</h1>
            <h1 class="display-4">Display 4</h1>
            <h1 class="display-5">Display 5</h1>
            <h1 class="display-6">Display 6</h1>
        </main>
    </body>

    </html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接