Question

我正在尝试将字体导入我正在使用@font-face创建的网站。但它不适用于 Chrome ，有时它适用于 Firefox ，有时不适用。

所以我不知道发生了什么。

这是我到目前为止所尝试的：

@font-face {
    font-family: "Proxima Nova";
    src: url('fonts/Proxima Nova.otf') format('opentype');
}

这几乎适用于 Firefox ，但 Chrome 甚至不想显示它，相反它显示了一些奇怪的字体，完全随机的大小与之无关css进入了。

然后我尝试了这个：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'proxnova';
        src: url('fonts/ProximaNovaSemibold.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
    }
}

这个固定的大小调整问题，但现在它没有在任何地方显示正确的字体。请帮忙。

Answer 1

您必须为不同的浏览器使用不同的字体格式。抱歉...... :(

来源：http://css-tricks.com/snippets/css/using-font-face/

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

您可以使用http://www.fontsquirrel.com/这样的网站自动生成您需要的所有内容。

@ font-face完全烦人

1 个答案:

来源：http://css-tricks.com/snippets/css/using-font-face/