如何在 Angular 4 项目中本地使用谷歌字体而不是导入？

Question

我正在将Google字体的URL导入到我的Angular 4项目scss文件中，如下所示：

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Oswald:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Heebo:400,500,700');

我该如何在Angular 4的SCSS文件中下载/安装URL并在本地使用，而不是直接导入它们？

任何解决方案都将有所帮助。

- Siva Kumar S

Answer 1

2步解决方案

第一步：将字体下载并保存到assets文件夹中

将ttf/otf文件保存在项目的assets文件夹中

第二步：在你的css文件中，使用正确的相对路径导入它们

@font-face {
  font-family: lato;
  src: url(assets/font/Lato.otf) format("opentype");
}

- Debojyoti

---

这是正确的答案，尽管如果您不需要支持非常老的浏览器，我建议仅使用woff字体格式。以下是如何操作的链接：http://davidensinger.com/2014/10/update-your-font-face-file-formats-to-just-use-woff-and-woff2/ - mattarau

Answer 2

下载托管在 googleapis.com 域名上的 Google 样式表：

https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap

将文件保存到您的主题目录中，使其成为以下形式：

https://www.example.com/themes/fonts.css

当您打开这个fonts.css文件时，会看到类似以下的内容：

/* latin-ext */
 @font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
...

将url中的字体保存到新创建的fonts文件夹中，并替换fonts.css中的路径，使其变为：

src: url(https://www.example.com/themes/fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');

注意：在我的情况下，需要下载60多种字体 :-)

最后一步是将fonts.css添加到您的HTML中：

<link rel="stylesheet" id="local-fonts-css" href="https://www.example.com/themes/fonts.css?ver=1.0" type="text/css" media="all">

那就是基础知识。更多细节请参考this博客文章。

- Jasom Dotnet