Question

检查网站：

我正在使用font-face：

@font-face {
    font-family: 'SegoeUI';
    src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'), 
         url('{site_url}themes/site_themes/agile_records/fonts/segoeui.woff') format('woff'), 
         url('{site_url}themes/site_themes/agile_records/fonts/segoeui.ttf')  format('truetype'),
         url('{site_url}themes/site_themes/agile_records/fonts/segoeui.svg#SegoeUI2') format('svg');
    font-style: normal;
    font-weight: normal;
    }
@font-face {
    font-family: 'SegoeUIBold';
    src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.eot?') format('eot'), 
         url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.woff') format('woff'), 
         url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.ttf')  format('truetype'),
         url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.svg#SegoeUI3') format('svg');
    font-style: normal;
    font-weight: bold;
    }
@font-face {
    font-family: 'SegoeUIItalic';
    src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.eot?') format('eot'), 
         url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.woff') format('woff'), 
         url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.ttf')  format('truetype'),
         url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.svg#SegoeUI4') format('svg');
    font-style: italic;
    font-weight: normal;
    }

Firefox，Chrome和Opera浏览器的输出存在问题。在IE上一切都看起来不错。字体看起来很清晰为什么会这样？也许我做错了什么？

Answer 1

不同的浏览器以不同的方式呈现字体。

我过去使用的解决方案是根据呈现页面的浏览器重新排列字体提供给字体的顺序。通常我的问题出现在早期版本的IE中，所以我使用了一个单独的样式表，它在ttf文件之前提供了.woff文件。因为某些浏览器只能读取某些字体类型文件，但可以同时读取这些文件并停止查找有效的文件。如果你重新安排它们，你可以使用一个更好的。

如果您最终使用单独的css，则可以使用$ _SERVER数组http_user_agent属性根据浏览器设置字体css。

谷歌Droid字体是一种有时根据浏览器呈现出滑稽的字体，所以研究可能会帮助你找到其他方法。

Answer 2

似乎在为每种格式正确排序时有一些技巧

参见例如

这是为了服务svg而修改的Fontspring防弹语法第一：

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

来自http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

从http://www.w3.org/TR/WOFF/#appendix-b开始，你也可以使用正确的 mime类型作为WOFF字体

application/font-woff

确保浏览器正确处理

字体字体质量问题（Firefox，Chrome，Opera）

2 个答案: