Red*_*Anz 7 google-font-api angular angular6 angular-builder
我在styles.scssAngular 项目的文件中添加了 Google 字体链接。
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700');
但它已经可以与 Angular CLI 命令一起使用ng serve，但是，尝试构建命令ng build --prod --base-href部署了项目。然后注意到了这些问题。
问题是它“不适用于导入谷歌字体”。
我正在谷歌上研究这个问题。但我没有找到一个好的解决方案。
我想知道如何在 angular 项目中应用 google 字体？
这是在本地使用 2、4、5、6、7 等角度的谷歌字体的最佳方式，首先下载谷歌字体，然后在资产文件夹内使用它，并根据您的要求使用它。
在 angular.json 在 src/assets 中调用它
"assets": [
"src/assets"
],
在 css 文件中在顶部添加这个字体
@font-face {
font-family: 'Montserrat';
src: url(/assets/Montserrat/Montserrat-Light.ttf) format("truetype");
font-weight:300;
}
最后根据您的要求使用它
body{
font-family: 'Montserrat', sans-serif;
}
如果您想在 angular 应用程序中包含您自己的来自谷歌的 Roboto 字体版本
npm install roboto-fontface
然后在您的 angular.json 文件中，在样式列表中添加字体文件，如下所示
"styles": [
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
],
尝试这样的事情：
在index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
</head>
<body>
<app-root>
Loading...
</app-root>
</body>
</html>