HTML - Phông chữ
Phông chữ đóng một vai trò rất quan trọng trong việc làm cho một trang web thân thiện hơn với người dùng và tăng khả năng đọc nội dung. Khuôn mặt và màu sắc phông chữ phụ thuộc hoàn toàn vào máy tính và trình duyệt đang được sử dụng để xem trang của bạn nhưng bạn có thể sử dụng HTML<font>để thêm kiểu, kích thước và màu sắc cho văn bản trên trang web của bạn. Bạn có thể sử dụng một<basefont> để đặt tất cả văn bản của bạn có cùng kích thước, khuôn mặt và màu sắc.
Thẻ phông chữ có ba thuộc tính được gọi là size, colorvà faceđể tùy chỉnh phông chữ của bạn. Để thay đổi bất kỳ thuộc tính phông chữ bất kỳ lúc nào trong trang web của bạn, chỉ cần sử dụng thẻ <font>. Văn bản theo sau sẽ vẫn thay đổi cho đến khi bạn đóng bằng thẻ </font>. Bạn có thể thay đổi một hoặc tất cả các thuộc tính phông chữ trong một thẻ <font>.
Note−Các thẻ phông chữ và thẻ basefont không được dùng nữa và nó sẽ bị xóa trong phiên bản HTML trong tương lai. Vì vậy, chúng không nên được sử dụng thay vào đó, bạn nên sử dụng các kiểu CSS để thao tác với phông chữ của bạn. Nhưng vẫn nhằm mục đích học tập, chương này sẽ giải thích chi tiết về các thẻ font và basefont.
Đặt kích thước phông chữ
Bạn có thể đặt kích thước phông chữ nội dung bằng cách sử dụng sizethuộc tính. Phạm vi giá trị được chấp nhận là từ 1 (nhỏ nhất) đến 7 (lớn nhất). Kích thước mặc định của phông chữ là 3.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Kích thước phông chữ tương đối
Bạn có thể chỉ định bao nhiêu kích thước lớn hơn hoặc bao nhiêu kích thước nhỏ hơn kích thước phông chữ đặt trước. Bạn có thể chỉ định nó như<font size = "+n"> hoặc là <font size = "−n">
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đặt mặt phông chữ
Bạn có thể đặt khuôn mặt phông chữ bằng thuộc tính khuôn mặt nhưng lưu ý rằng nếu người dùng đang xem trang không được cài đặt phông chữ, họ sẽ không thể nhìn thấy nó. Thay vào đó, người dùng sẽ thấy mặt phông chữ mặc định áp dụng cho máy tính của người dùng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Chỉ định các mặt phông chữ thay thế
Khách truy cập sẽ chỉ có thể thấy phông chữ của bạn nếu họ đã cài đặt phông chữ đó trên máy tính của họ. Vì vậy, có thể chỉ định hai hoặc nhiều lựa chọn thay thế mặt phông chữ bằng cách liệt kê tên mặt phông chữ, được phân tách bằng dấu phẩy.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">Khi trang của bạn được tải, trình duyệt của họ sẽ hiển thị mặt phông chữ đầu tiên có sẵn. Nếu không có phông chữ nhất định nào được cài đặt, thì nó sẽ hiển thị phông chữ mặc định là Times New Roman .
Note - Kiểm tra danh sách đầy đủ HTML Standard Fonts.
Đặt màu phông chữ
Bạn có thể đặt bất kỳ màu phông chữ nào bạn thích bằng cách sử dụng thuộc tính color . Bạn có thể chỉ định màu bạn muốn bằng tên màu hoặc mã thập lục phân cho màu đó.
Note - Bạn có thể kiểm tra danh sách đầy đủ HTML Color Name with Codes.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Phần tử <basefont>
Phần tử <basefont> phải đặt kích thước phông chữ, màu sắc và kiểu chữ mặc định cho bất kỳ phần nào của tài liệu không được chứa trong thẻ <font>. Bạn có thể sử dụng các phần tử <font> để ghi đè cài đặt <basefont>.
Thẻ <basefont> cũng có các thuộc tính màu sắc, kích thước và khuôn mặt và nó sẽ hỗ trợ cài đặt phông chữ tương đối bằng cách cung cấp cho kích thước giá trị +1 cho một kích thước lớn hơn hoặc −2 cho hai kích thước nhỏ hơn.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size = "+2" color = "darkgray">
This is darkgray text with two sizes larger
</font>
</p>
<p><font face = "courier" size = "-1" color = "#000000">
It is a courier font, a size smaller and black in color.
</font>
</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau: