Các Font trong HTML

Các font đóng vai trò rất quan trọng trong việc tạo ra một Website thân thiện với người sử dụng, giúp họ dễ theo dõi nội dung hơn. Bề mặt và màu font phụ thuộc hoàn toàn vào máy tính và trình duyệt được sử dụng để quan sát trang web nhưng bạn có thể sử dụng thẻ HTML  để thêm kiểu, kích cỡ và màu cho văn bản trên web. Bạn cũng có thể sử dụng thẻ <basefont> để thiết lập cùng một cỡ, bề mặt, và màu cho tất cả văn bản của bạn.

Thẻ font có 3 thuộc tính là size, color, face để xác định font. Để thay đổi bất kỳ thuộc tính font nào tại bất kỳ thời gian nào trong trang web của bạn, bạn sử dụng thẻ . Văn bản sẽ giữ nguyên cho đến khi bạn đóng thẻ với . Với thẻ , bạn có thể thay đổi một hoặc tất cả thuộc tính của nó.

Ghi chú: Hai thẻ font và basefont là thẻ cũ và chúng đang được cho rằng sẽ bị thay đổi trong các phiên bản mới của HTML. Vì thế bạn không nên sử dụng chúng nhiều, chúng tôi đề nghị bạn nên sử dụng các kiểu CSS để xác định font cho mình. Nhưng vì mục đích học tập, chương này chúng tôi vẫn giải thích chi tiết các thẻ này.

Thiết lập kích cỡ Font trong HTML

Bạn sử dụng thuộc tính size để thiết lập kích cỡ cho nội dung. Dãy giá trị được chấp nhận là từ 1 (nhỏ nhất) đến 7 (lớn nhất). Cỡ mặc định cho font là 3.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<title>Thiet lap kich co font trong HTML</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>

Nó sẽ cho kết quả sau:

Font size="1"
Font size="2"
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"

Xác định kích cỡ font dựa vào kích cỡ Font hiện tại

Bạn có thể xác định cỡ lớn hơn hay nhỏ hơn bao nhiêu so với cỡ hiện tại. Bạn sử dụng  hoặc 

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Xac dinh kich co font trong HTML</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>

Đoạn code trên sẽ cho kết quả là:

Font size="-1"
Font size="+1"
Font size="+2"
Font size="+3"
Font size="+4"

Thiết lập bề mặt Font trong HTML - Font Face trong HTML

Bạn có thể thiết lập bề mặt font bằng cách sử dụng thuộc tính face nhưng bạn cần phải biết rằng nếu người sử dụng trang mà chưa chạy cài đặt font, họ sẽ không thể nhìn thấy nó. Và người dùng sẽ chỉ nhìn thấy bề mặt font mặc định áp dụng cho máy của họ.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Font Face trong HTML</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>

Nó sẽ cho kết quả sau:

Times New Roman
Verdana
Comic Sans MS
WildWest
Bedrock

Thiết lập danh sách Font Face trong HTML

Một người dùng sẽ chỉ có thể nhìn thấy font của bạn nếu họ đã cài đặt font đó trong máy. Vì thế, bạn có thể xác định các bề mặt font xen kẽ nhau bằng cách liệt kê các tên bề mặt font, phân biệt bằng dấu phảy.

<font face="arial,helvetica">
<font face="Lucida Calligraphy,Comic Sans MS,Lucida Console">

Khi trang web của bạn được tải, trình duyệt của khách sử dụng sẽ hiện thị bề mặt font đầu tiên. Nếu không có font nào được cài đặt, nó sẽ hiển thị bề mặt font mặc định là Times New Roman.

Ghi chú: Kiểm tra danh sách đầy đủ của Một số Standard Font trong HTML.

Thiết lập màu Font trong HTML

Bạn có thể thiết lập màu cho font bằng cách sử dụng thuộc tính color. Bạn có thể xác định màu mà bạn muốn bằng cách sử dụng tên màu hoặc mã thập lục phân của màu.

Ghi chú: Kiểm tra danh sách đầy đủ của Màu và mã màu trong HTML.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Thiet lap mau font trong HTML</title>
</head>
<body>
<font color="#FF00FF">Phan van ban nay co mau hong.</font><br />
<font color="red">Phan van ban nay co mau do.</font>
</body>
</html>

Nó sẽ cho kết quả sau:

Phan van ban nay co mau hong.
Phan van ban nay co mau do.

Phần tử <basefont> trong HTML

Phần tử <basefont> này được sử dụng để thiết lập một kích cỡ, màu, và bề mặt font mặc định cho bất kỳ phần nào trong tài liệu. Tuy nhiên, phần tử có quyền ưu tiên cao hơn và sẽ ghi đè các thiết lập trong <basefont>.

Thẻ <basefont> cũng nhận các thuộc tính là màu, kích cỡ và bề mặt và phần tử này cũng sẽ hỗ trợ cách xác định kích cỡ fotn dựa vào kích cỡ font hiện tại (bằng cách đưa vào giá trị +1 cho cỡ lớn hơn hoặc -2 cho cỡ nhỏ hơn).

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Thiet lap mau boi su dung basefont</title>
</head>
<body>
<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">
<p>Day la font mac dinh cua trang.</p>

<h2>Vi du phan tu &lt;basefont&gt;</h2>
<p><font size="+2" color="darkgray">
Vi du cac thiet lap boi su dung phan tu font.
</font></p>

<p><font face="courier" size="-1" color="#000000">
Vi du courier font.
</font></p>

</body>
</html>

Nó sẽ cho kết quả sau:

Day la font mac dinh cua trang.