html - Web字体不会在Chrome中显示

html - Web字体不会在Chrome中显示,第1张

无论我尝试过什么,我都无法在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;
    }

非常感谢任何建议的修复程序!谢谢!

最佳答案:

2 个答案:

答案 0 :(得分:2)

在我的机器上,所有浏览器在加载时都会出错,而不仅仅是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;
}

然后您可以确定您没有域名不匹配。

答案 1 :(得分:0)

这是我得到的:

  

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

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

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

DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
教程弟学习网站 » html - Web字体不会在Chrome中显示

0条评论

发表评论

提供最优质的资源集合

立即查看 了解详情