Blog này sẽ nói về việc sử dụng quy tắc CSS @ font-face.
Quy tắc CSS @ font-face là gì?
Quy tắc @font-face trong CSS được sử dụng để tạo phông chữ tùy chỉnh cho các dự án của chúng tôi. Các phông chữ này có thể được tải từ máy chủ hoặc các phông chữ đã cài đặt của hệ thống.
Làm cách nào để sử dụng Quy tắc CSS @ font-face?
Cú pháp sử dụng quy tắc CSS @font-face được đề cập bên dưới:
@mặt chữ {
họ phông chữ : MyNewFont ;
src : url ( )
}
Quy tắc @font-face được xác định bằng cách chỉ định một giá trị trong thuộc tính họ phông chữ và URL có liên quan từ nơi đặt phông chữ này làm thuộc tính src.
Ví dụ
Trong ví dụ dưới đây, chúng tôi sẽ tùy chỉnh phông chữ. Để làm như vậy, trước tiên, hãy tải xuống các phông chữ từ trình duyệt và thêm chúng vào thư mục dự án của bạn. Bạn cũng có thể sử dụng các liên kết nếu bạn đang sử dụng phông chữ từ máy chủ.
Đầu tiên, thêm các thẻ
và , sau đó áp dụng để tùy chỉnh phông chữ cho từng thẻ. Hãy triển khai kịch bản được mô tả ở trên theo ba bước.
Bước 1: Thêm phần tử vào tệp HTML
Bước 1: Thêm phần tử vào tệp HTML
Trong HTML, bên trong phần
, thêm và để thêm một số nội dung liên quan đến trang web:
< h2 > Chào mừng bạn đến với Linuxhint! < / h2 >
< h1 > Chào mừng bạn đến với Linuxhint! < / h1 >
Bước 2: Chỉ định Quy tắc @font-face trong CSS
< h2 > Chào mừng bạn đến với Linuxhint! < / h2 >
< h1 > Chào mừng bạn đến với Linuxhint! < / h1 >
Bước 2: Chỉ định Quy tắc @font-face trong CSS
Để chỉ định quy tắc, từ khóa “ @mặt chữ ” được sử dụng trong CSS. Bên trong dấu ngoặc nhọn, thêm thuộc tính họ phông chữ và thêm tên phông chữ làm giá trị của nó. Sau đó, sử dụng thuộc tính src để chỉ định đường dẫn URL của phông chữ đã tải xuống:
@mặt chữ {
họ phông chữ : phông chữ của tôi ;
src : url ( '/fonts/Batuphat\Script.otf' ) ;
}
Tương tự, chúng tôi sẽ thêm một khối phông chữ tùy chỉnh khác:
@mặt chữ {họ phông chữ : myfont2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Bây giờ, hãy áp dụng kiểu dáng cho các phần tử
và .
Phần tử kiểu h2
h2 {
họ phông chữ : phông chữ của tôi ;
cỡ chữ : 50px ;
}
Phần tử kiểu h2
h2 {họ phông chữ : phông chữ của tôi ;
cỡ chữ : 50px ;
}
Các thuộc tính được áp dụng cho phần tử
được giải thích bên dưới:
- “ họ phông chữ ” được đặt với giá trị “ phông chữ của tôi ” đó là những gì chúng tôi đã khai báo trong quy tắc @font-face.
- “ cỡ chữ ” đặt kích thước của phông chữ thành 50px.
Phong cách phần tử h1
h1 {
họ phông chữ : myfont2 ;
cỡ chữ : 70px ;
màu : nâu ;
}
Đây là “ màu ” Thuộc tính được sử dụng để tô màu cho phông chữ.
Có thể thấy từ hình ảnh được cung cấp bên dưới rằng các thẻ
và được tạo kiểu thành công với các phông chữ mới được khai báo:
Chúng tôi đã cung cấp phương pháp sử dụng quy tắc CSS @ font-face.
Phần kết luận
Các kiểu phông chữ đóng một vai trò quan trọng trong việc làm cho bất kỳ ứng dụng nào trở nên hấp dẫn về mặt thẩm mỹ. Hệ thống của chúng tôi có các kiểu phông chữ hạn chế, trong khi nhà phát triển cần các phông chữ khác nhau để thêm phần làm đẹp cho ứng dụng web của họ. Để làm như vậy, CSS cho phép chúng tôi sử dụng quy tắc @font-face để thêm phông chữ tùy chỉnh. Bài viết này đã trình bày quy tắc @font-face mà qua đó bạn có thể tùy chỉnh kiểu phông chữ trong ứng dụng của chúng tôi.