代码之家 › 专栏 › 技术社区 › Sumchans

使用谷歌字体库

fonts angular

29

Sumchans · 技术社区 · 8 年前

我添加了在样式中导入谷歌字体的链接。我的角度项目的css文件。这是:

@import url('https://fonts.googleapis.com/css?family=Muli:400,700');

我如何在我的项目中全局应用字体,以及如何将其仅添加到html元素,例如For。

2 回复 | 直到 8 年前

1

45

Z. Bagley 8 年前

使用google字体的最佳方法是将脚本包含在 指数html 档案 <head>...</head> 部分当你深入研究时,你会发现 以谷歌为好友进行编码 最好的部分之一是 cdn公司 是为了以这种方式支持而构建的!

等效脚本包括: <link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet">

这与谷歌的材质图标的工作原理相似!

要在样式表中使用它,请将其包含在基础中 styles.css 文件:

html, body {
    font-family: 'Muli';
}

注意:你会发现 css 标签“字体系列”实际上有很多选择。这是最基本的,但如果你想了解更多信息,我很乐意更新更具体的答案。我想尽力理解你的问题,解决它,我们可以一起对问题有一个坚实的理解。

2

11

NaN 5 年前

另一个好方法是将字体下载到服务器上。这样,您创建的intranet应用程序就不需要获取外部源才能正常运行。在我国的投票机构,我们在选举日切断了与服务器的连接,以避免黑客攻击,因此应用程序必须拥有本地所需的所有资产:

 $ npm install --save typeface-muli

加上角度。json:

 "styles": [
   "src/styles.scss",
   "node_modules/typeface-muli/index.css" <-- add this line
 ],

从索引中删除。html:

 <!-- <link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700" rel="stylesheet"> -->