将字体添加到容器会给它带来一个奇怪的边框

Question

我想在我的网站上指定一个字体，除非重写。我试着这样做：body {font-family: Poppins;}。

我对这种方法的体验是，字体有不同的...缺乏更好的理解 - 边缘？例如，与默认Arial相比，字体Poppins将我的所有容器扩展2个像素。这JSFiddle试图展示一些我不理解的特性。我想问这个问题的是对这段代码行为的解释。

我的目标是在不改变任何布局的情况下为容器（例如主体）的所有元素定义字体。请询问我可能不清楚的任何事情！

＆＃13;

＆＃13;

@import url(//fonts.googleapis.com/css?family=Oswald:500|Poppins);

body {
  font-family: Poppins;
}

a:first-child {
  background: green;
  font-family:Poppins;
}

a:last-child {
  background: red;
  font-family: Oswald;
}

.div {
  font-size: 1.5rem;
  background: blue;
}

.div:nth-of-type(3) a {
  font-family: Poppins;
}

.div:nth-of-type(4) {
  font-family: Oswald;
}

＆＃13;

<div class="div">
  <a>33px</a>
  <a>36px</a>
  38px
</div>

<br>

<div class="div">
  <a>Oswald 36px</a>
  Poppins 38px
</div>

<br>

<div class="div">
  <a>Poppins 33px</a>
  Poppins 35px
</div>

<br>

<div class="div">
  <a>Oswald 36px</a>
  Oswald 36px
</div>

＆＃13;

＆＃13;

＆＃13;

修改 附加屏幕截图以防任何操作系统特定。小提琴在我的Windows机器上呈现为蓝色框，具有相同版本的Chrome ..

Answer 1

不同的字体具有不同的字符宽度，行高和字母间距。这种变化是正常的。你必须在你的CSS中指定使用什么字母间距或行高来使它更接近Arial的字母间距或行高，如果这是一个问题。请注意这些规则是级联的。

Answer 2

看来你的问题与字体无关。你不喜欢未开发的内联元素所构成的奇怪空间。将它们设置为浮动并且空间消失：

＆＃13;

＆＃13;

@import url(//fonts.googleapis.com/css?family=Oswald:500|Poppins);

body {
  font-family: Poppins;
  line-height: 1.5;
}

a {
   float: left;
}

a:first-child {
  background: green;
  font-family:Poppins;
}

a:last-child {
  background: red;
  font-family: Oswald;
}

div {
  font-size: 1.5rem;
  background: blue;
}

div:nth-of-type(3) a {
  font-family: Poppins;
}

#osw {
  font-family: Oswald;
}

＆＃13;

<div>
  <a>33px</a>
  <a>36px</a>
  38px
</div>

<br>

<div>
  <a>Oswald 36px</a>
  Poppins 38px
</div>

<br>

<div>
  <a>Poppins 33px</a>
  Poppins 35px
</div>

<br>

<div id="osw">
  <a>Oswald 36px</a>
  Oswald 36px
</div>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

@import url(//fonts.googleapis.com/css?family=Oswald:500|Poppins);

body {
  font-family: Poppins;
}

a:first-child {
  background: green;
  font-family:Poppins;
}

a:last-child {
  background: red;
  font-family: Oswald;
}

div {
  font-size: 1.5rem;
  background: blue;
}

div:nth-of-type(3) a {
  font-family: Poppins;
}

#osw {
  font-family: Oswald;
}

＆＃13;

<div>
  <a>33px</a>
  <a>36px</a>
  38px
</div>

<br>

<div>
  <a>Oswald 36px</a>
  Poppins 38px
</div>

<br>

<div>
  <a>Poppins 33px</a>
  Poppins 35px
</div>

<br>

<div id="osw">
  <a>Oswald 36px</a>
  Oswald 36px
</div>

＆＃13;

＆＃13;

＆＃13;