- Cỡ chữ – font-size
- Kiểu chữ – font-style
- Dày mỏng của chữ font-weight
- Biến đổi chữ với font-variant
Tóm Tắt
Cỡ font chữ với thuộc tính font-size trong CSS
Thuộc tính font-size trong CSS thiết lập cỡ chữ. Các giá trị font-size có thể nhận là:
- Các cỡ chữ tuyệt đối căn cứ theo cỡ chữ mặc định gồm: xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
- Chỉ ra kích
thước theo đơn vị mong muốn như 14px (xem các đơn vị CSS) - Chỉ ra giá trị phần trăm so với font chữ phần tử cha, như
80%
font-size sử dụng các giá trị tuyệt đối như small, large
Ví dụ có HTML và CSS như sau:
Kết quả: (biên tập code trên để xem thay đổi)
font-size cỡ chữ chỉ rõ theo đơn vị px, em
Bạn có thể chỉ ra cụ thể cỡ chữ với một giá trị
theo đơn vị pixel (px
) cũng như đơn vị em
. Đơn vị em
là thiết lập đơn vị theo quan hệ tương đối. Nếu bạn chưa thiết lập cỡ chỡ ở đâu trên trang thì mặc định cỡ chữ là 16px
tương đương với 1em
Như vậy để chuyển đổi px sang em dùng công thức: em = pixel/16
h2 { font-size: 20px; }
Tương đương với:
h2 { font-size: 1.25em; }
font-style kiểu chữ thẳng,chữ nghiêng trong CSS HTML
Thuộc tính font-style trong css dùng để thiết lập kiểu chữ. Với các giá trị:
normal
kiểu chữ bình
thườngitalic
chữ nghiêng – in nghiêng cssoblique
nghiêng (có thể thiết lập độ nghiêng tuy nhiên tùy thuộc vảo font chữ có thiết lập được không)
Kết quả: (biên tập code trên để xem thay đổi)
font-weight thiết lập độ dày, mỏng của chữ trong HTML CSS
Thuộc tính font-weight trong CSS thiết lập độ dày mỏng (đậm, nhạt) của chữ, nó có thể nhận các giá trị như normal
, bold
, bolder
, lighter
hoặc nhận giá trị số từ 1 đến 1000. (400 tương tương
normal, 700 tương đương bold – in đậm css).
Kết quả: (biên tập code trên để xem thay đổi)
font-variant
để biến đổi font chữ, có thể nhận các giá trị: normal, small-caps
Kết quả: (biên tập code trên để xem thay đổi)
1) Thuộc tính font-weight trong CSS
– Thuộc tính font-weight dùng để thiết lập việc văn bản có được “in đậm” hay không.
– Ví dụ:
2) Cách sử dụng thuộc tính font-weight trong CSS
– Để sử dụng thuộc tính font-weight, ta dùng cú pháp như sau:
font-weight: normal|bold|initial|inherit;
– Trong đó, ta thấy giá trị của thuộc tính font-weight có thể được xác định bởi một trong bốn loại:
normal
– Văn bản nằm bên trong phần tử không được in đậm.
Xem ví dụ
bold
– Văn bản nằm bên trong phần tử được in đậm.
initial
– Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính font-weight có giá trị là normal)
Xem ví dụ
inherit
– Kế thừa giá trị thuộc tính font-weight từ phần tử cha của nó.
Xem ví dụ
Ở 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
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ụArial
Helvetica
This is a heading
This is a paragraph
Arial Black
Gadget
This is a heading
This is a paragraph
Comic Sans MS
cursive
This is a heading
This is a paragraph
Impact
Charcoal
This is a heading
This is a paragraph
Lucida Sans Unicode
Lucida Grande
This is a heading
This is a paragraph
Tahoma
Geneva
This is a heading
This is a paragraph
Trebuchet MS
Helvetica
This is a heading
This is a paragraph
Verdana
Geneva
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 New
Courier
This is a heading
This is a paragraph
Lucida Console
Monaco
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ữ.
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,….)
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ợ