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

【问题标题】：Font weight incorrect on mobile/tablet device手机/平板设备上的字体粗细不正确
【发布时间】：2017-11-04 11:15:08
【问题描述】：

我在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

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

【问题讨论】：

标签： css mobile fonts tablet

【解决方案1】：

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

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

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

【讨论】：

添加 ``!important` 是不必要的，并且消除了以后添加粗体的可能性。
我建议作为尝试，确实，我不知道整个项目代码的结构......

【解决方案2】：

似乎这与我的主题设置有关。我的排版设置是在字体粗细为 800 的字体上设置的。但是，我在自定义 CSS 中覆盖了字体系列。尚未覆盖的是主题设置中的字体粗细。因此，CSS 会尝试重现此字体粗细，尽管我的字体无法呈现此字体粗细。这给出了非常奇怪的字体布局。所以@holden 的解决方案会奏效，但我从主题设置中删除了字体粗细。

但是，我不明白为什么字体在桌面上似乎正确呈现，但在移动/桌面上却没有......也许根据浏览器选择了另一种格式（svg 与 woff 与 eot？）。

【讨论】：