webkit浏览器上的@font-face渲染[重复]答案

【问题标题】：@font-face rendering on webkit browsers [duplicate]webkit浏览器上的@font-face渲染[重复]
【发布时间】：2012-09-07 12:25:13
【问题描述】：

可能重复：
@font-face anti-aliasing on windows and mac

这是我的 CSS：

    @font-face {
        font-family: 'Museo500Regular';
        src: url('../fonts/Museo500/MuseoSans_500.eot');
        src: local('?'), 
        url('../fonts/Museo500/MuseoSans_500.woff') format('woff'), 
        url('../fonts/Museo500/MuseoSans_500.ttf') format('truetype'), 
        url('../fonts/Museo500/MuseoSans_500.svg#webfontr3rD8cn7') format('svg');
        font-weight: normal;
        font-style: normal;
    }

.loginUser form h2{
font-family: Museo500Regular,sans-serif;
    font-size: 17px;
    font-weight: bold;
}

在 IE、Firefox、Opera 上只能在 webkit 浏览器上渲染好，不能很好地渲染，谁能告诉我为什么？ :|

【问题讨论】：

“渲染不好”是什么意思？在我的主要浏览器 Chrome 中，@font-face 没有遇到任何问题。你能在jsfiddle上设置一个实际的演示吗？
嗨，现在你把错误的字体 fmaily 应用这个 .loginUser form h2{font-family: 'Museo500Regular', sans-serif; }
@lanzz 看看 ie,firefox,opera 和 chrome 的区别...oi46.tinypic.com/11w98cz.jpg
@Rohit Azad 对不起，我复制时出错了……我编辑了描述。
你们有演示页面吗？否则很难找到确切的问题。

标签： google-chrome css font-face

【解决方案1】：

要获得正确的粗体文本，您需要使用粗体 (700) 版本的字体。如果您使用其他粗细并要求浏览器将其加粗，它们可能会在算法上加粗笔划，这会导致渲染效果不佳或糟糕，具体取决于浏览器。

【讨论】：

我已经用 fontsquirrel.com/fontface/generator 生成了字体，如果我用 chrome 打开测试文件，我什至可以看到 ff 和 webkit 之间的区别：|

【解决方案2】：

试试这个：

font-family: 'Museo500Regular';
    src: url('../fonts/Museo500/MuseoSans_500.eot');
    src: url('../fonts/ubuntu-r-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Museo500/MuseoSans_500.woff') format('woff'),
         url('../fonts/Museo500/MuseoSans_500.ttf') format('truetype'),
         url('../fonts/Museo500/MuseoSans_500.svg#webfontr3rD8cn7') format('svg');

还可以尝试将以下内容添加到 .htaccess

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf

【讨论】：

我必须在哪里添加 AddType ？在 css 文件上？
我不认为这是一个解决方案...
我只是建议最后一个解决方案。这可能会有所帮助，仅此而已。尝试使用 fontsquirrel.com/fontface/generator 生成 font-face css 并重试。这也可能有帮助。
是的，谢谢，但已经测试过了：|

【解决方案3】：

Rohit：我确信这只是一个错字，因为它会在所有浏览器中中断

您是否尝试过以下方法：

@font-face {
font-family: 'Museo500Regular';
src: url('../fonts/Museo500/MuseoSans_500.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/Museo500/MuseoSans_500.woff') format('woff'), 
     url('../fonts/Museo500/MuseoSans_500.ttf')  format('truetype'),
     url('../fonts/Museo500/MuseoSans_500.svg#webfontr3rD8cn7') format('svg');
}

它一直对我有用.. 否则可能是您的 Woff 文件中的错误，因为这是 webkit 使用的文件

【讨论】：