下载 Google 字体以在本地运行
Posted
技术标签:
【中文标题】下载 Google 字体以在本地运行【英文标题】：Downloading Google fonts to run it locally 【发布时间】：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" ...> 标签，该标签仅适用于您明确指定的内容。
【讨论】：
以上是关于下载 Google 字体以在本地运行的主要内容，如果未能解决你的问题，请参考以下文章
从 Google 字体下载字体文件时，我如何也可以获得许可证文件？