將字體導入到角度4 cli web應用程序的最佳做法/樣式

我一直在研究Angular 4個人項目，並且希望將Ubuntu字體系列添加到我的Angular應用程序中。將大量自定義字體添加到項目中的最佳做法或樣式是什麼？我目前已將ubuntu字體系列保存到/assets/fonts/ubuntu-font-family-0.83中，並將其添加到最外面的組件CSS文件app.component.css中，並帶有字體。將字體導入到角度4 cli web應用程序的最佳做法/樣式

@font-face { 
    font-family: 'Ubuntu'; 
    src: url('/assets/fonts/ubuntu-font-family-0.83/Ubuntu-R.ttf'); 
}

通過將這種原成分，我沒有重新定義嵌套組成部分，我只是把它當作默認字體家族的字體。

有沒有更清晰/更好的方法來做到這一點，仍然切出重複的代碼？

來源

2017-07-03 ob1

有更好的方式來包括字體到網站，而不僅僅是角度的應用程序。

結帳https://fonts.google.com

爲什麼它是更好？

更高的性能
較高的機會，你的客戶將有字體在他的緩存
你不必擔心附加文件，並使用你的出身帶寬

在你你可以在你的css文件中輸入以下內容：

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

你可以將它放在主要的.css文件中，包含在index.html中。或者，您可以使用<link>標記，並在標題中包含字體（也位於index.html）

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

來源

2017-07-03 06:30:49

謝謝您的迴應！我還有其他一些問題：我會將導入的CSS文件放在什麼位置？包含在每個CSS文件中是否是不好的做法？最後，在導入之後，我只是像通常所說的那樣引用字體'font-family：Ubuntu;'還是必須聲明'@ font-face'？ – ob1

感謝您提供爲什麼這種方法更好的原因！ – ob1

你不需要包含每個CSS文件。只包含在頂級文件中。是的，在定義字體之後，你可以在其他樣式表中使用它（只是font-family：Ubuntu） –

將字體導入到角度4 cli web應用程序的最佳做法/樣式

回答

相關問題