6

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

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

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

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

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

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

个人电脑

在此处输入图像描述

苹果电脑

在此处输入图像描述

这是我曾经尝试过的非常骇人听闻的 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;只是为了演示它如何呈现如此不同。

4

5 回答 5

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;

}

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

于 2012-11-04T22:42:26.737 回答
1

错误已用 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>
于 2013-11-27T19:03:02.317 回答
1

Entypo 的默认行高被搞砸了。

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

于 2014-08-15T02:17:06.710 回答
0

我的解决方案是：

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
}
于 2015-01-17T16:47:16.400 回答
-1

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

于 2012-11-02T01:51:49.537 回答