將字體導入到角應用程序

我試圖將字體「蒙特塞拉特」導入到我的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

將字體導入到角應用程序

回答

相關問題