Question

有没有办法让CSS中的文字实际匹配我给它的高度？

我的意思是，如果你将字体设置为14px，如果你测量它，它实际上不是14px高。它更像是10px。

这是一个JSFiddle来说明我在说什么：https://jsfiddle.net/bbtk986d/2/

注意文本实际上没有触及绿色区域的边缘。它只有几个像素，即使它应该完全正确。

问题在于，当试图遵循样式指南（如Google Materials）时，他们会说像14px这样的东西，但14px实际上太小了，因为它们的意思是14px。我希望能够改变它的呈现方式，以便完全准确，所以我不必调整每一个值。

小提琴代码：

HTML：

<div>
  <span></span>
  <span></span>
  <span></span>
  <p>
    Text
  </p>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
  <p class="b">
    Text
  </p>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
  <p class="c">
    Text
  </p>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
  <p class="d">
    Text
  </p>
</div>

CSS：

div {
  position: relative;
  width: 300px;
  margin-bottom: 10px;
}

span {
  width: 100%;
  background: #FCC;
  height: 20px;
  display: block;
}

span:nth-child(2) {
  background: #CFC;
  height: 40px;
}

p {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  opacity: .5;
  text-transform: uppercase;
  display: block;
  padding: 0 10px;
  font-size: 40px;
  line-height: 80px;
}

p.b {
  font-family: Arial;
}

p.c {
  font-family: "Comic Sans MS"
}

p.d {
  font-family: monospace;
}

Answer 1

事实证明，这是不可能的。

但是，Google材料风格指南并未将像素用作精确的字形高度......他们将像素用作像素。我的眼睛只是在欺骗我。我测量了Fireworks中的Google Materials按钮，结果发现他们的14px的实际字形高度也是10px。

以下是关于按钮的页面：https://material.google.com/components/buttons.html#buttons-button-types

对于那些感兴趣的人，这里是基本按钮的CSS：

@import url(https://fonts.googleapis.com/css?family=Roboto:500);

.button {
  background: #9CF;
  border-radius: 2px;
  line-height: 36px;
  font-size: 14px;
  display: inline-block;
  text-decoration: none;
  padding: 0 16px;
  text-transform: uppercase;
  font-family: Roboto;
  color: #FFF;
}

https://jsfiddle.net/jzqd56nn/

使字体实际匹配高度（以像素为单位）

1 个答案: