下载 Google 字体以在本地运行答案

【问题标题】：Downloading Google fonts to run it locally下载 Google 字体以在本地运行
【发布时间】：2017-06-11 19:53:22
【问题描述】：

我目前正在从头开始创建一个 HTML 文档。我正在使用 MAMP 来托管网站，但是当我链接到谷歌字体时它不起作用。

当我下载它时，我会将它链接到我的 css 文件吗？如果是的话，我该怎么称呼它？

谢谢

【问题讨论】：

请访问帮助中心，了解如何提出好问题
How to host google web fonts on my own server?的可能重复
请详细说明您到目前为止做了什么以及遇到了什么样的错误

【解决方案1】：

最好在您的站点中自定义字体，而要进行自定义，您需要下载四种格式的字体（webfont.eot、webfonts.svg、webfonts.woff、webfonts.ttf），然后从 CSS 中使用它们。按照这个网址： https://css-tricks.com/snippets/css/using-font-face/

【讨论】：

【解决方案2】：

查看此示例了解如何使用在线字体。

<html>
    <head>
        <style>
            @font-face{
                font-family:fontName;
                src:url(https://fonts.gstatic.com/s/varelaround/v6/APH4jr0uSos5wiut5cpjrugdm0LZdjqr5-oayXSOefg.woff2)
            }
            body{
                font-family:fontName;
                font-size:2em;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>Title</h1>
    </body>
</html>

【讨论】：

【解决方案3】：

我建议不要下载它们并在“本地”提供它们，而是检查可能出现的错误并使用通过 Google API 提供的字体。他们提供了getting started guide，因此您可以从如下所示的基本示例开始，然后按照自己的方式进行操作：

<html>
  <head>
    <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      .fancy {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    Example for using 
    <span class="fancy">Tangerine</span>
  </body>
</html>

您还可以浏览所有可用的字体here，并让 google 为您生成一个自定义的<link rel="stylesheet" ...> 标签，该标签仅适用于您明确指定的内容。

【讨论】：