为什么字体图标有额外的高度？答案

【问题标题】：Why font-icons have extra height?为什么字体图标有额外的高度？
【发布时间】：2013-04-19 14:19:06
【问题描述】：

我正在使用一组使用Ico moon 创建的图标字体。这些图标在 Firefox 和 Chrome 中看起来和工作得很好，但在 IE 10 中显示的图标有额外的高度。

我不确定高度是从哪里来的。

在 IE 10 中，图标的高度似乎要高得多。

这是它们在具有正确高度的 chrome 中的外观。

这是图标的 CSS：

font-family: 'IconFont';
speak: none;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;

这里是来自 IE10 开发工具的 Traced Styles。

我在 codepen.io 上做了一个类似问题的快速演示。Demo is here

有没有人遇到过类似的问题？有没有人找到解决这个问题的方法？

【问题讨论】：

需要查看其余代码。最好在小提琴中。
你有没有试过给图标一个height？如果 IE 没有找到 width 和或 height，它不确定该怎么做。
@DiederikEEn 这没有意义。这是一个图标 font，就 IE 而言，它应该呈现一个 inline-block，其中包含 13px 的字母。
@Mario Icon 字体现在很流行，因为它们可以很容易地在一个 HTTP 请求中预加载你的 webapp 需要的所有图标。它们在可访问性方面也比 CSS 图像替换更干净，尤其是基于像 Symbolset 这样的连字的那些。 PNG 不可扩展，而 SVG 在下载大小方面可能真的很臃肿。 tl;dr：字体的使用主要是一种性能改进，它 (ab) 使用了 TTF 是一种非常紧凑但高度兼容的黑白矢量图形格式这一事实。
CodePen 演示 looks fine in my IE10.

【解决方案1】：

行高问题：1

你写

line-height: 20px ;

【讨论】：

【解决方案2】：

在 Microsoft office 图片（或其他编辑器）中打开您的图片并调整图片大小，IE 浏览器有时会将图片显示为真实大小。

【讨论】：

【解决方案3】：

我遇到了这样的问题 - 我修复了它）））在我的 svg 文件夹中是一个错误的文件。（使用具有参数 X-1220 和 Y-770 的隐藏元素）所以这是一个问题！我删除了这个元素，一切都很好。

【讨论】：