Question

我有一个自定义字体“Gulim”嵌入到我的网站mangodownload.com（你可以在主页上看到它，如果你看到Arial，它在你的浏览器上不起作用。）

不幸的是，这种字体在许多浏览器上都不起作用。

这是我的字体CSS：

@font-face { 
    font-family: "Gulim";
    src: url("/style/fonts/Gulim.ttf");
    src: local("Gulim"), url("/style/fonts/Gulim.ttf") format("truetype");
}

有关实现所有浏览器的跨浏览器支持的任何想法吗？

请注意：我尝试过转换字体，并尝试使用FontSquirrel。我一直收到同样的信息; '字体太大'。我的 gulim.ttf 文件是10mb。

Answer 1

@font-face {
    font-family: 'yourfunkyfont';
    src: url('fonts/yourfunkyfont.eot');
    src: url('fonts/yourfunkyfont.svg') format('truetype'),
         url('fonts/yourfunkyfont.eot?#iefix') format('embedded-opentype'),
      url('fonts/yourfunkyfont.woff') format('woff'),
      url('fonts/yourfunkyfont.ttf') format('truetype'),
      url('fonts/yourfunkyfont.svg#yourfunkyfont') format('svg');
}

只有在IIS（其他网络服务器）中添加以下MIME类型时，这才有效：

.woff - application/x-font-woff
.svg - application/x-font-woff

Answer 2

除非您能够以各种浏览器所需的各种格式获取字体，否则无法执行此跨浏览器。 CSS to use如下：

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

如您所见，您需要eot，woff，ttf和svg格式的字体。

自定义字体嵌入不适用于跨浏览器

2 个答案: