Thực hành tốt nhất/Kiểu để nhập phông chữ vào ứng dụng web cli 4 góc

Question

Tôi đã làm việc trên dự án cá nhân Angular 4 và muốn thêm họ phông chữ Ubuntu vào ứng dụng Góc của tôi. Phương pháp hay phong cách hay nhất để thêm một số phông chữ tùy chỉnh vào một dự án là gì? Tôi hiện đã lưu gia đình phông chữ ubuntu vào /assets/fonts/ubuntu-font-family-0.83 và thêm nó vào tệp CSS thành phần bên ngoài nhất, app.component.css với khuôn mặt phông chữ.

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

Bằng cách đặt điều này trong thành phần gốc, tôi không phải xác định lại phông chữ trong các thành phần lồng nhau tôi chỉ coi nó như một phông chữ mặc định.

Có cách nào rõ ràng hơn/tốt hơn để thực hiện việc này và vẫn cắt mã trùng lặp không?

Answer 1

Có cách tốt hơn để đưa phông chữ vào trang web, không chỉ cho ứng dụng góc cạnh.

Thanh toán https://fonts.google.com

Tại sao lại tốt hơn? hiệu suất

• cao
• cao cơ hội, mà khách hàng của bạn sẽ có phông chữ trong bộ nhớ cache của ông
• bạn không phải lo lắng về đính kèm tệp, và sử dụng của bạn có nguồn gốc băng thông

Trong của bạn trường hợp bạn sẽ nhập sau trong tệp css của mình:

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

Bạn có thể đặt nó trong tệp .css chính, được bao gồm bởi index.html. Hoặc bạn có thể sử dụng thẻ <link> và bao gồm phông chữ trong tiêu đề của mình (cũng trong index.html)

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