1. Tại sao phải lựa chọn phông chữ ?

Việc lựa chọn phông chữ đúng cho trang web của bạn rất quan trọng

Việc lựa chọn đúng phông chữ có tác động rất lớn đến cách người đọc trải nghiệm một trang web

Phông chữ phù hợp có thể tạo ra bản sắc riêng cho thương hiệu của bạn

Sử dụng phông chữ dẽ đọc là điều quan trọng. Phông chữ làm tăng giá trị cho văn bản của bạn . Điều quan trọng nữa là chọn màu và kích thước văn bản chính xác cho phông chữ

2. Họ của phông chữ chung trong CSS

Trong CSS có năm họ phông chữ chung:

• Phông chữ Serif có một nét nhỏ ở các cạnh của mỗi chữ cái. Chúng tạo ra một cảm giác trang trọng và sang trọng
• Phông chữ Sans-serif có các đường nét rõ ràng (không kèm theo các nét nhỏ). Chúng tạo ra một cái nhìn hiện đại và tối giản
• Phông chữ Monospace – ở đây tất cả các chữ cái có cùng chiều rộng cố định. Chúng tạo ra một cái nhìn máy móc
• Phông chữ Cursive bắt chước chữ viết tay của con người
• Phông chữ Fantasy là phông chữ trang trí / vui tươi

3. Cách thêm phông chữ chữ trong CSS

Trong CSS, ta sử dụng thuộc tính font-family để chỉ định phông chữ của văn bản

Thuộc tính font-family nên có nhiều tên phông chữ như một hệ thống dự phòng , để đảm bảo khả năng tương thích tối đa giữa các trình duyệt/ hệ điều hành. Bắt đầu với phông chữ bạn muốn và kết thúc bằng một họ chung (để cho phép trình duyệt chọn một phông chữ tương tự trong họ chung, nếu không có sẵn các phông chữ khác). Tên phông chữ nên được phân tách bằng dấu phẩy

Lưu ý: Nếu tên phông chữ có nhiều hơn một từ, nó phải nằm trong ngoặc kép, ví dụ: “Time New Roman”

Ví dụ:

4. Tạo kiểu cho phông chữ trong CSS

4.1 In nghiêng văn bản

Thuộc tính font-style được sử dụng để xác định văn bản in nghiêng

Thuộc tính này có ba giá trị:

• normal – Văn bản được hiển thị bình thường
• italic – Văn bản được in nghiêng
• oblique – Văn bản xiên (xiên rất giống với in nghiêng, nhưng ít được hỗ trợ hơn)

Ví dụ:

4.2 Độ đậm của văn bản

Thuộc tính font-weight được sử dụng để xác định độ đậm của văn bản

Ví dụ:

4.3 Viết hoa chữ cái

Thuộc tính font-variant dùng để biến chữ thường thành chữ hoa

Tất cả các chữ cái thường được chuyển đổi thành chữ hoa. Tuy nhiên, các chữ hoa đã chuyển đổi sẽ có kích thước phông chữ nhỏ hơn các chữ hoa gốc trong văn bản

Ví dụ:

4.4 Thay đổi cỡ chữ

Thuộc tính font-size được sử dụng để xác định kích thước của văn bản

Ví dụ:

4.5 Câu lệnh rút gọn

Để viết tắt các thuộc tính

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

Ta sử dụng thuộc tính font

Lưu ý: Các giá trị font-size và font-family là bắt buộc. Nếu thiếu một trong các giá trị khác, giá trị mặc định của chúng sẽ được sử dụng

Ví dụ: