如何更改 CSS 文本的“内部”行高答案

【问题标题】：how to change 'inner' lineheight of css text如何更改 CSS 文本的“内部”行高
【发布时间】：2016-08-26 11:21:45
【问题描述】：

我正在尝试使用一种名为 entypo 的图标字体。字体很棒，但是开发人员选择的填充是可怕的，并且使这种字体令人恼火。不过图标真的很好，我只是想让它工作。

归结为使字体看起来“正常”，字体大小需要很大（例如 40px+）。

如果您尝试将图标放入 15 像素高度的空间中，则字体大小将为 40 像素，然后您需要处理所有额外的空间。

我尝试过在所有可能的组合中设置显式高度、显式行高、垂直对齐，结果在 PC 和 mac 之间有所不同。

我唯一能想到的是，不同操作系统对“剩余空间”的处理方式不同。

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

电脑

MAC

这是我曾经尝试过的非常骇人听闻的 CSS，尽我所能将其归零。请记住，我已经尝试过使用 height 和 lineheight，它总是同样的问题，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; 只是为了演示它是如何呈现如此不同的。

【问题讨论】：

你能发一个fiddle的图标和文字吗？没有看到整个设置就很难做任何事情。
这会很困难，因为它涉及到@font-face，但是尝试转到entypo.com 的演示页面并使用 chrome 检查器（在 Mac 上）设置这些确切的值，你会看到问题：i.imgur.com/DmLts.png
然后转到您的 PC 并设置相同的属性。从我看到的情况来看，这不可能让字体在两个操作系统上都完全位于红色框中

标签： html css fonts font-face

【解决方案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;

}

我希望有人知道如何在不向包含元素添加填充的情况下完成此操作。然而，这是我可以使用绝对定位完成这项工作的唯一方法，这似乎允许我们“修剪”图标字符上的额外填充。

【讨论】：

解决方案似乎是使用 fontello。不幸的是，我只是在将所有图标都转换为精灵后才找到它:(

【解决方案2】：

错误已用 jquery 修复；)

只需在页面上添加：

<script>
$(document).ready(function(){
var isMacLike = navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)?true:false;
var isIOS = navigator.platform.match(/(iPhone|iPod|iPad)/i)?true:false;

if(isMacLike || isIOS)
    {    
        //alert("mac!!!");
        $(".entypoclass").css("margin-top","11px");
    }
    else
        {
           // alert("pc!");
        }
});
</script>

【讨论】：

【解决方案3】：

Entypo's 默认行高搞砸了。

幸运的是，Fontello 的某个人花了一些时间来修复它。它有效。

【讨论】：

【解决方案4】：

我的解决办法是：

icon{
    line-height:0px;
    overflow:hidden;
    display:inline-block;
    font-size:75px;
    font-family:'entypo';
    text-align:center;
    height:37px;
    width:37px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased
}

【讨论】：

【解决方案5】：

很高兴看到 HTML，但也许填充会有所帮助，比如 padding:3px;。

【讨论】：