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

【问题标题】：How to use google fonts locally instead of importing in angular 4 project如何在本地使用谷歌字体而不是在 Angular 4 项目中导入
【发布时间】：2018-12-28 18:16:24
【问题描述】：

我在我的 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。

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

【问题讨论】：

标签： angular sass google-fonts

【解决方案1】：

两步解决方案

第 1 步：下载字体并保存它们到 assets 文件夹中

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

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

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

【讨论】：

这是正确的答案，但如果您不需要支持非常旧的浏览器，我建议您只使用 woff 字体格式。方法如下：davidensinger.com/2014/10/…

【解决方案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 博文。

【讨论】：