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

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS
1 / 3
❮ ❯

Font trong CSS


CSS Border
Định dạng văn bản (Text) trong CSS

Để thiết lập font cho một trang HTML hoặc cho từng phần tử trong trang, bạn sử dụng các thuộc tính sau:

  • Thuộc tính font-family: được sử dụng để thay đổi kiểu văn bản

  • Thuộc tính font-style: được sử dụng để tạo một font chữ nghiêng hoặc chếch

  • Thuộc tính font-variant: được sử dụng để tạo những chữ hoa nhỏ (small-cap)

  • Thuộc tính font-weight: được sử dụng để tăng giảm độ đậm của font

  • Thuộc tính font-size: được sử dụng để thiết lập kích cỡ font

  • Thuộc tính font: sử dụng thuộc tính này nếu bạn muốn viết ít code hơn mà vẫn cài đặt được các thuộc tính liên quan tới font ở trên.


Nội dung chính

  • Thiết lập Font Family trong CSS
    • Ví dụ Font Family trong CSS trong CSS
  • Thiết lập Font Style trong CSS
    • Ví dụ thiết lập Font Style trong CSS
  • Thiết lập Font Variant trong CSS
    • Ví dụ thiết lập Font Variant trong CSS
  • Thiết lập Font Weight trong CSS
    • Ví dụ thiết lập Font Weight trong CSS
  • Thiết lập Font Size trong CSS
    • Ví dụ thiết lập Font Size trong CSS
  • Thuộc tính font-size-adjust trong CSS
    • Ví dụ thuộc tính font-size-adjust trong CSS
  • Thiết lập Font Size bằng Pixel trong CSS
    • Ví dụ thiết lập Font Size bằng Pixel trong CSS
  • Thiết lập Font Size bằng Em trong CSS
    • Ví dụ thiết lập Font Size bằng Em trong CSS
  • Sử dụng kết hợp % và em trong CSS
    • Ví dụ sử dụng kết hợp % và em trong CSS
  • Thuộc tính font trong CSS
    • Ví dụ thuộc tính font trong CSS

Thiết lập Font Family trong CSS

Trong CSS, có hai loại Font Family:

  • generic family: một nhóm các Font Family có bề mặt khá tương tự nhau. Ví dụ Serif hoặc Monospace.

  • font family: một font family cụ thể, ví dụ như Time New Roman hoặc Arial.

Để thay đổi bề mặt font của một phần tử nào đó, bạn có thể sử dụng thuộc tính font-family trong CSS.

Nói chung, khi sử dụng thuộc tính font-family, bạn nên cài đặt nhiều hơn một giá trị. Nếu trình duyệt không hỗ trợ giá trị font đầu tiên, nó sẽ thử giá trị tiếp theo, … Bắt đầu với giá trị font mà bạn muốn và kết thúc với một generic family để trình duyệt chọn một font tương tự trong generic family nếu không có font nào có sẵn.

Ghi chú: Nếu tên font có nhiều hơn một từ, thì bạn phải đặt trong trích dẫn kép, ví dụ như: "Times New Roman".

Ví dụ Font Family trong CSS trong CSS

Dưới đây là ví dụ minh họa cách cài đặt Font Family cho một phần tử. Giá trị cho thuộc tính font-family là bất kỳ tên font family hợp lệ nào.


<html>
<head>
<meta charset="UTF-8">
</head>
   <body>
      <p style="font-family:georgia,garamond,serif;">
      Đoạn văn bản này được hiển thị với một trong các font chữ: 
	  georgia, garamond, 
	  hoặc giá trị mặc định là serif  
      phụ thuộc vào trình duyệt của người dùng.
      </p>
   </body>
</html>

Kết quả:


Thiết lập Font Style trong CSS

Thuộc tính font-style trong CSS thường được sử dụng khi bạn muốn cài đặt một font chữ nghiêng. Các giá trị mà thuộc tính này có thể nhận là: normal, italic hoặc oblique. Trong đó, normal là hiển thị văn bản như bình thường, italic và oblique thì khá giống nhau, để hiển thị dạng nghiêng. Tuy nhiên, oblique ít được hỗ trợ hơn.

Ví dụ thiết lập Font Style trong CSS


<html>
<head>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="font-style:italic;">
      Đoạn văn bản này được hiển thị dưới dạng in nghiêng.
      </p>
   </body>
</html>

Kết quả:


Thiết lập Font Variant trong CSS

Để tạo các chữ hoa nhỏ (dạng small-cap), bạn sử dụng thuộc tính font-variant trong CSS. Thuộc tính này nhận hai giá trị là normal và small-caps.

Ví dụ thiết lập Font Variant trong CSS


<html>
<head>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="font-variant:small-caps;">
	  Đoạn văn bản này sẽ được hiển thị dưới dạng các chữ hoa nhỏ.
      </p>
   </body>
</html>

Kết quả:


Thiết lập Font Weight trong CSS

Để thiết lập mức độ đậm của văn bản, bạn sử dụng thuộc tính font-weight trong CSS. Thuộc tính này có thể nhận các giá trị: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Ví dụ thiết lập Font Weight trong CSS


<html>
<head>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="font-weight:bold;">
	  Doạn văn bản này được hiển thị dưới dạng in đậm.
	  </p>
      <p style="font-weight:bolder;">
	  Doạn văn bản này được hiển thị dưới dạng in đậm hơn.
	  </p>
      <p style="font-weight:500;">
	  Đoạn văn bản này có Font Weight là 500.
	  </p>
   </body>
</html>

Kết quả:


Thiết lập Font Size trong CSS

Để thiết lập kích cỡ font, bạn sử dụng thuộc tính font-size trong CSS. Thuộc tính này có thể nhận các giá trị tương đối hoặc tuyệt đối: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels hoặc in %.

Ví dụ thiết lập Font Size trong CSS


<html>
<head>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="font-size:20px;">
	  Đoạn văn bản này có Font Size là 20 pixel.
	  </p>
      <p style="font-size:small;">
	  Đoạn văn bản này có Font Size là small.
	  </p>
      <p style="font-size:large;">
	  Đoạn văn bản này có Font Size là large.
	  </p>
   </body>
</html>

Kết quả:

Việc quản lý kích cỡ văn bản trong các phần khác nhau là rất quan trong trong thiết kế Web. Tuy nhiên, bạn không nên sử dụng thuộc tính font-size-adjust để làm cho các đoạn văn trông giống như các phần tiêu đề, hoặc tiêu đề lại trông giống như đoạn văn như trong phần Thuộc tính font-size-adjust trong CSS dưới đây. Lời khuyên hữu ích cho bạn là hãy sử dụng các thẻ HTML phù hợp, ví dụ như các thẻ <h1> - <h6> cho phần tiêu đề và thẻ <p> cho các đoạn văn.


Thuộc tính font-size-adjust trong CSS

Sử dụng thuộc tính font-size-adjust trong CSS, bạn có thể điều chỉnh kích cỡ văn bản của một phần tử. Thuộc tính này giúp bạn điều chỉnh x-height để làm cho font dễ đọc hơn. Giá trị của thuộc tính là bất kỳ số nào.

Ví dụ thuộc tính font-size-adjust trong CSS


<html>
<head>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="font-size-adjust:0.69;">
         Đoạn văn này font-size-adjust có giá trị là 0.69.
      </p>
   </body>
</html>

Kết quả là:


Thiết lập Font Size bằng Pixel trong CSS

Việc thiết lập kích cỡ font bằng Pixel giúp bạn kiểm soát hoàn toàn kích cỡ văn bản.

Ví dụ thiết lập Font Size bằng Pixel trong CSS


<html>
<head>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="font-stretch:ultra-expanded;">
           Nếu giá trị của thuộc tính này không có hiệu quả,
		   tức là máy tính của bạn không hỗ trợ 2 giá trị: 
		   condensed hoặc expanded.
      </p>
   </body>
</html>

Kết quả:

Ghi chú: Nếu bạn sử dụng Pixel, bạn vẫn có thể sử dụng tính năng Zoom để tăng giảm kích cỡ của cả trang web.


Thiết lập Font Size bằng Em trong CSS

Để cho phép người dùng tăng giảm kích cỡ của văn bản (trong menu của trình duyệt), nhiều lập trình viên sử dụng đơn vị em thay cho pixel.

Đơn vị em được đề nghị sử dụng bởi W3C.

1em thì bằng với kích cỡ font hiện tại. Kích cỡ văn bản mặc định là 16px, do đó kích cỡ mặc định của 1em sẽ là 16px.

Ví dụ thiết lập Font Size bằng Em trong CSS


<html>
<head>
<meta charset="UTF-8">
<style>
h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
 }p {
    font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>Tiêu đề H1</h1>
<hr>
<h2>Tiêu đề H2</h2>
<p>Đây là một đoạn văn bản.</p>
<p>Xác định kích cỡ font với giá trị em cho phép nhiều 
trình duyệt có thể tăng giảm kích cỡ văn bản
Tuy nhiên cũng có trình duyệt không hiểu giá trị em.
</p>
</body>
</html>

Trong ví dụ trên, kích cỡ văn bản được cài đặt bằng đơn vị em là giống như trong ví dụ trước khi được cài đặt bằng đơn vị pixel. Tuy nhiên, với em, bạn có thể căn chỉnh kích cỡ văn bản trong mọi trình duyệt.

Tuy nhiên, trong một số trình duyệt IE cũ, văn bản sẽ hiển thị lớn hơn nhiều khi chúng được tạo lớn hơn và hiển thị nhỏ hơn nhiều khi chúng được tạo nhỏ hơn.


Sử dụng kết hợp % và em trong CSS

Giải pháp để cho phần định nghĩa kích cỡ font của bạn có thể làm việc đúng trên tất cả mọi trình duyệt, bạn nên thiết lập một font-size mặc định bằng giá trị % cho phần tử <body>.

Ví dụ sử dụng kết hợp % và em trong CSS


<html>
<head>
<style>
body {
    font-size: 100%;
}h1 {
    font-size: 2.5em;
}h2 {
    font-size: 1.875em;
}p {
    font-size: 0.875em;
}
</style>
</head>
<body>
<h1>Tiêu đề H1</h1>
<hr>
<h2>Tiêu đề H2</h2>
<p>Đây là một đoạn văn bản</p>
<p>Thiết lập kích thước font bằng % và em là lựa chọn tốt nhất.</p>
</body>
</html>

Thuộc tính font trong CSS

Để tối thiểu hóa lượng code cần phải viết, bạn có thể sử dụng thuộc tính font trong CSS để thiết lập tất cả thuộc tính liên quan tới Font đã được trình bày ở phần trên.

Trong thuộc tính font này, bạn thiết lập các thuộc tính liên quan tới font theo thứ tự như trong cú pháp sau:

Ví dụ thuộc tính font trong CSS


font-style font-variant font-weight font-size/line-height font-family

Trong đó, giá trị của hai thuộc tính font-size và font-family là bắt buộc. Nếu bạn không cài đặt một trong các giá trị khác thì giá trị mặc định sẽ được sử dụng (nếu có).

Ghi chú: thuộc tính line-height trong CSS được sử dụng để thiết lập khoảng cách giữa các dòng.

Ngoài một số giá trị đã được liệt kê ở trên, thuộc tính font trong CSS có thể nhận các giá trị khác như trong ví dụ sau:


font: font-style font-variant font-weight font-size/line-height 
font-family|caption|icon|menu|small-caption|status-bar;

Bạn sẽ lần lượt tìm hiểu các thuộc tính này trong chương Tổng hợp các thuộc tính trong CSS.


<html>
<head>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="font:italic small-caps bold 15px georgia;">
      Cài đặt giá trị cho các thược tính liên quan đến font.
      </p>
   </body>
</html>

Kết quả:


CSS Border
Định dạng văn bản (Text) trong CSS

Recent Updates

Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSSSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?

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