☰

桌面和移动设备上的字体版本不同

tag-icon • tag-icon google-chrome firefox browser fonts opentype
桌面和移动设备上的字体版本不同

我遇到了一个关于字体的奇怪问题。我已导入此字体（https://www.myfonts.com/fonts/jan-charvat/velodroma/wide/）通过CSS导入：

@font-face {
    font-family: VelodromaWide;
    src: url("/wp-content/themes/hotelbooking/font/VelodromaBasic-Wide.otf") format("opentype");
}

这种字体有两种可能性：普通字体和宽字体：

不同字体示例

现在，在 Chrome 上浏览网站时：

  1. 当我从桌面访问网站时，我看到所有字母都是正常字体（截屏）
  2. 当我通过手机访问该网站时，我会看到不同类型的字母（截屏）

从屏幕截图中你可以看出，两种情况下的 font-family 完全相同。

这在 Firefox 中不会发生，因为桌面上已加载正确的字体（Firefox 屏幕截图) 桌面和移动设备均可

您可以在这里查看该网站：http://www.orientalsicily.com/

有人知道这种行为的可能原因吗？

谢谢

答案1

在 MyFonts 上进行一些实验后发现，这是一种“扩展”字体，具有替代的样式集。显然，移动版 Chrome 默认采用的字符变体样式集与桌面版 Chrome 不同。Firefox 中的不同行为表明 FF 移动版和 FF 桌面版默认采用相同的样式集。

您可以通过浏览以下链接了解有关此功能的更多信息这个谷歌搜索。

答案2

现在有点晚了，但看看网站，问题仍然存在。看起来你已经使用了 font-feature-settings: ‘ss05’

但这并不能解决问题。我的一个网站也遇到过类似的问题，请尝试以下方法：

font-feature-settings: ‘calt’ off

它也可以通过 -webkit-、-moz- 前缀等作为您当前的网站进行传播。

相关内容