css字体系列没有出现？

Question

我遇到了 font-family 的问题；基本上我正在做所有正确的事情（我希望）但由于某种原因字体正在做一些奇怪的事情。所以让我解释一下这个问题..

在我的浏览器中，字体在 chrome/IE 中显示正常，但在 mozilla 中没有显示。 在我父亲的笔记本电脑上，字体在任何浏览器中都不会出现。 在我的伙伴苹果 Mac 上，字体出现在 Safari 中，但不在 chrome 中。 在 iPhone 上出现字体。 在 Nexus 4 上，字体不出现（在 Chrome 或 Mozilla 中）

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

这是我正在使用的 CSS。

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

这就是我的应用方式。

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

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

Answer 1

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

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

但如果多个版本在一个目录下，它可能是

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

这件事以前发生在我身上。在我的情况下，我的 CSS 目录中有 fonts.css，然后我在 assets 中有字体，并且字体的变体在同一个目录中。就我而言，我必须实现 Across the Road 字体。所以根据我的目录结构我做了

@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 格式。您可以在http://caniuse.com/#feat=ttf 看到兼容性

Answer 2

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

ttf files not rendering on Chrome and Firefox

Answer 3

问题是您只使用 .ttf 文件。并非每个浏览器都能够加载它。 相反，您应该使用生成器 (link)，这样您还可以拥有一个 .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;
}

希望这会有所帮助。

Answer 4

指定一个名为“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')

我觉得这个链接对你有帮助http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp