字体字体质量问题(火狐，铬，歌剧)

Question

检查网站：

http://tinyurl.com/caljnqb

我正在使用字体：

@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

您也可以注意为 WOFF 字体使用正确的 MIME 类型，截至 http://www.w3.org/TR/WOFF/#appendix-b

application/font-woff

确保浏览器正确处理