如何将在线字体链接转换为本地字体？答案

【问题标题】：How to convert online font link into local ones?如何将在线字体链接转换为本地字体？
【发布时间】：2017-09-07 17:46:56
【问题描述】：

如何将在线字体链接转换为本地字体？（大概下载字体文件就ok了）

例如，来自谷歌字体的 HTML 和 CSS：

HTML:
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Source+Sans+Pro" rel="stylesheet">

CSS:
font-family: 'Roboto', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Source Sans Pro', sans-serif;

或使用导入样式：

<style>
@import url('https://fonts.googleapis.com/css?family=Oswald|Roboto|Source+Sans+Pro');
</style>

这里的主要目标是：

下载后，转换为本地。整个网站可以在本地网络中本地服务，无需互联网连接。

【问题讨论】：

你只需要使用 font-face w3schools.com/cssref/css3_pr_font-face_rule.asp
如果你想在本地工作，你需要下载字体并在本地安装它们。这是唯一的方法
只需下载本地系统上的文件。并删除导入。它将像普通字体一样工作。
请检查我的答案:)

标签： html css fonts

【解决方案1】：

您可以从 google web font 助手那里获得帮助。它确实是一个方便的工具，可以下载 google 字体 并在本地安装它们。

此工具和实施的好处：

1.它将提供所有格式的字体（.eot、.woff、.woff2、.svg、.ttf）。

2。帮助您实现 css。它生成所选字体和样式的 css。

   example of css code:
/* open-sans-regular - latin */ 
 @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
      src: local('Open Sans'), local('OpenSans'),
           url('../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
           url('../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
    }

3.手动选择要包含在项目中的所有字体粗细和样式并下载。

【讨论】：

这太棒了！但是，有没有更通用的工具可以直接从 url (fonts.googleapis.com/css?family=Oswald|Roboto|Source+Sans+Pro) 下载并放入一些文件夹中？
我可以自己写字体，所以如果有一些工具可以自动化下载过程，那就太好了。
实际上没有任何直接的方法可用.. 还有其他几种方法，但这些方法很长。所以目前没有可直接从该网址下载的内容..

【解决方案2】：

你必须下载字体文件并在css中声明它：

@font-face { font-family: Roboto; src: url('Roboto.otf'); }

【讨论】：