HTML - Fonts: A Beginner's Guide to Styling Text on the Web

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của các phông chữ HTML. Là người dạy máy tính ở khu phố của bạn, tôi sẽ hướng dẫn bạn qua những thông tin chi tiết về cách làm cho văn bản web của bạn trông tuyệt vời. Hãy bắt đầu nhé!

HTML - Fonts

Phông chữ HTML là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu chúng ta muốn nói gì khi nhắc đến "phông chữ" trong HTML. Nói một cách đơn giản, phông chữ là các phong cách văn bản mà bạn thấy trên trang web. Chúng có thể lớn, nhỏ, đậm, nghiêng hoặc thậm chí là các phong cách chữ thảo. HTML cung cấp cho chúng ta cách để kiểm soát cách văn bản của chúng ta trông như thế nào, làm cho trang web của chúng ta hấp dẫn hơn và dễ đọc hơn.

Phông chữ an toàn cho web

Bây giờ, hãy nói về một khái niệm gọi là "Phông chữ an toàn cho web". Hãy tưởng tượng bạn đang viết một lá thư cho bạn bè. Bạn muốn chắc chắn rằng họ có thể đọc được, phải không? Phông chữ an toàn cho web giống như việc sử dụng một phong cách chữ viết phổ biến mà mọi người đều hiểu.

Phông chữ an toàn cho web là những phông chữ có thể có trên hầu hết các máy tính và thiết bị. Bằng cách sử dụng những phông chữ này, chúng ta có thể đảm bảo rằng trang web của chúng ta sẽ có的外观相似 across different systems.

Dưới đây là bảng một số phông chữ an toàn cho web phổ biến:

Tên Phông	Ví dụ
Arial	This is Arial
Verdana	This is Verdana
Helvetica	This is Helvetica
Times New Roman	This is Times New Roman
Courier	This is Courier

Các ví dụ về phông chữ HTML

Hãy cùng làm quen với một chút mã! Dưới đây là một vài ví dụ về cách chúng ta có thể sử dụng phông chữ trong HTML:

Ví dụ 1: Cài đặt phông chữ cơ bản

<p style="font-family: Arial, sans-serif;">Văn bản này được viết bằng phông Arial.</p>

Trong ví dụ này, chúng ta đang yêu cầu trình duyệt hiển thị văn bản bằng phông Arial. Phần "sans-serif" là một lựa chọn dự phòng trong trường hợp Arial không có trên thiết bị của người dùng.

Ví dụ 2: Sử dụng nhiều phông chữ

<p style="font-family: 'Times New Roman', Times, serif;">Văn bản này có thể là Times New Roman, Times hoặc một phông chữ serif.</p>

Ở đây, chúng ta cung cấp nhiều lựa chọn phông chữ. Trình duyệt sẽ cố gắng sử dụng Times New Roman trước, sau đó là Times nếu lựa chọn đầu tiên không có, và cuối cùng là bất kỳ phông chữ serif nào nếu cả hai lựa chọn trước không có.

Ví dụ 3: Kết hợp các phong cách phông chữ

<p style="font-family: Arial, sans-serif; font-size: 18px; font-weight: bold;">Văn bản này là Arial, lớn hơn và đậm.</p>

Trong ví dụ này, chúng ta không chỉ thiết lập phông chữ mà còn cả kích thước và trọng lượng của nó. Điều này cho phép chúng ta kiểm soát cách văn bản của chúng ta xuất hiện.

Đặt màu chữ

Bây giờ, hãy thêm một chút màu sắc vào cuộc sống... à, tôi có ý là vào văn bản của chúng ta!

Ví dụ 4: Màu chữ

<p style="color: blue;">Văn bản này có màu xanh!</p>

Đơn giản phải không? Chúng ta sử dụng thuộc tính color để đặt màu văn bản.

Ví dụ 5: Sử dụng màu hexa

<p style="color: #FF5733;">Văn bản này có màu tùy chỉnh.</p>

Màu hexa cho phép chúng ta kiểm soát chính xác màu sắc. Trong trường hợp này, chúng ta sử dụng một màu cam cụ thể.

Element HTML (Đã lỗi thời)

Bây giờ, tôi có một câu chuyện nhỏ cho bạn. Ngày xưa, có một element HTML叫做 <basefont>. Nó được sử dụng để đặt phông chữ mặc định cho toàn bộ tài liệu HTML. Tuy nhiên, giống như nhiều thứ trong công nghệ, nó đã trở nên lỗi thời và không còn được hỗ trợ trong HTML5.

Thay vì <basefont>, chúng ta bây giờ sử dụng CSS để đặt phông chữ mặc định cho toàn bộ tài liệu. Dưới đây là cách chúng ta làm:

<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333333;
}
</style>

Mã CSS này, đặt trong phần <head> của tài liệu HTML của bạn, đặt phông chữ mặc định (Arial), kích thước (16 pixel) và màu sắc (màu xám tối) cho tất cả văn bản trong phần <body> của trang web của bạn.

Kết luận

Và thế là chúng ta đã cùng nhau khám phá thế giới của phông chữ HTML, từ các lựa chọn an toàn cho web đến việc đặt màu sắc và phong cách. Nhớ rằng, chìa khóa để thành thạo phông chữ là thực hành. Hãy thử nghiệm các kết hợp khác nhau, chơi với kích thước và màu sắc, và xem điều gì tốt nhất cho trang web của bạn.

Khi kết thúc, đây là một lời khuyên từ những năm dạy học của tôi: Đừng sợ thử nghiệm! Sự đẹp đẽ của việc phát triển web là bạn luôn có thể Undo và thử lại. Vậy nên, hãy dũng cảm với phông chữ của bạn, và chúc bạn vui vẻ khi编码!

Credits: Image by storyset