Question

我正在使用metronic主题来构建我的Web应用程序。在每个页面上，此代码是<head>标记中的第一个：

<script>
     WebFont.load({
       google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
       active: function() {
           sessionStorage.fonts = true;
       }
     });
</script>

我需要从谷歌那里获取这些字体，以便我可以在本地脱机使用它们。我怎么能得到它们？我应该写什么代码。感谢。

Answer 1

下载字体然后转到font generator喜欢：https://transfonter.org/，而不是下载此文件并根据文件放置

Answer 2

我也遇到了同样的问题，但是我通过以下步骤解决了这个问题：

1）如您所知，您可以使用googleapi导入google字体，因此我首先输入适当的网址，例如：

'https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700'

和

'https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700'

这些网址应返回包含字体来源的css文件。

2）将这些文件保存到适当的路径。

3）您需要一个一个地下载'font-face'的'src'中的源URL，然后将其放在适当的路径中。例如，在以下摘录的CSS上：

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: local('Poppins Light'), local('Poppins-Light'), url(https://fonts.gstatic.com/s/poppins/v5/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

您应该从以下地址下载字体：

'https://fonts.gstatic.com/s/poppins/v5/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2'

4）最后，根据本地字体文件，更正css文件中“ src”的“ url”。

希望有帮助。

如何让这些谷歌字体供离线使用

2 个答案: