html - css 字体系列没有出现？

Question

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

在我的浏览器上，该字体在 chrome/IE 中显示正常，但在 mozilla 中不显示。在我父亲的笔记本电脑上，该字体在任何浏览器中都不会出现。在我的伙伴 apple 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 查看兼容性