Angular 中没有使用 Google Web 字体？

Posted 2023-03-06

【中文标题】Angular 中没有使用 Google Web 字体？

【英文标题】：Google Web Font is not being used in Angular?

【发布时间】：2017-07-15 03:01:52

【问题描述】：

我有一个使用 angular-cli 的 Angular 项目设置。我想将 Roboto 字体与我的网站捆绑在一起，所以我这样做的方式是在我的 styles.scss 中声明它

/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css?family=Roboto');

// Set Global Font
body 
  font-family: 'Roboto', sans-serif;
  margin: 0;

但是，无论如何，字体似乎默认为无衬线而不是 Roboto。我尝试在 index.html 中添加一个链接，效果相同。

附：不确定是否相关，但我还添加了 Material Icons

// Import Material Icons
@font-face 
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
       url('../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'),
       url('../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype');

在同一个文件中，这会以某种方式对项目产生影响吗？

【参考方案1】：

面临未应用谷歌字体的问题。通过在 index.html 的头部放置带有样式的字体链接，以下方式在没有 npm install 字体的情况下工作

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />

<style>
  * 
    font-family: 'Markazi Text';
    font-weight: 400;
  
</style>

参考：https://developers.google.com/fonts/docs/css2

【参考方案2】：

由于您正在处理 @angular/cli 项目，我怀疑 .scss 文件中的链接是否有效。

通过npm安装roboto-fontface并链接到angular-cli.json的styles数组中

npm install roboto-fontface --save

在 angular-cli.json 样式数组 'apps[0].styles' 中添加以下内容

    "styles": [
      ...
      "../node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
      ...
    ]

还有，npm start 并尝试样式

【讨论】：

您的解决方案似乎有效。当我禁用 Roboto 字体系列时，字体实际上会发生变化，但为什么它不能与在线 CDN 一起使用？

@NikkiKononov 有效问题。我假设它与 CLI 编译器有关。当您在样式标签中添加 CDN 时，构建失败。而且，据我所知，这是推荐的做法。确保使用 cli 版本保持更新。事情正在迅速变化

您可以按照@NikkiKononov 相同的方式添加材料设计图标

是的，我正在密切关注所做的更改。这就是为什么我选择离线使用所有内容:) 感谢您的帮助。标记为有效答案。

收到“警告在 15949:4 的无效字体值中的错误。忽略。”在 ng build --prod

【参考方案3】：

这对我有用：

注意！材料图标也托管在 Google 字体上（不需要本地版本）

@import url('//fonts.googleapis.com/css?family=Roboto|Material+Icons');

body 
  font-family: 'Roboto', sans-serif;

body:after 
  font-family: 'Material Icons';
  content: 'star';
 

【讨论】：

使用 angular-cli 我尝试在本地托管所有内容，但为了实验，我尝试在本地和通过谷歌网络字体加载字体，无论哪种方式，当我使用字体系列默认为无衬线时检查。就像我通过 Google Dev Tools 删除 Roboto 字体一样，文本字体不会改变。

检查我的答案并尝试一下。它应该可以工作，因为我在我的应用程序中使用了相同的方法，幸运的是我使用的是 roboto @NikkiKononov

@SaiyaffFarouk 是的，似乎我在这里混淆了人们：D 您的解决方案确实有效，在本地使用 Roboto。那么问题来了，为什么 CDN 拒绝工作？