Css 将字体导入Angular应用程序

我试图将字体“蒙特塞拉特”导入我的Angular4项目，但它只是重置为标准

这是我的风格

@import url("https://fonts.googleapis.com/css?family=Montserrat:500,700");

.fancyFont {
  font-family: 'Montserrat';
}

还有我的朋友.component.html

<p class="fancyFont">Look at my Fanciness</p>

看看我的幻想

---

这就是url的样子

/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v10/BYPM-GE291ZjIXBWrtCweiyNCiQPWMSUbZmR9GEZ2io.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v10/BYPM-GE291ZjIXBWrtCwevfgCb1svrO3-Ym-Rpjvnho.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v10/BYPM-GE291ZjIXBWrtCweteM9fzAXBk846EtUMhet0E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcnv4bDVR720piddN5sbmjzs.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcjrEaqfC9P2pvLXik1Kbr9s.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcmaVI6zN22yiurzcBKxPjFE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

---

如果查看内容中的

local（…）

部分，您可以看到每个

font-weight

s（500和700）都有特定的

font-family

名称。因此，请尝试指定

字体系列

名称，而不是将它们一般称为

蒙特塞拉特

，例如

“蒙特塞拉特-Medium”或
“蒙特塞拉特-Bold”
。看看这是否解决了问题。
下面是font awesome将这些字体添加到scss文件中的方法。也许你必须考虑这样做。

@font-face {
  font-family: 'FontAwesome';
  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
//  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

我想出来了

我从谷歌导入了如下字体：

@import url("https://fonts.googleapis.com/css?family=Montserrat:500,700");

它包括两种不同的重量，500和700。
通过告诉CSS我想使用哪种字体，它开始工作了

.fancyFont {
  font-family: 'Montserrat';
  font-weight: 500;
}

您还提到了css，是scss还是css？您确定您的css文件已加载到浏览器中吗？根据您构建应用程序的方式，您可能需要在
链接中引用它，或者将其包含在您的网页配置中。@AniruddhaDas我正在使用CSS@BennorMcCarthy我的CSS文件正在加载。我可以在.fancyFont中添加其他更改，如颜色和填充，这将影响文本，只是没有字体系列的更改。我相当确定，字体系列声明为“蒙特塞拉特”，这意味着答案是正确的wrong@amal上面的
@font-face
代码适用于我，但您能告诉我您是如何使用unicode范围生成此代码的吗，因为我是新手。