移动设备上的@Fontface 未在移动设备上显示

Question

我对此完全感到困惑，我已经通过之前的线程检查了所有合规性，但字体仍然无法在移动设备上正确显示。

它在桌面上完美运行。

h1 {
  font-family: futura;
  color: #ffffff;
  font-size: 6vw;
 }
@font-face {
     font-family: 'Futura'; /*a name to be used later*/
     src: url('https://cdn.glitch.com/3484f4c3-fd8c-4f1e-8369-372660a87d9f%2FFutura-Display-BQ-Regular.ttf?1550870232783') format('truetype'),
         url('https://cdn.glitch.com/3484f4c3-fd8c-4f1e-8369-372660a87d9f%2FFutura-Display-BQ-Regular.woff?1550870502016') format('woff');/*URL to font*/

}

感谢您的帮助

Answer 1

在@font-face 声明和您的样式定义中为font-family 使用不同的名称（使用普通的“Futura”以外的名称；参见https://jsfiddle.net/a8vy7s0c/）。在 iOS 本地有一个名为 Futura 的系列，因此当该代码在那里运行时，它使用本地系列，而不是 @font-face 声明中指定的系列。

附注这最初让我失望，因为我测试了代码并看到它“工作”，即它正在显示 Futura。我认为它正在工作，因为我认为名称中带有 Futura 的 webfont 看起来像经典的 Futura。但除了模糊的无衬线字体之外，它看起来真的不像 Futura。

Answer 2

尝试将所有需要的 src 添加到字体。例如。

@font-face {
   font-family: 'MyWebFont';
   src: url('webfont.eot'); /* IE9 Compat Modes */
   src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
   url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
   url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
   url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}