Các Thuộc Tính định Dạng FONT CHỮ Trong CSS - Web Cơ Bản
Có thể bạn quan tâm
Ở bài hướng dẫn này, bạn sẽ được tìm hiểu một số thuộc tính định dạng chữ như sau:
- font-size - thiết lập kích cỡ chữ
- font-weight - thiết lập sự tô đậm của chữ
- font-style - thiết lập sự in nghiêng của chữ
- font-family - thiết lập kiểu chữ
Thiết lập KÍCH CỠ CHỮ
Thuộc tính font-size dùng để thiết lập kích cỡ chữ của văn bản
Ví dụ: p { font-size:40px; } Xem ví dụGiá trị của thuộc tính font-size có thể xác định theo đơn vị:
- px [Xem ví dụ]
- em (tỷ lệ 1em = 16px) [Xem ví dụ]
- % (tỷ lệ phần trăm so với kích cỡ chữ của phần tử chứa nó) [Xem ví dụ]
Lưu ý: Nếu không thiết lập kích cỡ chữ cho văn bản thì mặc định văn bản có kích cỡ chữ là 16px
Thiết lập CHỮ TÔ ĐẬM
Thuộc tính font-weight dùng để thiết lập sự tô đậm của chữ.
Thuộc tính font-weight có hai giá trị cơ bản:
- normal: không tô đậm
- bold: tô đậm
Thiết lập CHỮ IN NGHIÊNG
Thuộc tính font-style dùng để thiết lập sự in nghiêng của chữ.
Thuộc tính font-style có ba giá trị cơ bản:
- normal: không in nghiêng
- italic: in nghiêng
- oblique: in nghiêng (giống italic, nhưng độ in nghiêng ít hơn)
Thiết lập KIỂU CHỮ
Khái niệm font chữ & nhóm font chữ
Font chữ chính là kiểu chữ, mẫu mã của chữ. Ví dụ, một số font chữ quen thuộc như: Times New Roman, Arial, Lucida Console,....
Các font chữ có cùng một vài nét tương đồng nào đó về hình dáng sẽ được xếp chung một nhóm.
Có ba nhóm font chữ cơ bản là:
- Serif
- Sans-Serif
- Monospace
Bảng dưới đây là tất cả các font chữ thuộc nhóm Serif:
Font chữ | Ví dụ |
---|---|
Georgia | This is a heading This is a paragraph |
Palatino Linotype Book Antiqua Palatino | This is a heading This is a paragraph |
Times New Roman Times | This is a heading This is a paragraph |
serif | This is a heading This is a paragraph |
Bảng dưới đây là tất cả các font chữ thuộc nhóm Sans-Serif:
Font chữ | Ví dụ |
---|---|
ArialHelvetica | This is a heading This is a paragraph |
Arial BlackGadget | This is a heading This is a paragraph |
Comic Sans MScursive | This is a heading This is a paragraph |
ImpactCharcoal | This is a heading This is a paragraph |
Lucida Sans UnicodeLucida Grande | This is a heading This is a paragraph |
TahomaGeneva | This is a heading This is a paragraph |
Trebuchet MSHelvetica | This is a heading This is a paragraph |
VerdanaGeneva | This is a heading This is a paragraph |
sans-serif | This is a heading This is a paragraph |
Bảng dưới đây là tất cả các font chữ thuộc nhóm Monospace:
Font chữ | Ví dụ |
---|---|
Courier NewCourier | This is a heading This is a paragraph |
Lucida ConsoleMonaco | This is a heading This is a paragraph |
monospace | This is a heading This is a paragraph |
Cách thiết lập kiểu chữ cho văn bản
Để thiết lập kiểu chữ cho văn bản, ta sử dụng thuộc tính font-family với giá trị là tên font chữ.
Ví dụ: p { font-family: Comic Sans MS; } Xem ví dụKhông phải mọi trình duyệt đều hỗ trợ hết tất cả các font chữ phía trên.
Để phòng trường hợp khi ta thiết lập font chữ mà trình duyệt không hỗ trợ dẫn đến việc hiển thị không như ý, ta sẽ thiết lập thêm vài font chữ khác để se cua (nếu font một không được hỗ trợ thì sẽ đến font hai, nếu font hai không được hỗ trợ thì đến font ba,....)
Ví dụ: p { font-family: "Comic Sans MS", cursive, sans-serif; } Xem ví dụLưu ý:
- Các font chữ phải được ngăn cách nhau bởi dấu phẩy.
- Các font chữ có nhiều hơn một từ phải được đặt bên trong cặp dấu ngoặc kép " " hoặc ngoặc đơn ' '
- Font chữ cuối cùng nên là tên nhóm font chữ, vì chắc chắn tên nhóm font chữ sẽ được mọi trình duyệt hỗ trợ
Từ khóa » Các Font Chữ Trong Html
-
20 Web Font HTML Tốt Nhất Năm 2022 - Hostinger
-
Các Font Chữ Đẹp Trong Html, Chọn Font Chữ Đẹp Cho Website
-
Gợi ý 10 Font Chữ Cho Website đẹp Nhất 2021 & Lưu ý Khi Chọn
-
Font | Tag Html | Học Web Chuẩn
-
[Học HTML] Các Thẻ định Dạng Chữ Viết Và Văn Bản - Thạch Phạm
-
Các Font Tham Khảo Trong HTML
-
Các Font Trong HTML
-
Top 15 Font Chữ Phổ Biến Trong Thiết Kế Web - Gõ Tiếng Việt
-
Các Font Chữ Trong Html
-
Cách định Dạng Văn Bản Bằng Thẻ Font Trong HTML
-
Bài 10: Cách Sử Dụng Font Trong Html Và Css - Góc Làm Web
-
Chọn FONT CHỮ ĐẸP Cho Website | 𝕋ư 𝕧ấ𝕟 »【Tất Tần Tật】
-
Thiết Lập Font Trong HTML, Thẻ Font Trong HTML - Hoclaptrinh