css - 某些字体粗细不会在具有不同@font-face 负载的移动设备上加载

Question

一些不同粗细的字体没有加载。我在我的 css 文件中加载带有 font-face 的字体，如下所示:

@font-face {
  font-family: 'Glober';
  src: url("/includes/fonts/globerbold.otf') format('embedded-opentype");
  font-weight: 700;
}
@font-face {
  font-family: 'Glober';
  src: url("/includes/fonts/globersemibold.otf') format('embedded-opentype");
  font-weight: 600;
}
@font-face {
  font-family: 'Glober';
  src: url("/includes/fonts/globerregular.otf') format('embedded-opentype");
  font-weight: 400;
}
@font-face {
  font-family: 'Glober';
  src: url("/includes/fonts/globerbook.otf') format('embedded-opentype");
  font-weight: 200;
}

所以我发现所有带有 font-weight: 200 的字体都在加载。其他权重:400、600 和 700 未在移动设备上加载。

我试过以不同的方式改变字体的路径，但它仍然无法加载。

Answer 1

如果这是直接从您的源代码中复制的，那么您就是在混合使用单引号和双引号。这可能会干扰其他 CSS。尝试:

@font-face {
  font-family: 'Glober';
  src: url('/includes/fonts/globerbold.otf') format('opentype');
  font-weight: 700;
}

/* Etc. */

您会注意到我还将格式从 embedded-opentype 更改为 opentype，这是用于旧版本 Internet Explorer 使用的旧 EOT 格式。

浏览器将(通常是有用的)仅加载实际使用的样式，因此您的其他 HTML 和 CSS 将是一个因素。如果只应用了一种样式，这可能是其他样式未显示为已加载到您的开发人员工具中的原因。

如果您购买或已经拥有带有 Glober 网络字体许可证的软件包，它们还应该包括 WOFF 和 WOFF2 文件，这将是比 OpenType 字体更好的选择。最有可能的是，它还会附带一个您可以使用或修改的示例 CSS 文件。

@font-face {
  font-family: 'Glober';
  src: url('/includes/fonts/globerbold.woff2') format('woff2'), 
       url('/includes/fonts/globerbold.woff') format('woff');
  font-weight: 700;
}

希望对您有所帮助!