谷歌网页字体没有在角使用吗？

Question

我有一个角度项目设置与角-cli。我想把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中添加一个链接，同样的效果。

不确定是否相关，但我也添加了材料图标

// 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

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

通过npm安装roboto-font面，并将其链接到角-cli.json的样式数组中。

npm install roboto-fontface --save

在角-cli.json样式数组'apps.styles‘中添加以下内容

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

和，npm start和试用样式

Answer 2

这对我来说很管用：

注释！材料图标也托管在谷歌字体上(不需要本地版本)

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

body {
  font-family: 'Roboto', sans-serif;
}
body:after {
  font-family: 'Material Icons';
  content: 'star';
} 

Answer 3

面对谷歌字体不被应用的问题。通过在index.html的头中放置带有样式的字体链接，在不需要npm安装字体的情况下工作。

<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