Angular中没有使用Google Web Font?

时间:2017-02-24 10:12:30

标签: css angular sass angular-cli

我有一个带有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中添加一个链接,效果相同。

P.S。不确定是否相关,但我还添加了材料图标

// 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');
}

在同一个文件中,这可能会对项目产生影响吗?

2 个答案:

答案 0 :(得分:8)

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

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

npm install roboto-fontface --save

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

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

并且,npm start并试用样式

答案 1 :(得分:0)

这对我有用:

注意!材料图标也托管在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';
}