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.
Khi nói đến Font trong HTML, chúng ta liên tưởng đến các thuộc tính của văn bản như kiểu, kích cỡ và màu văn bản. Font phụ thuộc hoàn toàn vào máy tính và trình duyệt được sử dụng để xem trang web, nhưng bạn có thể sử dụng thẻ HTML <font> để thiết lập kiểu văn bản, kích cỡ văn bản 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 kiểu kích cỡ và màu cho tất cả văn bản của tài liệu HTML.
Thẻ font có 3 thuộc tính là size, color, face. Để 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ẻ <font>. Văn bản sẽ giữ nguyên cho đến khi bạn đóng thẻ với </font>. Với thẻ <font>, bạn có thể thay đổi một hoặc tất cả thuộc tính của nó.
Nội dung chính
Thiết lập kích cỡ (size) 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ụ thiết lập kích cỡ font trong HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Thiết lập kích cỡ 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>
Kết quả sau:
Font size="2"
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"
Thiết lập 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 <font size="+n"> hoặc <font size="-n">
Ví dụ thiết lập kích cỡ font dựa vào kích cỡ Font hiện tại
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Thiết lập kích cỡ 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>
Kết quả:
Font size="+1"
Font size="+2"
Font size="+3"
Font size="+4"
Thiết lập font face trong HTML
Bạn có thể thiết lập font face bằng cách sử dụng thuộc tính face nhưng nếu người dùng web chưa 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 font face mặc định áp dụng cho máy của họ.
Ví dụ thiết lập font face trong HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <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>
Kết quả:
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 font face, phân biệt bằng dấu phảy.
<font face="arial,helvetica"></font> <font face="Lucida Calligraphy,Comic Sans MS,Lucida Console"></font>
Khi trang web của bạn được tải, trình duyệt của người dùng sẽ hiện thị font face đầ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.
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.
Ví dụ thiết lập màu Font trong HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Thiết lập màu font trong HTML</title> </head> <body> <font color="#FF00FF">Đoạn văn bản này có màu hồng.</font><br/> <font color="red">Đoạn văn bản này có màu đỏ.</font> </body> </html>
Nó sẽ cho kết quả sau:
Đoạn văn bản này có màu đỏ.
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à kiểu font mặc định cho bất kỳ phần nào trong tài liệu. Tuy nhiên, phần tử <font> 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ụ basefont trong HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Thiết lập màu bởi sử dụng basefont</title> </head> <body> <basefont face="arial, verdana, sans-serif" size="2" color="#ff0000"> <p>Đây là font mặc định của trang</p> <hr> <h2>Ví dụ sử dụng phần tử <basefont></h2> <p><font size="+2" color="gray"> Ví dụ các thiết lập font. </font></p> <p><font face="calibri" size="-1" color="#000000"> Ví dụ calibri font. </font></p> <p>Đây là font mặc định của trang</p> </body> </html>
Kết quả:
