代码之家 › 专栏 › 技术社区 › Kevin Mattern

CSS@font face在我的CMS中不工作

font-face fonts css html

Kevin Mattern · 技术社区 · 10 年前

这是我正在使用的代码。

@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,但仍然没有显示此字体。我甚至尝试过字体松鼠,但即使这样它也没有显示字体。有人能帮我吗?

1 回复 | 直到 10 年前

jjjjjjjjjjjjjjjjjjjj 10 年前

摘自 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';
}

推荐文章

Ryan Lacon · 无法理解为什么我的徽标字体不起作用

7 年前

IceCold · 如何在TWebBrowser中更改字体?

8 年前

jmindel · CSS嵌入字体不显示在使用括号的网页上

9 年前

Payam Sh · 字体在Chrome中无法正确显示某些字符

9 年前

jshock · 外部字体未显示在第一页

10 年前

mowgli · 何时下载回退字体?

10 年前

Kevin Mattern · CSS@font face在我的CMS中不工作

10 年前

Vishal Parekh · @字体正面未正确显示特定字体

11 年前

Laxman · 应力字符从顶部剪切/裁剪

11 年前

Jakob Jingleheimer Dutow · CSS:按名称定义字体大小

11 年前