Định dạng thiết lập cỡ chỡ với font-size, kiểu chữ thẳng nghiêng với font-style, chữ in đậm nhạt với font-weight trong CSS
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
h1 { font-size: 20px; }
Tương đương với:
h1 { 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
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)
ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB
Đăng ký nhận bài viết mới