css - 自定义字体嵌入在跨浏览器中不起作用

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