Question

这是我正在使用的代码。

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

来源正确，CMS会自动设置网址，但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';
}

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

1 个答案: