css字体家族没有出现？ [英] css font family not appearing?

问题描述

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

I've ran into an issue with font-family; basically I'm doing all the right things (I hope) yet for some reason the font is doing some weird things. So let me explain the issue..

在我的浏览器中，字体在Chrome / IE中显示为OK，但它并未出现在Mozilla中。
在我父亲的笔记本电脑上，字体在任何浏览器中都不会出现。
在我的队友苹果mac上，字体出现在Safari中，但没有出现在Chrome中。
在iPhone上显示字体。
在Nexus 4上，字体没有出现（在Chrome或Mozilla中）

On my browser the font appears OK in chrome/IE yet it doesn't appear in mozilla. On my dad's laptop, the font doesn't appear what-so-ever in any browser. On my mates apple mac, the font appears in Safari but not in chrome. On iPhone the font appears. On Nexus 4 the font doesn't appear (in Chrome or Mozilla)

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

This is why I'm confused; Why is it appearing in some browsers on different platforms and not on the others? Can a font be specific to an OS?

这是我使用的CSS。

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

这就是我应用它的方式。

This is how i'm applying it.

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

任何帮助将不胜感激！欢呼！

Any help would be appreciated! cheers!

推荐答案

字体没有显示的最常见问题是路径没有正确指定。当你有多种文件字体时，会发生这种情况，例如：light，bold，medium。因此，也许你的路径是

The most common problem with fonts not showing up is that the path was not properly specified. This happens more when you have multiple file fonts such as: light, bold, medium. So perhaps your path is

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

但是，如果多个版本位于同一个目录中，它可能是

But if multiple versions are in one directory, it could be

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

这发生在我之前。在我的情况下，我在我的CSS目录中有 fonts.css ，然后我在资产中使用了字体，并且字体的变体位于同一个目录中。在我的情况下，我不得不实施横跨道路字体。所以根据我的目录结构，我做了：

This happened to me before. In my case I had the fonts.css in my CSS directory, then i had the fonts in assets and the variations of the fonts were in the same directory. In my case I had to implement the Across the Road font. So based on my directory structure I did

@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

Notice that I specified various file types. This is because not all browsers can display the .ttf format. You can see compatability at http://caniuse.com/#feat=ttf

这篇关于css字体家族没有出现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！