0

我在 Firefox 和 MSIE 中实现 DIN 字体时遇到问题。它在 Chrome 中运行良好。

这是导入代码：

@font-face {    
font-family: DINweb;
src: url('/wp-content/themes/quickstep-child/DINWeb.eot');
src: url('/wp-content/themes/quickstep-child/DINWeb.eot?#iefix') format('embedded-opentype'),
url('/wp-content/themes/quickstep-child/DINWeb.woff') format('woff'),
url('/wp-content/themes/quickstep-child/DINWeb.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal;
}

字体在 CSS 中是这样调用的：

font-family:  DINWeb, sans-serif!important;

该网站是www.andvordgrafisk.no

4

2 回答 2

2

这种语法对我有用：

@font-face {
    font-family: 'DIN_Medium'; 
    src: url('../fonts/DIN_Medium.eot'); /* IE9 Compatibility Modes */
    src: url('../fonts/DIN_Medium.eot?') format('eot'),  /* IE6-IE8 */
    url('../fonts/DIN_Medium.otf') format('otf'), 
    url('../fonts/DIN_Medium.ttf') format('truetype'); /* Safari, Android, iOS */
    }

如果你没有扩展，你可以在这里生成它们http://www.freefontconverter.com/

于 2013-05-24T09:34:35.713 回答
1

Firefox 控制台显示 .woff 资源和 .ttf 资源的错误消息，“可下载字体：下载失败 [...] 错误 URI 或不允许跨站点访问”。Firebug 控制台显示：“NetworkError: 404 Not Found - http://www.andvordgrafisk.no/wp-content/themes/quickstep-child/DINWeb.ttf ”，但仅适用于 .ttf 文件。

奇怪的是，如果您删除url('/wp-content/themes/quickstep-child/DINWeb.ttf') format('truetype')，Firefox 似乎开始使用该字体。所以就好像不存在的 .ttf 是问题所在，即使 Firefox 甚至不应该获取它（因为首先提到了 .woff 资源）。

于 2013-05-24T10:41:10.780 回答