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-family声明和样式定义中，@font-face使用不同的名称（使用普通的'Futura'以外的名称；请参见https://jsfiddle.net/a8vy7s0c/）。在iOS上本地有一个名为Futura的系列，因此在该代码中运行时，它将使用本地系列，而不是@font-face声明中指定的系列。

P.S。最初这使我失望，因为我测试了代码并看到它“有效”，即它正在显示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 */
}

手机上的@Fontface没有显示在手机上

2 个答案: