Question

可能重复：
@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浏览器上渲染效果不好，有人可以告诉我为什么吗？：|

Answer 1

要获得正确的粗体文本，您需要使用粗体（700）版本的字体。如果您使用另一个权重并且只是要求浏览器加粗它们，它们可能会在算法上加粗笔划，这会导致渲染效果不佳或糟糕，具体取决于浏览器。

Answer 2

罗希特：我确信这只是一个错字，因为它会破坏所有浏览器

您是否尝试过以下方法：

@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使用的

Answer 3

试试这个：

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

webkit浏览器上的@ font-face呈现

3 个答案: