Safari字体渲染似乎与其他浏览器不同

Question

我对以下html-tag有一个问题：

<a href="/partner-team/team" class="button button__style--1">MEHR</a>

CSS看起来像这样：

a {
    text-decoration: none;
}

.button {
    padding: 0.2rem 4rem;
    cursor: pointer;
}

.button__style--1 {
    color: #429a95 !important;
    border: 2px solid #429a95;
    transition: color .3s, background .3s;
    background: white;
    font-weight: 300;
}

在Safari中，我使用Dev工具可以看到以下可见：

在chrome中，我可以使用以下方式使用以下方式使用dev工具：

现在，我想知道为什么Safari中的文字在顶部更加顶峰。 是否有任何可能的解决方案可以在所有浏览器（Safari，Chrome，Firefox，Opera和Edge）上获得相同的渲染？

Answer 1

以下是一个工作片段：

a {
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility; 
}

.button {
    padding: 0.2rem 4rem;
    cursor: pointer;
}

.button__style--1 {
    color: #429a95 !important;
    border: 2px solid #429a95;
    transition: color .3s, background .3s;
    background: white;
    font-weight: 300;
}

<a href="/partner-team/team" class="button button__style--1">MEHR</a>

这里完成的所有工作都是将以下内容添加到您的 a 标签样式：

-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;