字体真棒图标在使用 btn-small bootstrap 类时在 Chrome 中被切断

Question

以前有其他人遇到过这种情况吗？我在jsfiddle上创建了一个非常简单的示例来重现：http://jsfiddle.net/3UHSc/2/

<a class="btn btn-small">
    <i class="icon-edit"></i> Edit
</a>

该按钮在Firefox和IE中看起来不错，但在Chrome中，图标的顶部像素被切断了。我能够通过添加样式规则来使图标字体更小来解决此问题：

.btn-small > i
{
    font-size: 11px;
}

但我想知道是否有更好/更清洁的方法来让它工作。

Answer 1

SVG 图标字体在 Chrome 中存在呈现问题。尝试将 woff 文件与源中的 SVG 文件交换。我也写了一篇关于防止Chrome中的图标字体截断的博客文章，您可以查看。

即更改此内容：

@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.svg#icomoon') format('svg'),
    url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

对此：

@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    /*
        The SVG font has rendering problems in Chrome on Windows.
        To fix this, I have moved the SVG font above the woff font
        so that the woff file gets downloaded.
    */
    url('fonts/icomoon.svg#icomoon') format('svg'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

Answer 2

您可以覆盖 CSS 并添加一个不间断空格 （ 0a0 ），并使用 CSS 调整多余的左空格。例：

.fa-check-square-o:before {
    content: "0a0f046";
}