Angular 中没有使用 Google Web 字体？

Question

我有一个使用 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');
}

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

Answer 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

Answer 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 并尝试样式

Answer 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';
}