Question

我的自定义字体未在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脚本字体。

Answer 1

所有主流浏览器都决定采用自己选择支持的字体格式：

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

因此，要获得完整和适当的支持，您需要在声明面部时遵循某种结构：

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;

}

请参阅working example here!

使用字体和CSS here!

下载生成的CSS

以上链接是使用font-face代码生成器生成的，您上传字体并弹出代码：

Font Squirrel

有关详细信息，请阅读MDN中的this article。

Answer 2

交换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;
}

Answer 3

我要做的第一件事就是将字体堆栈从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;
}

Answer 4

MyScriptFont与'MyScriptFont'不同。

将#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;
}

css @ font-face在FF中不起作用

4 个答案: