Question

我ve been using webfonts on my website, using @font-face and it stopped working after some browser updates, now it doesn确实适用于Chrome或Firefox（我的用户使用的两个主要浏览器）。我尝试了几个不同的东西，但没有一个让它再次起作用。有没有人知道会发生什么？

我的网站是http://goronah.blog.br/

CSS的链接是：http://www.goronah.blog.br/wp-content/themes/goronahresponsive/style.css

@ font-face是：

@font-face{
    font-family:Bebas Neue;
    src: url('BebasNeue.otf');
    font-style:normal;
    font-weight:normal;
}

和常用：

h2 {
    font-size:2.4em;
    font-family:"Bebas Neue";
    font-weight:normal;
}

Answer 1

Chrome DevTools显示以下有关字体的错误：

来自“http://www.goronah.blog.br”的字体已被屏蔽通过跨源资源共享策略加载：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许来源“http://goronah.blog.br” 访问。

基本上由于安全原因，浏览器不会下载来自其他（子）域www.goronah.blog.br的字体而不是您的网站goronah.blog.br。我注意到第一个只是简单地重定向到后者，所以我认为它只是一个别名，所有内容都可以从两个url中获得。

解决此问题的最简单方法是从指向样式表的链接中删除www.部分。

<link rel="stylesheet" type="text/css" href="http://www.goronah.blog.br/wp-content/themes/goronahresponsive/style.css" />

到

<link rel="stylesheet" type="text/css" href="http://goronah.blog.br/wp-content/themes/goronahresponsive/style.css" />

Answer 2

要确保使用您的字体覆盖所有浏览器，您需要指定不同的字体类型。

你需要一个：

WOFF或WOFF2（Woff2具有更好的渲染）
SVG
EOT
TTF或OTF

要生成这些字体，您可以使用像http://www.fontsquirrel.com/tools/webfont-generator这样的webfont-generator。

如果您拥有所有必需的字体类型，则可以像这样包含它们（请参阅代码中的注释以获得支持）：

@font-face {
  font-family: 'Bebas Neue';
  src: url('BebasNeue.eot'); /* IE9 Compat Modes */
  src: url('BebasNeue.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('BebasNeue.woff2') format('woff2'), /* Super Modern Browsers */
       url('BebasNeue.woff') format('woff'), /* Pretty Modern Browsers */
       url('BebasNeue.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('BebasNeue.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-style:normal;
  font-weight:normal;
}

使用@ font-face的Webfont停止工作

2 个答案: