如何改变css文本的"内部"直线高度

Question

我正在尝试使用名为entypo的图标字体.字体很棒,但开发人员选择的填充是可怕的,并使这个字体真的很好用.虽然图标非常好,但我只是想让它发挥作用.

它归结为使字体看起来"正常",字体大小需要很大(如40px +).

如果您试图将图标放入15px高度的空间,则字体大小将为40px,然后您需要处理所有额外空间.

我尝试在每个可能的组合中设置显式高度,显式线高度,垂直对齐,结果是PC和mac之间的差异.

我唯一能想到的是,"剩余空间"由不同的操作系统以不同的方式处理.

是否有一些我不知道的CSS属性会解决这个问题？

个人计算机

苹果电脑

这是我过去常常尝试的非常糟糕的CSS,并尽可能地将其归零.请记住,我已经尝试过玩高度和线高,它总是同样的问题,PC总是把它放在mac放置的地方.

.icon {
    font-family: 'entypo';
    display: inline-block;
    color: #000;
    font-size: 40px;
    line-height: 0;
    height: 0;
    vertical-align: middle;   
}

为了上面的那些图片来演示给你们,这些是我添加的属性: height: 20px; width: 20px; background: red;只是为了演示它如何呈现如此不同.

Answer 1

我也遇到了同样的问题。我不确定我的解决方案是否那么好，但我会将其发布，看看我们是否可以开始一些讨论。

.icon {
  font-family: 'Entypo';
  position: absolute;
  font-size: 40px;
  height: 20px;
  width: 20px;
  margin-left: -20px;  /* This will force it to live before the containing element, so the container may need 20px of padding-left */
  margin-top: -1px;    /* Just because it was still sitting one pixel to low for my eye */
  text-align: center;

}

我希望有人知道如何实现这一点，而无需向包含元素添加填充。然而，这是我可以通过绝对定位来完成这项工作的唯一方法，这似乎允许我们“修剪”图标字符上的额外填充。