Mac /赢得不同的字体垂直位置

Question

我在页面上有非常简单的元素 - 这是一个篮子的数量气球，我无法正确设置。 不仅字体有明显的不同，而且它的垂直位置对于像这样的小元素显着不同：

我已经尝试了stackoverflow的一些解决方案（例如，从字体大小设置行高-1），但没有运气。 这是代码：

HTML：

<span class="basket-qty">6</span>

CSS：

.basket-qty {
  display: block;
  text-align: center;
  background-color: #C1637D;
  color: #fff;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
  border-radius: 15px;
  width:15px;
  height:15px;
}

JSFiddle： https ：//jsfiddle.net/e563tgdn/

Answer 1

它“只是”字体渲染吗？ 像这样的css设置有助于规范化吗？

-webkit-text-size-adjust: none;
text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-ms-text-size-adjust: 100%;