如何在本地使用Google字体而不是在Angle 4项目中导入

Question

我要在我的angular 4项目scss文件中导入Google字体网址，如下所示，

@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');

而不是直接导入url，我如何下载/安装它们并在angular 4 scss文件中本地使用。

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

Answer 1

2步解决方案

步骤1：下载字体并将其保存在素材资源文件夹中

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

步骤2：在CSS文件中，只需使用正确的相对路径导入它们

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