- 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
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à:
Nội dung chính
- Cỡ font chữ với thuộc tính font-size trong CSS
- font-size sử dụng các giá trị tuyệt đối như small, large
- font-size cỡ chữ chỉ rõ theo đơn vị px, em
- font-style kiểu chữ thẳng,chữ nghiêng trong CSS HTML
- font-weight thiết lập độ dày, mỏng của chữ trong HTML CSS
- 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ị:
normalkiểu chữ bình thườngitalicchữ nghiêng - in nghiêng cssobliquenghiê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]
- 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
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ị:
normalkiểu chữ bình thườngitalicchữ nghiêng - in nghiêng cssobliquenghiê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]