6

我已经使用自定义 .svg 图标创建了一个图标字体，但我遇到了填充问题（或者可能是其他问题）。我以前不包含任何填充的图标，以防出现问题。

出于某种原因，图标似乎已经移到了它们应该在的位置上方，我找不到任何方法将它们放回容器中。这是我正在谈论的一个例子：http: //i.imgur.com/RwOKWLp.png

我已将“背景颜色”设置为黄色以突出显示我的问题。

这是一个图标的 HTML：

<div class="vicon" aria-hidden="true" data-icon="&#xe001;"></div>

这是我目前正在使用的 CSS：

[data-icon]:before {
    font-family: 'iconfont';
    content: attr(data-icon);
    speak: none;
    font-size: 100%;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.vicon {
    display: inline-block;
    font-size: 50px;
    margin-top: 1em;
    background-color: yellow;
}

@font-face 代码：

@font-face {
font-family: 'iconfont';
src:url('[font_location_on_company_server].eot');
src:url('[font_location_on_company_server].eot?#iefix') format('embedded-opentype'),
    url('[font_location_on_company_server].woff') format('woff'),
    url('[font_location_on_company_server].ttf') format('truetype'),
    url('[font_location_on_company_server].svg#icon_font') format('svg');
font-weight: normal;
font-style: normal;
}

有谁知道为什么会发生这种情况？

4

1 回答 1

2

问题不是 CSS，而是你的字体的基线高度（参见http://icomoon.io/#docs/font-metrics）

这意味着字体度量是错误的。我不知道您是否更改了它们，或者它是否是来自 Icomoon 的错误，但我现在已经能够导出正确的字体。

无论如何，你不能（或者至少你不应该）用 CSS “纠正”这个。最好的方法是改变字体。

于 2013-04-24T15:22:37.777 回答