0

我的自定义字体没有在 FF 中应用。这在 Coda（我的开发应用程序）中确实有效。而且在 Safari 中...

CSS：

@font-face {
  font-family: MyScriptFont;
  src: url('fonts/giddyup.ttf');
}
/* IE9+ */
@font-face {
  font-family: MyScriptFont;
  src: url('fonts/giddyup.eot');
    }
    #tagCommon {
    font-family: 'MyScriptFont', Arial, Helvetica, sans-serif;
    font-size: 52px;
    position:relative;
    padding-top:22px;
}

的HTML：

<div id="tagCommon"></div>

该网站是http://tntplants.site11.com/。当您在右侧的顶部框中键入字母时，它应该是左侧的 giddyup 脚本字体。

4

4 回答 4

2

所有主要浏览器都决定采用他们选择支持的字体格式：

  • Internet Explorer 仅支持 EOT
  • Mozilla 浏览器支持 OTF 和 TTF
  • Safari 和 Opera 支持 OTF、TTF 和 SVG
  • Chrome 支持 TTF 和 SVG。

因此，要获得完整且适当的支持，您需要在声明 face-face 时遵循一定的结构：

CSS FONT-FACE 例如

@font-face {
    font-family: 'GiddyupWebRegular';
    src: url('giddyup-webfont.eot');
    src: url('giddyup-webfont.eot?#iefix') format('embedded-opentype'),
         url('giddyup-webfont.woff') format('woff'),
         url('giddyup-webfont.ttf') format('truetype'),
         url('giddyup-webfont.svg#GiddyupWebRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

请参阅此处的工作示例！

在此处下载生成的带有字体和 CSS 的 CSS ！

上面的链接是使用字体代码生成器生成的，您上传字体并为您弹出代码：

字体松鼠

有关更多信息，请阅读MDN 中的这篇文章。

于 2012-05-23T20:56:53.343 回答
1

交换您的 CSS 声明 - 将 TTF 放在 EOT 之后。例如

/* IE9+ */
@font-face {
  font-family: MyScriptFont;
  src: url('fonts/giddyup.eot');

@font-face {
  font-family: MyScriptFont;
  src: url('fonts/giddyup.ttf');
}
    }
    #tagCommon {
    font-family: 'MyScriptFont', Arial, Helvetica, sans-serif;
    font-size: 52px;
    position:relative;
    padding-top:22px;
}
于 2012-05-23T20:51:18.340 回答
0

我要做的第一件事是将字体堆栈从 Font Squirrel 切换到一个

@font-face {
    font-family: 'Name';
    src: url('Name.eot');
    src: url('Name.eot?#iefix') format('embedded-opentype'),
        url('Namet.woff') format('woff'),
        url('Name.ttf') format('truetype'),
        url('Name.svg#Name') format('svg');
    font-weight: normal;
    font-style: normal;
}
于 2012-05-23T20:54:58.847 回答
0

MyScriptFont不一样'MyScriptFont'。

将您的 font-family 声明更改#tagCommon为MyScriptFont或将其更改@font-face为'MyScriptFont'.

@font-face {
  font-family: 'MyScriptFont';
  src: url('fonts/giddyup.ttf');
}
/* IE9+ */
@font-face {
  font-family: 'MyScriptFont';
  src: url('fonts/giddyup.eot');
}
#tagCommon {
    font-family: 'MyScriptFont', Arial, Helvetica, sans-serif;
    font-size: 52px;
    position:relative;
    padding-top:22px;
}
于 2012-05-23T20:56:30.127 回答