网页字体不会在 Chrome 中显示

Question

无论我如何尝试，我都无法在 Chrome 中显示任何网络字体。我创建了一个测试页面并在 Safari 和 Chrome 中查看它（我在 Mac 上）。 Web 字体在 Safari、IE 和 Firefox 上看起来不错——但不是 Chrome。

这是页面：http://bradfordallendesign.com/test123/test.html

这是 CSS：

@font-face {
    font-family: 'general_200thin';
    src: url('http://www.bradfordallendesign.com/fonts/General-200-Thin-webfont.eot');
    src: url('http://www.bradfordallendesign.com/fonts/General-200-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.bradfordallendesign.com/fonts/General-200-Thin-webfont.woff2') format('woff2'),
         url('http://www.bradfordallendesign.com/fonts/General-200-Thin-webfont.woff') format('woff'),
         url('http://www.bradfordallendesign.com/fonts/General-200-Thin-webfont.ttf') format('truetype'),
         url('http://www.bradfordallendesign.com/fonts/General-200-Thin-webfont.svg#general_200thin') format('svg');
    font-weight: normal;
    font-style: normal;
}

.test
{
    font-family:'general_200thin', Helvetica, Arial, san-serif;
    font-size: 80px;
    }

非常感谢任何建议的修复！谢谢！

Answer 1

在我的机器上，所有浏览器在加载时都会出错，而不仅仅是 Chromium。

但是，如果我将 URI 更改为包含 www，我可以加载字体。
http://www.bradfordallendesign.com/test123/test.html

这样，域是相同的，您不再遇到 CORS 异常。

所以解决方法是不指定字体的绝对路径；就写吧

@font-face {
    font-family: 'general_200thin';
    src: url('/fonts/General-200-Thin-webfont.eot');
    src: url('/fonts/General-200-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/General-200-Thin-webfont.woff2') format('woff2'),
         url('/fonts/General-200-Thin-webfont.woff') format('woff'),
         url('/fonts/General-200-Thin-webfont.ttf') format('truetype'),
         url('/fonts/General-200-Thin-webfont.svg#general_200thin') format('svg');
    font-weight: normal;
    font-style: normal;
}

那么您就可以确定不会出现域名不匹配的情况。

Answer 2

这是我得到的：

来自“http://www.bradfordallendesign.com”的字体已被跨域资源共享策略阻止加载：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://bradfordallendesign.com' 因此不允许访问。

所以我想知道页面是否可以访问字体（来自 bradfordallendesign.com）

我建议您使用文件的相对路径，而不是绝对路径。就像Mr Lister的回答一样。