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＆amp; Screenshot 2

您可以看到实际移动设备上的字体粗细似乎较少。有关如何解决此问题的任何想法？我尝试调整手机/平板设备的字体重量，但这似乎根本不起作用？

Answer 1

问题＆＃34; double＆＃34;字体的可视化可能取决于IOS浏览器尝试将字体本身呈现为＆＃34;粗体＆＃34; （这确实是很多移动浏览器默认渲染h1-h6的方式）。

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

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

Answer 2

这似乎与我的主题设置有关。我的排版设置是在字体重量为800的字体上设置的。但是，我在自定义CSS中覆盖了font-family。什么没有被覆盖，是主题设置的字体权重。因此，尽管我的字体无法呈现此字体粗细，但CSS会尝试重现此字体粗细。这给出了非常奇怪的字体布局。所以@holden的解决方案可行，但我从主题设置中删除了字体权重。

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

移动设备/平板电脑上的字体粗细不正确

2 个答案: