css - 谷歌网络字体无法在网络服务器上运行

Question

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url('DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff') format('woff');
}

我从 google css 提供的 url 下载了字体，这样我就可以在不在线的情况下使用它。单击 .html 文件并在浏览器中将其打开时，该代码有效。但是，当我将所有文件放在本地网络服务器上时，它不起作用。

有什么想法吗？请记住，我不会连接到互联网。

Answer 1

Adam，正如@Kyle 所建议的那样，这种行为可能有多种原因

首先我会检查字体文件的 url 是否正确解析。从上面的 CSS 声明来看，浏览器似乎希望文件出现在 CSS 所在的同一目录中

其次，是的，谷歌可能已经阻止了文件的窃取/下载。检查这一点的唯一方法是首先使用要从谷歌服务加载的字体“注意文件的大小”，然后下载并检查大小。如果它们相同，则允许下载

Third webfonts need to be browser specific here is the explanation from themselves

When a browser sends a request for a Font API stylesheet (as specified in a tag in your web page), the Font API serves a stylesheet generated for the specific user agent making the request.

所以每次您的浏览器请求字体时，您实际上是在下载一个小的 CSS 片段，然后是目录中的字体系列