VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

HTML Tuts

HTML là gì? Các thẻ HTML Định dạng trong HTML Tiêu đề trong HTML Đoạn văn trong HTML Liên kết trong HTML Ảnh trong HTML Table trong HTML Danh sách trong HTML Danh sách có thứ tự Danh sách không có thứ tự Danh sách mô tả Form trong HTML Thuộc tính Style Comment trong HTML Bảng màu trong HTML Thuộc tính chung trong HTML

Các thẻ HTML

Thẻ HTML Marquee Thẻ HTML Textarea HTML DOCTYPE Thẻ HTML Title Thẻ HTML meta Thẻ HTML Div Thẻ HTML Pre Thẻ HTML Code Thẻ HTML Label Thẻ HTML Input Thẻ HTML Button Thẻ HTML HR Thẻ HTML BR Thẻ HTML Script Thẻ HTML NoScript Thẻ HTML b Thẻ HTML Quotes

Bài học HTML

Text Link trong HTML Image Link trong HTML Email Link trong HTML Frame trong HTML Iframe trong HTML Block trong HTML Thiết lập màu nền (background) trong HTML Màu trong HTML Font trong HTML Thẻ embed - Đa phương tiện trong HTML Tạo chữ chạy (Marquee) trong HTML Style Sheet trong HTML Sử dụng Javascript trong HTML Layout trong HTML Tổng hợp thuộc tính trong HTML Sự kiện (Event) trong HTML Các Font tham khảo trong HTML Mã hóa ASCII trong HTML Bảng ASCII trong HTML Các thực thể HTML Mã hóa URL trong HTML Mã hóa các ngôn ngữ chuẩn ISO trong HTML Mã hóa ký tự trong HTML

Câu hỏi phỏng vấn

Phỏng vấn HTML
1 / 3
❮ ❯

Font trong HTML


Màu trong HTML
Thẻ embed - Đa phương tiện trong HTML

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ó.

Ghi chú: Hai thẻ font và basefont là thẻ cũ và chúng đang bị thay thế 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, bạn nên sử dụng CSS để thiết lập font.

Nội dung chính

  • Thiết lập kích cỡ (size) Font trong HTML
    • Ví dụ thiết lập kích cỡ font trong HTML
  • Thiết lập kích cỡ font dựa vào kích cỡ Font hiện tại
    • Ví dụ thiết lập kích cỡ font dựa vào kích cỡ Font hiện tại
  • Thiết lập font face trong HTML
    • Ví dụ thiết lập font face trong HTML
  • Thiết lập danh sách Font Face trong HTML
  • Thiết lập màu Font trong HTML
    • Ví dụ thiết lập màu Font trong HTML
  • Phần tử <basefont> trong HTML
    • Ví dụ basefont trong HTML

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="1"
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="+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ả:

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 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 hồng.
Đ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ả:


Màu trong HTML
Thẻ embed - Đa phương tiện trong HTML

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Liên kết css với htmlMã hóa ký tự trong HTMLMã hóa các ngôn ngữ chuẩn ISO trong HTMLMã hóa URL trong HTMLCác thực thể HTMLBảng ASCII trong HTMLMã hóa ASCII trong HTMLCác Font tham khảo trong HTMLSự kiện (Event) trong HTMLTổng hợp thuộc tính trong HTMLLayout trong HTMLSử dụng Javascript trong HTML

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml