自定义字体嵌入不能跨浏览器工作

Question

我在我的网站 mangodownload.com 中嵌入了“Gulim”，一种自定义字体（您可以在主页上看到它，如果您看到 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 格式的字体。