3

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

在我的浏览器上，字体在 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;}

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

4

4 回答 4

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查看兼容性

于 2015-11-09T20:57:22.247 回答
0

问题是您只使用 .ttf 文件。并非每个浏览器都能够加载它。相反，您应该使用生成器（链接），因此您也有一个 .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;
}

希望这有帮助。

于 2013-09-01T09:26:57.373 回答
0

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

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

于 2013-09-01T09:23:10.817 回答
0

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

于 2013-09-01T09:30:06.590 回答