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

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

- Andrew Matthew

---

可能是重复的问题：Safari和IE无法读取TTF和EOT字体。 - cbr

Answer 1

字体未显示的最常见问题是路径未正确指定。当您有多个文件字体（如：light，bold，medium）时，这种情况会更加普遍。因此，也许您的路径是

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

但如果多个版本放在同一个目录下，可能会导致混淆。

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

这在我之前发生过。在我的情况下，我将fonts.css放在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上查看兼容性。

- JGallardo

Answer 2

问题在于你只使用了一个 .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;
}

希望这有所帮助。

- Jrn

---

哎呀，我的字体好像“损坏”了，所以我无法使用生成器...这总是很方便的！ - Andrew Matthew

Answer 3

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

- Faisal Khan Samrat

Answer 4

TTF字体在使用Chrome和Firefox时需要不同的处理方式。请查看此链接以正确设置TTF：

在Chrome和Firefox上无法呈现ttf文件

- user2339071

---

好的，我现在会尝试一下并回复你，我也重命名了字体，根据那篇帖子的看法，否则它不会正确呈现。干杯！ - Andrew Matthew