本地 css 中的 @font-face 不起作用答案

【问题标题】：@font-face in local css isn't working本地 css 中的 @font-face 不起作用
【发布时间】：2015-05-20 17:42:02
【问题描述】：

如果我将自定义字体链接到谷歌，它就可以工作。但是当我将@font-face's 复制到我的本地机器时，它没有。简而言之，我有以下非常简单的 HTML：

<html>
<head>
    <!--<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto'>-->
    <!--<link rel='stylesheet' href='roboto.css'>-->
    <title>Hello</title>
    <style>
        .temp { font-family: roboto, courier; }         
    </style>
</head>
<body>
    <div class="temp">THIS IS A STRING!</div>
</body>
</html>

现在，如果我取消注释第一个链接，一切正常。字符串有roboto字体。

但是，如果我将该链接粘贴到浏览器中，它会返回一堆@font-face。如果我随后将该批次复制到本地roboto.css（与我的html 位于同一文件夹中），并改用第二个链接，则不会显示roboto 字体。为什么会这样？

我正在尝试使所有内容都脱机运行，因此我需要下载所有 css 和字体。

【问题讨论】：

字体文件的路径错误？检查浏览器开发者工具的网络面板，看看那里是否有任何 404。
来自下面的cmets，看看对你有没有帮助：stackoverflow.com/q/10300143/2543628

标签： html css fonts

【解决方案1】：

我在本地尝试过。它有效。如果您的互联网完全关闭，那么您还需要下载 robots.css 文件中引用的字体并将它们放在本地文件夹中。然后使用这些字体的本地路径更新 robots.css 文件。

示例：下载下面引用的文件

src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');

网址是http://fonts.gstatic.com/s/roboto/v15/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2

下载文件 ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2 后。将它放在您的本地文件夹中，更新后的代码将是：

src: local('Roboto'), local('Roboto-Regular'), url(./ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');

希望这会有所帮助。

【讨论】：

Google 字体 API 会根据您请求字体的浏览器为您提供不同（优化的）内容。（只需使用 Chrome 和 IE 打开fonts.googleapis.com/css?family=Roboto，您会发现不同之处。）因此，您的方法也可能会在某种程度上起作用，您可能会遇到有关跨浏览器兼容性的奇怪错误，因此会因 Google Font API 的存在而丢失。因此，您应该远离这样的解决方案。
啊.. 好吧，那将是一个问题。很高兴知道并将记下它。虽然，上述问题的唯一解决方案是找出目标浏览器并为页面获取正确的字体文件和 css，因为显然该应用程序无法访问 Internet，并且可能是离线本地页面。
这里讨论了类似的东西（如何正确离线使用 Google 字体）：stackoverflow.com/q/10300143/2543628 我不确定它是否会为所有操作系统和浏览器组合克隆所有不同的字体格式和 CSS .
Jey DWork，你一针见血！你看，我的微妙问题是，我将那个 googleapi 链接粘贴到 CHROME 中，但我在 IE 中运行 HTML 文件！当我在 IE 中粘贴相同的 googleapi 链接时，它给了我一个完全不同的 src，一个 WOFF，而 CHROME 给了我 WOFF2！它现在可以完美运行。再次感谢！
是的，Bala，我现在正在下载实际的字体文件。谢谢！