@ font-face完全错误 [英] @font-face completely bugging

问题描述

我正在尝试将字体导入到正在使用@font-face创建的网站中.但是它在 Chrome 上无法正常运行，有时在 Firefox 上可以运行，

I'm trying to import a font to website I'm making using @font-face. But it won't work on Chrome what so ever, and sometimes it works on Firefox and sometimes not.

所以我不知道发生了什么事.

So I have no idea what is going on.

这是我到目前为止尝试过的:

This is what I've tried so far:

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

在 Firefox 中几乎可以使用，但是 Chrome 甚至不想显示它，而是显示了一些奇怪的字体，其大小完全随机，与字体无关. css已输入.

That almost worked in Firefox but Chrome didn't even want to display it, instead it showed some weird font with completely random size that had nothing to do with the css entered.

然后我尝试了这个:

@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;
    }
}

此问题已解决了大小调整问题，但现在在任何地方均未显示正确的字体.请帮忙.

This fixed sizing issues but now it doesn't show proper font anywhere. Please help.

推荐答案

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

You have to use different font formats for different browsers. Sorry about that... :(

@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/这样的网站来自动生成所有内容您需要.

You can use a website like http://www.fontsquirrel.com/ to automatically generate everything you need.

这篇关于@ font-face完全错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！