0

检查网站：

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 上一切正常。字体看起来很锋利。为什么会发生？也许我做错了什么？

4

2 回答 2

3

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

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

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

googles Droid 字体是一种有时会根据浏览器呈现有趣的字体，因此研究可能会帮助您找到其他方法。

于 2012-04-10T19:53:58.027 回答
0

似乎有一些技巧可以正确排序每种格式

参见例如

这是修改后的 Fontspring 防弹语法，首先为 svg 服务：

@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开始，您还可以注意为 WOFF 字体使用正确的mime 类型

application/font-woff

确保浏览器正确处理

于 2012-12-12T11:34:38.307 回答