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文件并在浏览器中打开它时，代码可以正常工作。但是，当我将所有文件放在本地Web服务器上时，它不起作用。

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

Answer 1

Adam可能有各种原因导致这种行为，因为@Kyle建议

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

第二，是的谷歌可能阻止了搜索/下载文件。只有这样才能检查这个是首先使用从谷歌服务加载的字体'注意文件的大小'然后下载并检查大小。如果它们相同，则允许下载

第三个webfonts需要是浏览器特定的，这是他们自己的解释

当浏览器发送对Font API样式表的请求时（如指定的那样）在您网页的标签中），Font API提供样式表为发出请求的特定用户代理生成。

因此，每当您的浏览器请求字体时，您实际上正在下载一个小的CSS片段，然后从目录中下载字体系列

Answer 2

如果字体在计算机上通过打开html文件正常工作，而不是localhost，则很奇怪。您确定要复制所有字体文件并放在同一目录中吗？由于文件名太复杂而且很长，可能是你在用名字做错了？你使用相同的浏览器吗？

不，没有像谷歌不允许下载文件。为了确保，我已经从谷歌字体下载了一个字体（GloriaHallelujah）并使用以下代码进行了测试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Google font test</title>
    <style type="text/css" media="screen">
    @font-face {
        font-family: GloriaHallelujah;
        src: url('GloriaHallelujah.ttf');
        }   
    h1 { font-family: GloriaHallelujah, helvetica, arial; }     
    </style>
</head>
<body>
     <h1> Hello World </h1>
</body>
</html>

这在桌面和本地主机上都可以正常工作。也许你可以从here下载相同的字体，放在同一个目录中，然后在你的localhost上测试并查看。

Answer 3

在我的Windows 7 IIS服务器上，我不得不在mime类型中添加woff以使它们工作。

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

3 个答案: