1

カスタム アイコン フォントに問題がある。Safari と Chrome ではレンダリングが異なります。Safari では 1 ～ 2 ピクセル低く表示されます。どうにかして、両方のブラウザで同じようにレンダリングできますか?

Sketch から 16 x 16 ピクセルの SVG をエクスポートしてアイコン フォントを作成し、それらを IcoMoon にインポートして、最適化メトリックを 16 自動に設定しました。

IcoMoon のグリッド

Chrome OS X

サファリ 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;
}
4

1 に答える 1

3

だから私は自分で問題を見つけました。より良い解決策があるかもしれませんが、これで解決しました。あなたの解決策を返信してください。

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

IcoMoon のライブラリ タブには、各アイコン セットの鮮明なサイズが表示されます。最良の結果を得るには、フォントを使用するときにこのサイズを使用する必要があります。たとえば、アイコン セットが (16 × N)px サイズに最適化されている場合、font-size を 16px、32px、48px (= 3 × 16px) などに設定すると、鮮明な結果が得られます。

基本的に、CSS で使用するサイズとは異なるサイズの SVG をインポートすることは避けたいと考えています。たとえば、16x16 ピクセルの SVG アイコンを IcoMoon にインポートしてから 8 ピクセルのフォント サイズを使用すると、レンダリングが不十分になります。代わりに 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;
}
于 2013-08-14T01:27:32.163 に答える