Thuộc Tính Font-size Font-style Font-weight Font-variant
Có thể bạn quan tâm
- 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
font-size trong css - cỡ chữ
Thuộc tính font-size trong CSS để thiết lập cỡ chữ.
font-size: size;Trong đó size là cỡ font chữ, giá trị này có thể là:
- Cỡ chữ tuyệt đối so với cỡ chữ mặc định (medium), gồm các giá trị: 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, 12pt, 1em ... (xem các đơn vị CSS)
- Số phần trăm, ví dụ 80% - là cỡ font chữ so với phần tử cha
font-size sử dụng các giá trị tuyệt đối như small, medium, large ...
Các dòng chữ, văn bản thông thường (text trong các phần tử trừ heading h1 - h6) nếu không có thiết lập về cỡ chữ thì cỡ chữ mặc định là 16px và giá trị có tên medium. Tương tự có các cỡ: xx-small (9px), x-small (10px), small (13px), medium, large (18px), x-large (24px), xx-large (32px), xxx-large (48px).
Ví dụ có HTML và CSS như sau:
<style> .small { font-size: small; } .medium { font-size: medium; } .large { font-size: large;} .xlarge { font-size: x-large;} </style> <p class="small">Đoạn văn này có chữ nhỏ</p> <p class="medium">Đoạn văn chữ trung bình (mặc định)</p> <p class="large">Đoạn văn chữ lớn</p> <p class="xlarge">Đoạn văn chữ rất lớn</p>Kết quả: (biên tập code trên để xem thay đổi)
font-size với cỡ chữ chỉ rõ theo đơn vị px, em, rem ...
Bạn có thể chỉ ra cụ thể cỡ chữ cụ thể kèm đơn vị (đơn vị tuyệt đối như mm, cm, px, in, px và đơn vị tương đối như em, rem ...). Các loại đơn vị này được nói rõ trong Đơn vị chiều dài trong CSS.
h1 { font-size: 20px; }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ường (chuyển từ nghiêng sang bình thường)
- italic chữ nghiêng - in nghiêng css (font phải có hỗ trợ phiên bản in nghiêng)
- oblique 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). Cũng tuỳ thuộc loại font chữ nạp vào, mà những thiết lập này có tác dụng hay không.
<style> .light { font-weight: lighter;} .bold { font-weight: bold;} .fontw600 { font-weight: 600;} </style> <p class="light">Font chữ cỡ "lighter".</p> <p class="bold">Font chữ "bold" .</p> <p class="fontw600">Font chữ có độ đậm 600.</p>Kết quả: (biên tập code trên để xem thay đổi)
font-variant phát sinh small-cap
Thuộc tính font-variant để biến đổi font chữ về dạng small-cap. Đó là chữ IN HOA của một font chữ, nhưng là phiên bản chiều cao chữ thu về nhỏ hơn sao cho bằng chiêu cao chữ in thường.
<style> .fv-normal { font-variant: normal; } .fv-smallcaps { font-variant: small-caps; } </style> <p class="fv-normal">đây là dòng chữ bình thường normal.</p> <p class="fv-smallcaps">đây là dòng chữ thiết lập phát sinh small-caps.</p>Kết quả: (biên tập code trên để xem thay đổi)
Mục lục bài viết Cỡ chữ - font-sizeKiểu chữ - font-styleDày mỏng của chữ font-weightBiến đổi chữ với font-variant ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mớiTừ khóa » Font Chữ đậm Trong Css
-
Thuộc Tính In đậm Trong CSS Và Cách Sử Dụng - Blog | Got It AI
-
Các Thuộc Tính định Dạng FONT CHỮ Trong CSS - Web Cơ Bản
-
Làm Thế Nào để Kết Hợp Chữ In đậm Và In Nghiêng Trong CSS?
-
Thuộc Tính Font | CSS | Học Web Chuẩn
-
Định Dạng Font Trong CSS, Font-family, Weight, Style ... - Hoclaptrinh
-
Các Thuộc Tính Định Dạng Font Chữ Trong Css
-
Sử Dụng Font Trong CSS | Lê Vũ Nguyên Dạy Học Lập Trình
-
Font Trong CSS - Comdy
-
In đậm Chữ Trong Css
-
Phông Chữ CSS - CodeHub
-
Bài 13: Phông Chữ Trong CSS (CSS Fonts) | Tìm ở đây
-
Các Thuộc Tính Tác động Vào Font Chữ Trong CSS
-
Thuộc Tính Font Trong CSS - Thủ Thuật
-
In đậm Chữ Trong Css | Thích-ngủ.vn