自定义字体嵌入不起作用跨浏览器

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类型（其它Web服务器），这只会工作：

.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格式的字体。