将字体导入到角应用程序

我试图将字体“蒙特塞拉特”导入到我的Angular4项目中，但它只是重置为标准。将字体导入到角应用程序

这里是我的style.css

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

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

而且我friend.component.html

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

来源

2017-09-13 Reed

你也提到过css，是scss还是css？ –

你确定你的CSS文件已经加载到浏览器中吗？根据您构建应用程序的方式，您可能需要在“链接”标签中引用它，或将其包含在您的webpack配置中。 –

@AniruddhaDas我正在使用CSS – Reed

我想通了。

我进口来自谷歌的字体是这样的：

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

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

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

来源

2017-09-14 13:28:55 Reed

这是网址的样子。

/* 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-family名称为每个font-weight秒（500 & 700）存在。因此，请尝试指定font-family的名称，而不是将它们统称为Montserrat，例如'Montserrat-Medium'或'Montserrat-Bold'。看看是否解决了这个问题。

来源

2017-09-13 20:43:27 amal

林相当肯定的事实，即字体家庭被宣布为'蒙特塞拉特'意味着这个答案是错误的 –

下面是字体真棒将字体添加到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; 
}

来源

2017-09-13 20:44:07

将字体导入到角应用程序

回答

相关问题