Question

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

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

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

我尝试在每个可能的组合中设置显式高度，显式线性高度，垂直对齐，结果在PC和mac之间是不同的。

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

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

PC

enter image description here

MAC

enter image description here

这是我过去常常尝试的非常虚伪的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;

}

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

Answer 2

bug用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>

Answer 3

Entypo's默认行高已搞砸。

幸运的是，Fontello以上的人花了一些时间修复它。它有效。

Answer 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
}

Answer 5

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

如何改变css文本的“内部”行高

5 个答案: