文章/答案/技术大牛

发布

社区首页 >问答首页 >字体-face字体质量问题( Firefox、Chrome、Opera)

问字体-face字体质量问题( Firefox、Chrome、Opera)
EN

Stack Overflow用户

提问于 2012-04-11 03:34:42

回答 2查看 1.4K关注 0票数 0

查看网站：

http://tinyurl.com/caljnqb

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

font-face

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-04-11 03:53:58

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

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

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

googles Droid字体是一种字体，有时会根据浏览器的不同而变得有趣，所以研究一下这可能会帮助你找到其他方法。

票数 3

Stack Overflow用户

发布于 2012-12-12 19:34:38

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

请参见示例

这是修改后的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

以确保浏览器的正确处理

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10095223

复制

相似问题

问字体-face字体质量问题( Firefox、Chrome、Opera)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字体-face字体质量问题( Firefox、Chrome、Opera)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字体-face字体质量问题( Firefox、Chrome、Opera)
EN