Chào các bạn, hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Giuseart.com. Bài viết này sẽ giúp các bạn có cái nhìn tổng quát và biết thêm nhiều kiểu phông chữ trong CSS.
Thuộc tính phông chữ để làm gì ?
Thuộc tính phông chữ CSS xác định họ phông chữ, độ đậm, kích thước và kiểu văn bản.
Họ Phông Chữ CSS
- Gia đình chung chung – một nhóm họ phông chữ có giao diện tương tự (như “Serif” hoặc “Monospace”)
- Họ phông chữ : (như “Times New Roman” hoặc “Arial”)
Lưu ý: Trên màn hình máy tính, phông chữ sans-serif được coi là dễ đọc hơn phông chữ serif.
Họ Phông Chữ
Họ phông chữ của văn bản được đặt bằng thuộc tính font-family
Các font-family nên giữ nhiều tên phông chữ như một hệ thống “dự phòng”. Nếu trình duyệt không hỗ trợ phông chữ đầu tiên, nó sẽ thử phông chữ tiếp theo, v.v.
Bắt đầu với phông chữ bạn muốn và kết thúc bằng một gia đình chung, để cho trình duyệt chọn một phông chữ tương tự trong họ chung, nếu không có phông chữ nào khác.
Lưu ý : Nếu tên của họ phông chữ nhiều hơn một từ, nó phải nằm trong dấu ngoặc kép, như: “Times New Roman”.
Nhiều hơn một họ phông chữ được chỉ định trong danh sách được phân cách bằng dấu phẩy:
Ví dụ :
1 2 3 | p { font-family: "Times New Roman", Times, serif; } |
Kiểu Phông Chữ
Các font-style chủ yếu được sử dụng để xác định văn bản in nghiêng.
Thuộc tính này có ba giá trị:
- Bình thường – Văn bản được hiển thị bình thường
- In nghiêng – Văn bản được in nghiêng
- Xiên – Chữ “nghiêng” (xiên rất giống với chữ nghiêng, nhưng ít được hỗ trợ hơn)
Ví dụ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <style> p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; } </style> </head> <body> <p class="normal">Đây là đoạn văn bản chữ bình thường.</p> <p class="italic">Đây là đoạn văn bản chữ in nghiêng.</p> <p class="oblique">Đây là đoạn văn bản chữ in xiên.</p> </body> </html> |
Cỡ Chữ
Các font-size thiết lập kích thước của văn bản.
Việc có thể quản lý kích thước văn bản rất quan trọng trong thiết kế web. Tuy nhiên, bạn không nên sử dụng các điều chỉnh kích thước phông chữ để làm cho các đoạn trông giống như tiêu đề hoặc các tiêu đề trông giống như các đoạn văn.
Luôn sử dụng các thẻ HTML thích hợp, như <h1> – <h6> cho các tiêu đề và <p> cho các đoạn văn.
Giá trị kích thước phông chữ có thể là một kích thước tuyệt đối hoặc tương đối.
Kích thước tuyệt đối:
- Đặt văn bản thành kích thước được chỉ định
- Không cho phép người dùng thay đổi kích thước văn bản trong tất cả các trình duyệt (không phù hợp vì lý do trợ năng)
- Kích thước tuyệt đối hữu ích khi kích thước vật lý của đầu ra được biết
Kích thước tương đối:
- Đặt kích thước tương đối so với các yếu tố xung quanh
- Cho phép người dùng thay đổi kích thước văn bản trong trình duyệt
Lưu ý: Nếu bạn không chỉ định kích thước phông chữ, kích thước mặc định cho văn bản thông thường, như đoạn văn, là 16px (16px = 1em).
Đặt Kích Thước Phông Chữ Bằng Pixel
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <style> h1 { font-size: 40px; } h2 { font-size: 30px; } p { font-size: 14px; } </style> </head> <body> <h1>Tiêu đề 1</h1> <h2>Tiêu đề 2</h2> <p>Đây là một đoạn văn</p> </body> </html> |
Đặt Kích Thước Phông Chữ Với Em
- Để cho phép người dùng thay đổi kích thước văn bản (trong trình đơn trình duyệt), nhiều nhà phát triển sử dụng em thay vì pixel.
- Các đơn vị kích thước em được khuyến cáo bởi W3C.
- 1em bằng kích thước phông chữ hiện tại. Kích thước văn bản mặc định trong trình duyệt là 16px. Vì vậy, kích thước mặc định của 1em là 16px.
- Kích thước có thể được tính từ pixel đến em bằng công thức này: pixel / 16 = em
Ví dụ :
1 2 3 4 5 6 7 8 9 10 11 | h1 { font-size: 2.5em; /* 40px/16=2.5em */ } h2 { font-size: 1.875em; /* 30px/16=1.875em */ } p { font-size: 0.875em; /* 14px/16=0.875em */ } |
Trong ví dụ trên, kích thước văn bản trong em giống với ví dụ trước bằng pixel. Tuy nhiên, với kích thước em, có thể điều chỉnh kích thước văn bản trong tất cả các trình duyệt.
Tuy nhiên, vẫn còn một vấn đề với các phiên bản cũ của IE. Các văn bản sẽ trở nên lớn hơn nó nên khi thực hiện lớn hơn, và nhỏ hơn nó nên khi thực hiện nhỏ hơn.
Sử Dụng Kết Hợp Phần Trăm Và Em
Giải pháp hoạt động trong tất cả các trình duyệt, là đặt kích thước phông chữ mặc định theo phần trăm cho phần tử <body>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | body { font-size: 100%; } h1 { font-size: 2.5em; } h2 { font-size: 1.875em; } p { font-size: 0.875em; } |
Đoạn mã code hoạt động rất tốt. Nó cho thấy cùng một kích thước văn bản trong tất cả các trình duyệt, và cho phép tất cả các trình duyệt để phóng to hoặc thay đổi kích thước văn bản !
Trọng Lượng Phông Chữ
Các font-weight xác định trọng lượng của một phông chữ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <style> p.normal { font-weight: normal; } p.light { font-weight: lighter; } p.thick { font-weight: bold; } p.thicker { font-weight: 900; } </style> </head> <body> <p class="normal">Đây là đoạn văn bản.</p> <p class="light">Đây là đoạn văn bản.</p> <p class="thick">Đây là đoạn văn bản.</p> <p class="thicker">Đây là đoạn văn bản.</p> </body> </html> |
Kích Thước Phông Chữ Đáp Ứng
Kích thước văn bản có thể được thiết lập với một vw đơn vị, có nghĩa là “chiều rộng khung nhìn”.
Bằng cách đó kích thước văn bản sẽ theo kích thước của cửa sổ trình duyệt
Ví dụ :
1 | <h1 style="font-size:10vw">Hello World</h1> |
Chế độ xem là kích thước cửa sổ trình duyệt. 1vw = 1% chiều rộng khung nhìn. Nếu khung nhìn rộng 50cm, 1vw là 0,5cm.
Biến Thể Phông Chữ
Các font-variant quy định cụ thể hay không một văn bản sẽ được hiển thị trong một phông chữ mũ nhỏ.
Trong phông chữ nhỏ, tất cả các chữ cái thường được chuyển thành chữ hoa. Tuy nhiên, các chữ in hoa được chuyển đổi xuất hiện ở kích thước phông chữ nhỏ hơn các chữ in hoa gốc trong văn bản.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <style> p.normal { font-variant: normal; } p.small { font-variant: small-caps; } </style> </head> <body> <p class="normal">Tôi tên là Lê Văn Thạch.</p> <p class="small">Tôi tên là Lê Văn Thạch.</p> </body> </html> |
Bài viết tới đây là kết thúc rồi, bài này hơi dài nhưng qua bài này mình muốn các bạn hiểu được những thứ cơ bản về các phông chữ trong CSS để có thể áp dụng vào những bài tập đơn giản và các dự án sau này cho riêng mình. Cảm ơn các bạn đã xem bài viết. Hãy theo dõi những bài viết tiếp theo trong loạt bài hướng dẫn CSS cơ bản của Giuseart.com nhé !
Chia sẻ bài viết:
