css - Google Web Font 没有在 Angular 中使用？

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

但是，字体似乎默认为 sans-serif 而不是 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

由于您正在处理 @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 并尝试样式