Question

如果我将自定义字体链接到Google，则可以。但是当我将@ font-face复制到我的本地机器时，却没有。简而言之，我有以下非常简单的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和字体。

Answer 1

我在当地尝试过。它有效。在您的互联网完全关闭的情况下，您还需要下载roboto.css文件中引用的字体并将它们放在本地文件夹中。然后使用这些字体的本地路径更新roboto.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');

希望这有帮助。

本地css中的@ font-face无效

1 个答案: