css - 手机/平板设备上的字体粗细不正确

Question

我在 my website 上实现了以下字体.

/* Vivaldi Font */
@font-face {
    font-family: 'vivaldi';
    src: url('assets/fonts/vivaldi/vivaldi.eot');
    src: url('assets/fonts/vivaldi/vivaldi.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/vivaldi/vivaldi.woff2') format('woff2'),
         url('assets/fonts/vivaldi/vivaldi.woff') format('woff'),
         url('assets/fonts/vivaldi/vivaldi.ttf') format('truetype'),
         url('assets/fonts/vivaldi/vivaldi.svg#vivaldi') format('svg');
    font-weight: normal;
    font-style: normal;
}

我已将这些应用到我的标题中，如下所示:

/* Headers in Vivaldi */
h1,h2,h3,h4,h5,h6 {
    font-family: vivaldi;
}

/* Page titles in Vivaldi */
.page-title h1, #page .page-title .entry-title, .page-title h1 > span {
    font-family: vivaldi !important;
}

但我在手机/平板电脑上显示字体时遇到了一些问题。通过 Google Developer 工具检查预览时，我看到以下标题样式:Screenshot from Google Dev tools .然而，当实际检查我的 iPhone 5 上的字体时，我看到以下显示:Screenshot from iPhone 5 .

字体在 iPad 上看起来更糟。在那里，字体似乎是双重打印的。在这里您可以看到一些来自 iPad 的屏幕截图:Screenshot 1 & Screenshot 2

您可以看到实际移动设备上的字体粗细似乎变小了。关于如何解决这个问题的任何想法？我尝试为我的移动/平板设备调整字体粗细，但这似乎根本不起作用？

Answer 1

字体“双重”可视化的问题可能取决于 IOS 浏览器尝试将字体本身呈现为“粗体”(这确实是许多移动浏览器默认呈现 h1-h6 的方式)。

您应该明确地重置字体粗细并检查它是否有帮助:

h1,h2,h3,h4,h5,h6 {
    font-family: vivaldi;
    font-weight: normal!important;
}