如何获取这些谷歌字体以供离线使用答案

【问题标题】：How to get these google fonts for offline use如何获取这些谷歌字体以供离线使用
【发布时间】：2018-06-12 23:07:48
【问题描述】：

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

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

我需要从 google 获取这些字体，以便我可以在本地离线使用它们。我怎样才能得到它们？我应该写什么代码。谢谢。

【问题讨论】：

Downloading a google font and setting up an offline site that uses it的可能重复
我会检查的。谢谢。

标签： html css fonts google-fonts

【解决方案1】：

首先下载字体并转到font generator Like :https://transfonter.org/ 然后您可以下载此文件并根据文件放置

【讨论】：

【解决方案2】：

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

1) 如您所知，您可以使用 googleapi 导入 google 字体，所以首先我制作了适当的 url，例如：

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

和

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

这些 url 应该返回一个包含字体源的 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'。

希望对你有帮助。

【讨论】：