代码之家 › 专栏 › 技术社区 › Rachel Dockter

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

css3 html5 css html

0

Rachel Dockter · 技术社区 · 6 年前

我有一个 input 和 h4 element。我使用的字体和字号相同,但它们看起来不一样。


    
     
      
       
        {
字体系列:sansreg;
src:url(../fonts/opensansreg.ttf);
}

.全局消息h4{
/*对于聊天信息*/
保证金:0;
字体大小:15px;
字体系列:sansreg;
}

输入{
/*用于聊天信息输入*/
左侧填充:10px;
框大小:边框框;
字体大小:15px;
字体系列:sansreg;
边界:0;
边界半径:2px;
背景色:白色;
保证金:0自动;
概要:0;
背景重复:无重复;
背景位置:2px 3px;
显示:块;
}<代码> < /PRE>
<div id=“chat list container”>
<ul id=“聊天信息”>
<li class=“全局消息”>
<h4>威尔:有人想玩吗?/lt/H4& gt;
&L./L>
<li class=“全局消息”>
&乔治:嘿,伙计们!/lt/H4& gt;
&L./L>
<li class=“全局消息”>
<h4>杰西卡:如何开始游戏?/lt/H4& gt;
&L./L>
&L/UL & GT;




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

4 回复 | 直到 6 年前

1

4

lenilsondc 6 年前

这个 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;
}

<h4>default bold</h4>
<h4 class="normal">light</h4>
<input value="default light"><br>
<input value="bold" class="bold"><br>

2

0

Simon Jensen 6 年前

标题具有不同的默认值。在您的案例中,您将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元素复制中的所有默认值。通过这样做,我可以访问所有的属性,而不仅仅是那些我想更改的属性。

3

0

Animan 6 年前

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

4

0

Jack 6 年前

尝试将此添加到您的CSS:

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

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