Question

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

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

IcoMoon上的

网格

Chrome OS X

Safari OS X

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图书馆中的每个图标集都列出了一个清晰的尺寸标签。为了获得最佳效果，您在使用时应使用此尺寸字体。例如，如果图标集针对（16×N）px尺寸进行了优化，通过将字体大小设置为16px，32px，您将获得清晰的结果， 48px（= 3×16px）等。

基本上，您希望避免导入与您在CSS中使用的SVG不同的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;
}

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

1 个答案: