字体面对面的字体的质量问题（火狐，Chrome，Opera）的

我使用的字体面：

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

来源

2012-04-10 Ahmed

加入截图 – Ahmed 2012-04-10 19:47:26

奇怪，以确保正确处理..看起来并不像那对我来说。有兴趣看到别人的反馈。 IE和FF看起来非常像屏幕1，在FF中有轻微的模糊，但没有像第二个屏幕...... – 2012-04-10 19:49:46

这是一个非常普遍的问题，并已在这里多次回答。请先使用搜索。 – Brad 2012-04-10 19:56:07

不同的浏览器渲染字体的方式不同。

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

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

谷歌机器人字体是一种呈现有趣的字体，有时取决于浏览器，所以研究可能会帮助您找到其他方法。

来源

2012-04-10 19:53:58 Rooster

似乎有在适当的排序每种格式

见例如一些技巧

这是改进服务的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’); 
}

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

您也可以采取使用正确MIME类型的WOFF字体的照顾，为http://www.w3.org/TR/WOFF/#appendix-b

application/font-woff

浏览器

来源

2012-12-12 11:34:38

字体面对面的字体的质量问题（火狐，Chrome，Opera）的

回答

相关问题