css字体系列没有出现?

时间:2013-09-01 09:16:33

标签: html css

我遇到过font-family的问题;基本上我正在做所有正确的事情(我希望)但由于某种原因,字体做了一些奇怪的事情。那么让我解释一下这个问题。

在我的浏览器上,字体在chrome / IE中显示为OK,但它没有出现在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;}

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

4 个答案:

答案 0 :(得分:1)

字体未显示的最常见问题是未正确指定路径。当您有多种文件字体时会发生这种情况,例如:light,bold,medium。所以也许你的道路是

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

看到兼容性

答案 1 :(得分:0)

TTFChrome中使用时,必须以不同方式使用

Firefox个字体。检查此链接以正确设置TTF:

ttf files not rendering on Chrome and Firefox

答案 2 :(得分:0)

问题是你只使用.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;
}

希望这会有所帮助。

答案 3 :(得分:0)

指定名为“myFirstFont”的字体,并指定可在其中找到的URL

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

在服务器上的某处包含一个字体文件,并使用CSS

引用它
src: url('Sansation_Light.ttf')

如果字体文件位于其他域,请使用完整的网址

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

我认为此链接可以帮助您http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp