html - 字体在 Firefox 中无法正常显示

Question

在我的站点中嵌入了 Opensans 字体。它在 chrome 中显示正常，但在 firefox 中显示不正确。在 firefox 中字体显示很模糊。

@font-face {
    font-family: 'opensans';
    src: url('../fonts/OpenSans-Regular.eot');
    src: local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/OpenSans-Regular.ttf') format('truetype'),
        url('../fonts/OpenSans-Regular.woff') format('woff'),
        url('../fonts/OpenSans-Regular.otf') format('open-truetype'),
        url('../fonts/OpenSans-Regular.svg#opensans') format('svg');
    font-weight: normal;
    font-style: normal;
}

不仅opensans font，我又试了两种字体也有同样的问题。但其他网站显示正常。请帮我。提前致谢。

Answer 1

我正在使用:

@font-face {
    font-family: OpenSans;
    src: url(../fonts/open-sans/OpenSans-Regular.ttf);
}

@font-face {
    font-family: OpenSansLight;
    src: url(../fonts/open-sans/OpenSans-Light.ttf);
}

@font-face {
    font-family: OpenSansBold;
    src: url(../fonts/open-sans/OpenSans-Bold.ttf);
}

一切正常。如果所有资源都已正确加载，您可以查看元素控制台。