Question

我在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

Answer 1

此语法对我有用：

@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/

Answer 2

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资源）。

Firefox和IE中的DIN webfont无法正常工作

2 个答案: