为什么字体图标在其内容区域之外呈现？以及如何解决？答案

【问题标题】：Why does font-icon render outside of its content area? and how to fix it?为什么字体图标在其内容区域之外呈现？以及如何解决？
【发布时间】：2019-12-05 04:09:47
【问题描述】：

我有一个由font-icons 组成的.woff 字体文件。这些图标在 Mac 和 Windows 中的呈现方式不同。我怀疑字体度量中 Win Ascent/Descent 和 HHead Ascent/Descent 值不同的原因。

这个图标字体文件是使用webfonts-generator包从svg文件生成的

这是在 mac 和 windows 中呈现的相同图标的快照

苹果：

窗户：

谁能告诉我如何解决这个问题？

【问题讨论】：

请发minimal reproducible example而不是截图。
如果您向我们展示您的 html 和 css 代码，我们可以为您提供帮助。 :)

标签： css webfonts glyphicons icon-fonts

【解决方案1】：

可能是你的 line-height 小于 font-size

【讨论】：