You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. Chỉnh sửa font chữ đơn giản, nhanh gọn bằng thẻ Font trong HTML

Chỉnh sửa font chữ đơn giản, nhanh gọn bằng thẻ Font trong HTML

Kiểu Font cũng là một trong những chuyện mà bạn cần để tâm đến trong quá trình học HTML.

Xem thêm bài viết

Các bạn đang cảm thấy những Font chữ đang được dùng mặc định của các trình duyệt quá chán. Bạn muốn mang đến sự khác biệt dành cho từng đoạn văn trong trang web của bạn. Bạn muốn trang web phải thật đẹp mắt và gây ấn tượng ngay từ khi mở trang web trong lần đầu tiên. Bạn đừng vội chán nản vì có vẻ như mình vẫn chưa đủ vũ khí để làm điều này. Không phải là không có thứ “vũ khí” đó mà là bạn chưa trang bị cho bạn mà thôi. Hôm nay chúng ta sẽ cùng sắm sửa một loại “vũ khí” đủ sức giúp bạn thực hiện được điều mà bạn đang mong muốn.

Bạn muốn giải quyết vấn đề Font chữ. Chuyện nhỏ. Giải quyết trong vòng 30 giây.

Thẻ nào có thể định dạng lại Font chữ cho trang web?

Thật trùng hợp là thẻ này lại trùng tên với chính công dụng của nó. Thẻ mà mình đang đề cập đến chính là thẻ Font trong HTML. Thẻ này được xếp vào dạng cổ luôn rồi. Chúng đã được áp dụng từ khá lâu. Tuy vậy, hiện tại thẻ này không còn dùng nữa do chúng ta đã có CSS. CSS thay thế hầu hết những thẻ trang trí, định dạng font chữ. Hiện chúng ta vẫn chưa học CSS thế nên chúng ta sẽ học thẻ Font để giúp bạn định dạng lại Font chữ nhé!

Cú pháp thẻ Font

<font>Content</font>

Khá đơn giản. Cú pháp này chắc chắn không làm khó bạn. Thẻ này có thể được chèn vào hầu hết các thẻ khác. Thường thì thẻ này sẽ xuất hiện chung với thẻ P. Cú pháp thẻ là như thế nhưng bạn sẽ chẳng định dạng được Font nếu bạn thiếu đi những thuộc tính quen thuộc của thẻ này.

Thuộc tính Face : dùng để định dạng Font chữ trong HTML.

Thuộc tính Size: dùng để định dạng lại kích thước chữ trong trang tài liệu HTML.

Thuộc tính Color: dùng để định dạng màu sắc.

Nếu bình thường bạn ghi cú pháp này thì thẻ Font cũng sẽ giống như thẻ Span. Không có tác dụng. Và cũng không hiển thị bất cứ cái gì trên trình duyệt cả.

Thế nên chúng ta sẽ ghi thêm thuộc tính vào thẻ Font.

<font face= "...">Content</font>
<font size= "...">Content</font>
<font color= "...">Content</font>

Chúng ta còn có thể thêm nhiều thuộc tính vào một thẻ Font.

<font face= "..." size= "..." color= "...">Content</font>

Ví dụ

 

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        
    </head>
    <body>
        
        
           <font face="helvetica" color="#b300b3">
                 <p>
                    Zinedine Zidane một lần nữa cho thấy tài nghệ điều binh khiển tướng của mình trong chuyến hành quân đến El Molinon. Tại một trận chiến mà hầu hết quân tinh nhuệ đều vắng mặt, vị tướng trẻ người Pháp vẫn giúp đoàn quân áo trắng ca khúc khải hoàn trở về thánh địa Santiago Bernabeu.<br/>

                    Hãy nhìn vào con số thống kê để thấy màn trình diễn của Real ấn tượng như thế nào. Các học trò của Zidane <em>kiểm soát bóng 70%</em>, thực hiện <em>604 đường chuyền với độ chính xác lên tới 90%</em> và tung ra tổng cộng <span style="color: #ff1aff">17 pha dứt điểm</span>, tức trung bình trên 5 phút lại tung ra 1 pha dứt điểm. <br/>
            
                    <img src="images/zidane.jpg"  width="500" height="300" alt="Huấn luyện viên Zinedine Zidane"/> </br>
    
                    Những số liệu như vậy, trước đây chỉ được chứng kiến ở binh đoàn Barcelona dưới thời Pep Guardiola, những người đã thiết lập nên đế chế tiqui-taca mà chuyền bóng tới đâu cỏ không mọc nổi tới đấy. Chưa hết, chiến thắng của Real được ấn định chỉ 1 phút sau khi Zidane thực hiện thay đổi người chiến thuật. Thật là bậc kỳ tài. <br/>
                </p>

           </font>
        
    
    </body>
</html>

Ở ví dụ này chúng ta sẽ thay đổi font chữ và màu sắc của chữ. 

Kết quả ví dụ

Khi chưa có thuộc tính Face và Color

Khi đã có thuộc tính Face và Color.

 

Chúng ta sẽ thử thay đổi kích thước chữ trong ví du dưới đây.

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        
    </head>
    <body>
        
        
           <font face="helvetica" color="#b300b3" size="4">
                 <p>
                    Zinedine Zidane một lần nữa cho thấy tài nghệ điều binh khiển tướng của mình trong chuyến hành quân đến El Molinon. Tại một trận chiến mà hầu hết quân tinh nhuệ đều vắng mặt, vị tướng trẻ người Pháp vẫn giúp đoàn quân áo trắng ca khúc khải hoàn trở về thánh địa Santiago Bernabeu.<br/>

                    Hãy nhìn vào con số thống kê để thấy màn trình diễn của Real ấn tượng như thế nào. Các học trò của Zidane <em>kiểm soát bóng 70%</em>, thực hiện <em>604 đường chuyền với độ chính xác lên tới 90%</em> và tung ra tổng cộng <span style="color: #ff1aff">17 pha dứt điểm</span>, tức trung bình trên 5 phút lại tung ra 1 pha dứt điểm. <br/>
            
                    <img src="images/zidane.jpg"  width="500" height="300" alt="Huấn luyện viên Zinedine Zidane"/> </br>
    
                    Những số liệu như vậy, trước đây chỉ được chứng kiến ở binh đoàn Barcelona dưới thời Pep Guardiola, những người đã thiết lập nên đế chế tiqui-taca mà chuyền bóng tới đâu cỏ không mọc nổi tới đấy. Chưa hết, chiến thắng của Real được ấn định chỉ 1 phút sau khi Zidane thực hiện thay đổi người chiến thuật. Thật là bậc kỳ tài. <br/>
                </p>

           </font>
        
    
    </body>
</html>

Kết quả ví dụ

Chắc chắn thẻ font không gây khó khăn cho bạn. Bạn đã có được một thẻ tuyệt vời để định dạng Font chữ trong đoạn văn mà bạn muốn. Hãy tự làm nổi bật văn bản của bạn bằng thẻ Font tuyệt vời này nhé! Hôm nay chúng ta chỉ học hành nhẹ nhàng vậy thôi! Tuy nhiên bài tập của các bạn không phải là dạng vừa đâu. Hãy chăm luyện tập để trở thành cao thủ HTML nhé!  




Đặt câu hỏi cho bài viết này ?