HTML字体在不同元素上不匹配

Question

我有一个input和h4元素。我使用的是相同的字体和字号，但它们看起来并不相同。

@font-face {
  font-family: sansReg;
  src: url(../fonts/openSansReg.ttf);
}

.global-message h4 {
  /*for the chat messages*/
  margin: 0;
  font-size: 15px;
  font-family: sansReg;
}

.input {
  /*for the chat message input*/
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 15px;
  font-family: sansReg;
  border: 0;
  border-radius: 2px;
  background-color: white;
  margin: 0 auto;
  outline: 0;
  background-repeat: no-repeat;
  background-position: 2px 3px;
  display: block;
}

<div id="chat-box">
  <div id="chat-list-container">
    <ul id="chat-messages">
      <li class="global-message">
        <h4>Will: Anyone wanna play?</h4>
      </li>
      <li class="global-message">
        <h4>George: Hey guys!</h4>
      </li>
      <li class="global-message">
        <h4>Jessica: How do i start a game?</h4>
      </li>
    </ul>
  </div>
  <input id="chat-message" class="input" type="text" placeholder="Message" maxlength="32" />
</div>

因此您可以看到我有一些h4来填充聊天内容，并且在其下方输入内容，并且我使用了相同的字体，但它看起来像这样：

Answer 1

Sub x() Dim i As Long For i = 1 To Lastrow Worksheets("Name").Cells(i, 1).EntireRow.Interior.ColorIndex = IIf(Worksheets("Name").Cells(i, 1).Font.Name = "Arial", 2, 3) Next i End Sub 元素默认具有h4 font-weight；因此，如果要使输入看起来相同，则必须在输入样式中添加bold。

或者，如果您想使font-weight: bold;看起来像h4，则可以通过在input元素上将其设置为普通font-weight: normal;来删除粗体。

示例：

h4

*{
  font-family: Helvetica, Arial;
}

.normal {
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

Answer 2

标题具有不同的默认值。在您的情况下，您将h4与段落进行比较。正如您在下面看到的，有很大的不同。您需要将font-weight: bold;添加到您的.input类中。

H4默认值

h4 {
    display: block;
    font-size: 1em;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

段落默认值

p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

“好的”做法（或我想记住的做法）是为我创建的每个CSS元素复制所有默认值。这样，我不仅可以访问所有要更改的属性，还可以访问所有属性。

Answer 3

将CSS属性font-weight: bold; font-size: 1em添加到输入字段。字体看起来与h4字体相同。

Answer 4

尝试将其添加到您的CSS中：

.global-message h4{
    font-weight: normal;
}

它应该使所有字体看起来都一样。