谷歌Web字體沒有在Angular中使用？

我有一個角度cli的Angular項目設置。我想捆綁的Roboto字體，我的網站，所以我做的事情是這樣的我在styles.scss聲明它谷歌Web字體沒有在Angular中使用？

/* 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; 
}

然而，這似乎是字體反正默認爲無襯線代替的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'); 
}

在同樣的文件，這可能在某種程度上對項目的影響？

來源

2017-02-24 Nikki Kononov

既然你對@角/ CLI項目的工作，我懷疑的是，在.scss文件的工作聯繫。

通過NPM安裝的Roboto-fontface和角度cli.json

npm install roboto-fontface --save

的樣式陣列中鏈接它在角cli.json樣式陣列的應用程式[0] .styles'添加以下

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

而且，npm start並嘗試風格

來源

2017-02-24 10:39:10

看來你的解決方案正在工作。當我禁用Roboto字體系列時，字體實際上會改變，但爲什麼它不適用於在線CDN？ –

@NikkiKononov有效的問題。我假設它是CLI編譯器的東西。在樣式標籤中添加CDN時，構建失敗。而且，據我所知這是推薦的方式。確保你保持cli版本的更新。事情正在迅速改變 –

您可以按照相同的方式添加材料設計圖標@NikkiKononov –

這個工作對我來說：

注意！材料圖標也託管在谷歌的字體（無需本地版本）

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

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

來源

2017-02-24 10:31:03

隨着角CLI我嘗試在本地舉辦的一切，但對實驗的緣故，我試過在本地和通過谷歌網頁字體，EIT負荷字體她的方式，似乎像字體家庭默認爲無襯線時，我檢查它。就像通過Google Dev Tools刪除Roboto字體一樣，文字字體也不會改變。 –

檢查我的答案，並嘗試一下。它應該工作，因爲我在我的應用程序中使用相同的方法，幸運的是我正在使用roboto @NikkiKononov –

@SaiyaffFarouk是的，好像我在這裏混淆了人們：D您的解決方案確實有效，在本地使用Roboto。那麼爲什麼CDN拒絕工作呢？ –

谷歌Web字體沒有在Angular中使用？

回答

相關問題