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”标头。因此，不允许原点“http://bradfordallendesign.com”访问。

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

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

Web字体不会在Chrome中显示

2 个答案: