Html css字体系列没有出现？

我遇到了字体家族的问题；基本上我做了所有正确的事情（我希望如此），但出于某种原因，字体做了一些奇怪的事情。让我来解释一下这个问题

在我的浏览器上，该字体在chrome/IE中显示正常，但在mozilla中没有显示。 在我爸爸的笔记本电脑上，这种字体在任何浏览器中都不会出现。 在我的朋友苹果mac上，字体出现在Safari中，但不在chrome中。 在iPhone上显示字体。 在Nexus4上，字体不会出现（在Chrome或Mozilla中）

这就是我困惑的原因；为什么它出现在不同平台上的某些浏览器中，而不出现在其他浏览器中？字体是否可以特定于操作系统

这是我正在使用的CSS

@font-face {
font-family: "Pixelated";
src: url('templates/joostrap/fonts/pixelated.ttf');
}

这就是我应用它的方式

{font-family: "Pixelated"; text-transform: uppercase;}

---

任何帮助都将不胜感激！干杯

TTF

字体在

Chrome

和

Firefox

中使用时必须使用不同的字体。检查此链接以正确设置TTF：

---

问题是您只使用了.ttf文件。不是每个浏览器都能加载它。 相反，您应该使用生成器（），这样您就有了一个.eot和一个.woff文件

您的字体CSS将如下所示：

@font-face {
  font-family: 'Pixelated';
  src: url('../fonts/pixelated.eot');
  src: url('../fonts/pixelated.eot?#iefix') format('embedded-opentype'),
       url('../fonts/pixelated.woff') format('woff'),
       url('../fonts/pixelated.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

希望这有帮助。

指定一种名为“myFirstFont”的字体，并指定可以找到它的URL

 @font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
} 

在服务器上的某个位置包含一个字体文件，并用CSS引用它

src: url('Sansation_Light.ttf')

如果字体文件位于其他域，请使用完整URL

src: url('http://www.w3schools.com/css3/Sansation_Light.ttf')

---

我认为此链接有助于您

字体未显示的最常见问题是未正确指定路径。当您有多种文件字体（如：浅色、粗体、中等）时，这种情况会发生得更多。所以也许你的道路是

src: url('templates/joostrap/fonts/pixelated.ttf');

但如果一个目录中有多个版本，则可能是

src: url('templates/joostrap/fonts/pixelated/pixelated.ttf');

这以前发生在我身上。在我的例子中，我在css目录中有字体.css，然后在资产中有字体，字体的变体在同一目录中。在我的例子中，我必须实现横穿马路字体。所以根据我的目录结构，我做了

@font-face {
    font-family: 'across_the_roadregular';
    src: url('../assets/fonts/across_the_road/across_the_road-webfont.eot');
    src: url('../assets/fonts/across_the_road/across_the_road-webfont.eot?#iefix') format('embedded-opentype'),
         url('../assets/fonts/across_the_road/across_the_road-webfont.woff2') format('woff2'),
         url('../assets/fonts/across_the_road/across_the_road-webfont.woff') format('woff'),
         url('../assets/fonts/across_the_road/across_the_road-webfont.ttf') format('truetype'),
         url('../assets/fonts/across_the_road/across_the_road-webfont.svg#across_the_roadregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

---

请注意，我指定了各种文件类型。这是因为并非所有浏览器都可以显示.ttf格式。你可以在

Ahh上看到兼容性，现在就试试这个，然后再给你回复，我也重命名了字体，根据那篇文章的外观，你是不允许的，否则它将无法正确呈现。干杯可能是重复的嗯，我的字体显然“损坏”，所以我无法使用生成器。。总是很方便！