自定义图标字体在不同浏览器中呈现不同的问题

Question

自定义图标字体存在问题。它在 Safari 和 Chrome 之间呈现不同。它在 Safari 中似乎低 1-2 个像素。我能以某种方式让它在两个浏览器中呈现相同的效果吗？

通过从 Sketch 导出 16 x 16 px SVG 创建图标字体，然后将它们导入 IcoMoon 并将优化指标设置为 16 自动。

IcoMoon 上的网格

Chrome OS X

Safari OS X

现场示例：http://jsfiddle.net/QQ7mV/

HTML：

<a href="" class="button increase">&#x2b;</a>

CSS：

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}
@font-face {
    font-family: "icons";
    src: url("http://cl.ly/Qo0T/icons.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
a {
    display: block;
    text-decoration: none;
    outline: none;
}
.button {
    width: 115px;
    height: 37px;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    margin: 0 auto 20px auto;
    background-color: #edeef0;
    background-repeat: no-repeat;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    transition-property: background-color, opacity;
    -webkit-transition-property: background-color, opacity;
    -moz-transition-property: background-color, opacity;
    -o-transition-property: background-color, opacity;
    -ms-transition-property: background-color, opacity;
    transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}
.button.increase, .button.decrease {
    display: inline-block;
    vertical-align: top;
    width: 23px;
    height: 23px;
    font-family: "icons";
    font-size: 8px;
    font-weight: normal;
    line-height: 1;
    padding: 8px 0 0 0;
    -webkit-font-smoothing: antialiased;
}
.button.increase {
    margin: 13px 5px 0 11px;
}
.button.decrease {
    margin: 13px 0 0 0;
}

Answer 1

所以我自己发现了问题。可能有更好的解决方案，但这个解决方案为我解决了。请随时回复您的解决方案。

http://icomoon.io/#docs/font-face

IcoMoon 库中的每个图标集都列出了 Crisp Size 标签。为了获得最佳效果，您应该在使用您的 字体。例如，如果一个图标集针对 (16 × N)px 大小进行了优化， 通过将字体大小设置为 16px、32px、 48px（= 3 × 16px）等

基本上，您希望避免导入与在 CSS 中使用的尺寸不同的 SVG。例如，如果您将 16x16px SVG 图标导入 IcoMoon，然后在它们上使用 8px 字体大小，它们的渲染效果会很差。而是导入 8x8px SVG 图标，它们将在 Chrome 和 Safari 中呈现相同的效果。

当我说渲染时，我指的是图标字体的垂直对齐方式。

现场示例：http://jsfiddle.net/QQ7mV/3/

HTML：

<a href="" class="button increase">&#x2b;</a>

CSS：

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}
@font-face {
    font-family: "icons";
    src: url("http://cl.ly/QnNX/icons.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
a {
    display: block;
    text-decoration: none;
    outline: none;
}
.button {
    width: 115px;
    height: 37px;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    margin: 0 auto 20px auto;
    background-color: #edeef0;
    background-repeat: no-repeat;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    transition-property: background-color, opacity;
    -webkit-transition-property: background-color, opacity;
    -moz-transition-property: background-color, opacity;
    -o-transition-property: background-color, opacity;
    -ms-transition-property: background-color, opacity;
    transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}
.button.increase, .button.decrease {
    display: inline-block;
    vertical-align: top;
    width: 23px;
    height: 23px;
    font-family: "icons";
    font-size: 8px;
    font-weight: normal;
    line-height: 1;
    padding: 7px 0 0 0;
    -webkit-font-smoothing: antialiased;
}
.button.increase {
    margin: 13px 5px 0 11px;
}
.button.decrease {
    margin: 13px 0 0 0;
}