Проблема с настройкой шрифта пользовательского значка по-разному в разных браузерах

Question

Имеет проблемы с пользовательским шрифтом значка. Он отличается от Safari и Chrome. Кажется, он находится в пределах 1-2 пикселей ниже в Safari. Могу ли я каким-то образом сделать то же самое в обоих браузерах?

Создал значок, экспортировав 16 x 16 px SVG из Sketch, а затем импортировал их в 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 в. Чтобы получить наилучшие результаты, вы должны использовать этот размер при использовании шрифта . Например, если набор иконок оптимизирована для (16 × N) размеров точек, вы получите четкие результаты, установив размер шрифта в 16px, 32px, 48px (= 3 × 16px) и т.д.

В основном вы хотите избежать импорта SVG другого размера, чем вы будете использовать в CSS. Например, если вы импортируете значки SVG 16x16px в IcoMoon, а затем на них размер шрифта 8px, они будут плохо отображаться. Вместо этого импортируйте значки SVG 8x8px, и они будут отображаться одинаково как в 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; 
}