html - CSS @font-face 在我的 CMS 中不起作用

Question

这是我正在使用的代码。

@font-face {
font-family:gotisch;
src:url('__cmsurl__/files/www/dscaslongotisch.ttf') format:('truetype');
}
h1{
    font-family:gotisch;
}

来源正确，CMS自动设置url，但字体在Chrome和Firefox中均不显示。

当我使用这段代码时:

@font-face {
    font-family:gotisch;
    src:url('__cmsurl__/files/www/dscaslongotisch.ttf') format:('truetype');
}

@font-face {
    font-family: gotisch_IE;
    src:url('__cmsurl__/files/www/dscaslongotisch.eot');
}

h1{
    font-family:gotisch, 'gotisch_IE';
}

它在 IE 中工作，但在 Firefox/Chrome 中仍然不工作

Firebug 甚至向我显示字体已加载，我可以将其更改为例如Verdana - 但是，这个仍然没有显示。我什至尝试过 fontsquirrel，但即便如此它也没有显示字体。有人能帮我一下吗？

Answer 1

取自here您可以看到您提供的字体(ttf 和 eot)适用于 IE、Safari、Android、iOS。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

如果您希望它在 Firefox 和 Chrome 中工作，请将字体转换为 woff 并像下面这样包含它。

@font-face {
  font-family: 'gotisch';
  src: url('path_to/gotisch.eot'); /* IE9 Compat Modes */
  src: url('path_to/gotisch.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('path_to/gotisch.woff') format('woff'), /* Modern Browsers */
       url('path_to/gotisch.ttf')  format('truetype'), /* Safari, Android, iOS */
}

然后像这样使用它

selector {
  font-family: 'gotisch';
}