@font-face 系列在桌面/移动设备上看起来不同答案

【问题标题】：@font-face family looks different on desktop / mobile@font-face 系列在桌面/移动设备上看起来不同
【发布时间】：2021-09-21 20:52:24
【问题描述】：

我目前在我的网站上使用自定义字体。该字体在桌面上看起来不错，但在移动设备上看起来完全不同。我也在使用所有正确的格式。下面是代码和图片：

此外，当我删除字体系列时，它会变成衬线字体，这意味着字体实际上正在加载，但我不确定为什么它看起来完全不同。

@font-face {
    font-family: 'futura';
    src: url('./futura.eot');
    src: url('./futura.eot?') format('embedded-opentype'),
         url('./futura.woff2') format('woff2'),
         url('./futura.woff') format('woff'),
         url('./futura.ttf') format('truetype'),
         url('./futura.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

【问题讨论】：

您的 svg 和 eot? 类型需要 id，不是吗？
请尝试创建sn-p以获得更好更快的结果。
您使用什么手机/浏览器？
@AHaworth 我正在使用 iPhone。并在 Safari 和 chrome 上对其进行了测试。
您是否尝试过不使用 svg src 选项？ svg 字体已被弃用，但无论如何只能在 Safari 上启用（IOS 上的 Chrome 基本上也是 Safari），因为这是最后一个选项，可能会导致问题？？

标签： html css fonts font-face

【解决方案1】：

解决方案：我只需要将字体粗细从正常更改为粗体。

【讨论】：

【解决方案2】：

我有同样的问题，我删除字体类型并只保留 ttf，我使用媒体查询来限制移动设备的这种更改

@font-face {
  font-family: 'futura';
  src: url('./futura.ttf');
}

@media(min-width:768px){
  @font-face {
    font-family: 'futura';
    src: url('./futura.eot');
    src: url('./futura.eot?') format('embedded-opentype'),
      url('./futura.woff2') format('woff2'),
      url('./futura.woff') format('woff'),
      url('./futura.ttf') format('truetype'),
      url('./futura.svg') format('svg');
    font-weight: normal;
    font-style: normal;
  }
}

如果这不起作用。将此行添加到您的 CSS 顶部

@font-face {
  font-family: 'futura';
  src: url('./futura.ttf');
}

【讨论】：