Css 字体质量问题（Firefox、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上看起来一切正常。字体看起来很锐利。为什么会这样？也许我做错了什么？

不同的浏览器呈现不同的字体

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

如果最终使用单独的css，则可以使用$\u服务器阵列http\u用户代理属性根据浏览器设置字体css

---

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

不同的浏览器呈现不同的字体

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

如果最终使用单独的css，则可以使用$\u服务器阵列http\u用户代理属性根据浏览器设置字体css

---

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

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

例如，见

这是经过修改的Fontspring防弹语法，用于svg 第一:

从

对于WOFF字体，您还可以注意使用适当的mime类型

---

为了确保浏览器的正确处理

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

例如，见

这是经过修改的Fontspring防弹语法，用于svg 第一:

从

对于WOFF字体，您还可以注意使用适当的mime类型

---

确保通过浏览器进行正确处理。。对我来说不是这样的。看到别人的反馈很有趣。IE和FF看起来非常像屏幕1，FF中有轻微的模糊性，但与第二个屏幕完全不同……这是一个非常常见的问题，在这里已经回答了很多次。请以后先使用搜索。底部的字体看起来完全不同。你确定Firefox正在加载SegoUI吗？奇怪。。对我来说不是这样的。看到别人的反馈很有趣。IE和FF看起来非常像屏幕1，FF中有轻微的模糊性，但与第二个屏幕完全不同……这是一个非常常见的问题，在这里已经回答了很多次。请以后先使用搜索。底部的字体看起来完全不同。你确定Firefox正在加载SegoUI吗？

@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’);
}

application/font-woff