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

它可以＆＃34;只是＆＃34;是字体渲染？像这样的css设置有助于规范化吗？

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