Leaderboard ads banner

Phông Chữ CSS

Thuộc tính font CSS giúp thiết lập họ phông chữ, độ đậm, kích thước và kiểu văn bản.

Họ Phông Chữ CSS

Trong CSS, có hai loại họ phông chữ :

  • Nhóm họ phông chữ chung: Bao gồm một nhóm các phông chữ có cùng một vài nét tương đồng nào đó về hình dáng sẽ được xếp chung một nhóm (như "Serif" hoặc "Monospace")
  • Họ phông với tên cụ thể : Tên của một họ phông chữ cụ thể ví dụ, một số phông chữ quen thuộc như (như "Times New Roman" hoặc "Arial").
Họ Chung Họ phông chữ Miêu tả
Serif Times New Roman Georgia Phông chữ Serif có các dòng nhỏ ở cuối trên một số ký tự
Sans-serif Arial Verdana "Sans" có nghĩa là không có - các phông chữ này không có dòng ở cuối ký tự
Monospace Courier New Lucida Cosole Tất cả các ký tự monospace đều có cùng chiều rộng

Lưu ý: Trên màn hình máy tính, phông chữ sans-serif được coi là dễ đọc hơn phông chữ serif.

Thiết lập kiểu chữ

Thiết lập kiểu chữ của văn bản được đặt bằng thuộc tính font-family

Các font-family nên giữ nhiều tên phông chữ như một hệ thống "dự phòng". Nếu trình duyệt không hỗ trợ phông chữ đầu tiên, nó sẽ thử phông chữ tiếp theo, v.v.

Bắt đầu với phông chữ bạn muốn và kết thúc bằng một nhóm font chữ, để cho trình duyệt chọn một phông chữ tương tự trong nhóm, nếu không có phông chữ nào khác.

Lưu ý : Nếu tên của kiểu chữ nhiều hơn một từ, nó phải nằm trong dấu ngoặc kép, như: "Times New Roman".

Nhiều hơn một kiểu font chữ sẽ được chỉ định trong danh sách và phân cách bằng dấu phẩy:

Ví dụ :

 p {
        font-family: "Times New Roman", Times, serif; 
 }

Mở editor

Kiểu Phông Chữ

Các font-style chủ yếu được sử dụng để xác định văn bản in nghiêng.

Thuộc tính này có ba giá trị:

  • Bình thường - Văn bản được hiển thị bình thường
  • In nghiêng - Văn bản được in nghiêng
  • Xiên - Chữ "nghiêng" (xiên rất giống với chữ nghiêng, nhưng ít được hỗ trợ hơn)

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
    font-style: normal;
}
p.italic {
    font-style: italic;
}
p.oblique {
    font-style: oblique;
}
</style>
</head>
<body>
   <p class="normal">Đây là đoạn văn bản bình thường.</p>
   <p class="italic">Đây là đoạn văn bản in nghiên.</p>
   <p class="oblique">Đây là đoạn văn bản in xiên.</p>
</body>
</html>

Mở editor

Cỡ Chữ

Các font-size thiết lập kích thước của văn bản.

Việc có thể quản lý kích thước văn bản rất quan trọng trong thiết kế web. Tuy nhiên, bạn không nên sử dụng các điều chỉnh kích thước phông chữ để làm cho các đoạn trông giống như tiêu đề hoặc các tiêu đề trông giống như các đoạn văn.

Luôn sử dụng các thẻ HTML thích hợp, như <h1> - <h6> cho các tiêu đề và <p> cho các đoạn văn.

Giá trị kích thước phông chữ có thể là một kích thước tuyệt đối hoặc tương đối.

Kích thước tuyệt đối:

  • Đặt văn bản thành kích thước được chỉ định
  • Không cho phép người dùng thay đổi kích thước văn bản trong tất cả các trình duyệt (không phù hợp vì lý do trợ năng)
  • Kích thước tuyệt đối hữu ích khi kích thước vật lý của đầu ra được biết

Kích thước tương đối:

  • Đặt kích thước tương đối so với các yếu tố xung quanh
  • Cho phép người dùng thay đổi kích thước văn bản trong trình duyệt

Lưu ý: Nếu bạn không chỉ định kích thước phông chữ, kích thước mặc định cho văn bản thông thường, như đoạn văn, là 16px (16px = 1em).

Đặt Kích Thước Phông Chữ Bằng Pixel

<!DOCTYPE html>
<html>
<head>
 <style>
  h1 {
      font-size: 40px;
  }
  h2 {
     font-size: 30px;
  }
  p {
    font-size: 14px;
  }
 </style>
</head>
<body>
  <h1>Tiêu đề 1</h1>
  <h2>Tiêu đề 2</h2>
  <p>Đây là một đoạn văn</p>
</body>
</html>

Mẹo: Nếu bạn sử dụng pixel, bạn vẫn có thể sử dụng công cụ thu phóng để đổi kích thước toàn bộ trang.

Đặt Kích Thước Phông Chữ Với Em

  • Để cho phép người dùng thay đổi kích thước văn bản (trong trình đơn trình duyệt), nhiều nhà phát triển sử dụng em thay vì pixel.

  • Các đơn vị kích thước em được khuyến cáo bởi W3C.

  • 1em bằng kích thước phông chữ hiện tại. Kích thước văn bản mặc định trong trình duyệt là 16px. Vì vậy, kích thước mặc định của 1em là 16px.

  • Kích thước có thể được tính từ pixel đến em bằng công thức này: pixel / 16 = em

Ví dụ :

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 */
}

Trong ví dụ trên, kích thước văn bản trong em giống với ví dụ trước bằng pixel. Tuy nhiên, với kích thước em, có thể điều chỉnh kích thước văn bản trong tất cả các trình duyệt.

Tuy nhiên, vẫn còn một vấn đề với các phiên bản cũ của IE. Các văn bản sẽ trở nên lớn hơn nó nên khi thực hiện lớn hơn, và nhỏ hơn nó nên khi thực hiện nhỏ hơn.

Mở editor

Sử Dụng Kết Hợp Phần Trăm Và Em

Giải pháp hoạt động trong tất cả các trình duyệt, là đặt kích thước phông chữ mặc định theo phần trăm cho phần tử <body>:

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

Đoạn mã code hoạt động rất tốt. Nó cho thấy cùng một kích thước văn bản trong tất cả các trình duyệt, và cho phép tất cả các trình duyệt để phóng to hoặc thay đổi kích thước văn bản !

Độ Đậm Nhạt

Các font-weight dùng để xác định độ đậm nhạt của một phông chữ:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
    font-weight: normal;
}

p.light {
    font-weight: lighter;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}
</style>
</head>
<body>
  <p class="normal">Đây là đoạn văn bản.</p>
  <p class="light">Đây là đoạn văn bản.</p>
  <p class="thick">Đây là đoạn văn bản.</p>
  <p class="thicker">Đây là đoạn văn bản.</p>
</body>
</html>

Mở editor

Kích Thước Phông Chữ Đáp Ứng

Kích thước văn bản có thể được thiết lập với một vw đơn vị, có nghĩa là "chiều rộng khung nhìn".

Bằng cách đó kích thước văn bản sẽ theo kích thước của cửa sổ trình duyệt

Ví dụ :

<h1 style="font-size:10vw">Hello World</h1>

Chế độ xem là kích thước cửa sổ trình duyệt. 1vw = 1% chiều rộng khung nhìn. Nếu khung nhìn rộng 50cm, 1vw là 0,5cm.

Biến Thể Phông Chữ

Các font-variant quy định cụ thể hay không một văn bản sẽ được hiển thị trong một phông chữ mũ nhỏ.

Trong phông chữ nhỏ, tất cả các chữ cái thường được chuyển thành chữ hoa. Tuy nhiên, các chữ in hoa được chuyển đổi xuất hiện ở kích thước phông chữ nhỏ hơn các chữ in hoa gốc trong văn bản.

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}
</style>
</head>
<body>
  <p class="normal">Tôi tên là Lê Văn Thạch.</p>
  <p class="small">Tôi tên là Lê Văn Thạch.</p>
</body>
</html>

Mở editor

Để học tốt thì chúng ta phải kết hợp giữa việc học đi đôi với hành, hãy cùng nhau làm những bài tập thực hành đơn giản theo đường dẫn bên dưới nhé. Nó sẽ giúp chúng ta học tập tốt hơn nhiều đấy.

Nội dung không được để trống

Hướng Dẫn Liên Quan