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;
}

希望有帮助！

某些字体粗细不会在具有不同@ font-face加载的手机上加载

1 个答案: