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中存在渲染问题。尝试使用源中的SVG文件交换woff文件。我写了一篇关于preventing icon font cutoff in 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并添加不间断的空格（df1 <- structure(list(A = c("a", "b", "c", "d"), B = c("LOW", "LOW", "LOW", "LOW"), C = c(1.5, 2.9, 1, 2), D = c(0.2, 0.4, 1.3, 10 ), E = c(NA, "HIGH", "LOW", "LOW"), F = c(1000L, 6000L, 400L, 1000L), G = c(2000L, 1000L, 1111L, 400L), H = c(NA, NA, "LOW", "HIGH")), .Names = c("A", "B", "C", "D", "E", "F", "G", "H"), class = "data.frame", row.names = c(NA, -4L))）并使用CSS调整额外的左侧空间。例如：

\00a0

使用btn-small bootstrap类时，Chrome中的Font Awesome图标会被切断

2 个答案: