🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Cafedev chia sẻ cho ace về Font chữ trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.

Thuộc tính phông chữ CSS xác định họ phông chữ, độ đậm, kích thước và kiểu của văn bản.

1. Font Families trong CSS

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

  • generic family – một nhóm họ phông chữ có giao diện giống nhau (như “Serif” hoặc “Monospace”)
  • font family – họ phông chữ cụ thể (như “Times New Roman” hoặc “Arial”)

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.

2. Font Family

Họ phông chữ của văn bản được đặt bằng thuộc tính font-family

Thuộc tính font-family nên chứa một số tên font 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, trình duyệt 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 họ chung để cho phép trình duyệt chọn một phông chữ tương tự trong họ chung, nếu không có sẵn phông chữ nào khác.

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

<!DOCTYPE html>
<html>
<head>
<style>
.serif {
  font-family: "Times New Roman", Times, serif;
}

.sansserif {
  font-family: Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: "Lucida Console", Courier, monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
<p class="monospace">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>

Copy and chạy code

3. Font Style

Thuộc tính font-style chủ yếu được sử dụng để chỉ định văn bản in nghiêng.

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

  • normal – Văn bản được hiển thị bình thường
  • italic – Văn bản được in nghiêng
  • oblique – Văn bản là “nghiêng” (xiên rất giống với in 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">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>

</body>
</html>

Copy and chạy code

  • Thuộc tính font-weight chỉ định trọng lượng của phông chữ:
p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}
    null
  • Thuộc tính font-variant chỉ định liệu văn bản có nên được hiển thị bằng phông chữ in hoa nhỏ hay không.

Trong phông chữ viết hoa nhỏ, tất cả các chữ cái thường được chuyển đổi thành chữ hoa. Tuy nhiên, các chữ cái hoa đã chuyển đổi sẽ xuất hiện ở kích thước phông chữ nhỏ hơn các chữ cái 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">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>

</body>
</html>

4. Font Size

Thuộc tính font-size đặt kích thước của văn bản.

Có thể quản lý kích thước văn bản là điều quan trọng trong thiết kế web. Tuy nhiên, bạn không nên sử dụng điều chỉnh kích thước phông chữ để làm cho các đoạn văn trông giống như tiêu đề hoặc các tiêu đề giống như đ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à 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 tốt 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 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 bình thường, như đoạn văn, là 16px (16px = 1em).

Đặt kích thước phông chữ với điểm ảnh(Pixels)

Đặt kích thước văn bản bằng pixel cung cấp cho bạn toàn quyền kiểm soát kích thước văn bản:

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

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 để thay đổ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 menu trình duyệt), nhiều nhà phát triển sử dụng em thay vì pixel.

Đơn vị kích thước em được khuyến nghị bởi cafedev.

1em bằng cỡ 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 thành em bằng công thức sau: pixel / 16 = em

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

Thật không may, vẫn còn sự cố với các phiên bản Internet Explorer cũ hơn. Văn bản trở nên lớn hơn so với khi được tạo ra lớn hơn và nhỏ hơn so với khi được làm nhỏ hơn.

Sử dụng Kết hợp Phần trăm và Em

Giải pháp hoạt động trên 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;
}

5. Sử dụng Google Fonts

Nếu bạn không muốn sử dụng bất kỳ phông chữ tiêu chuẩn nào trong HTML, bạn có thể sử dụng Google Fonts API để thêm hàng trăm phông chữ khác vào trang của mình.

Chỉ cần thêm liên kết biểu định kiểu và tham chiếu đến họ phông chữ bạn chọn:

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia";
  font-size: 22px;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</body>
</html>

Copy and chạy code

6. Thuộc tính viết gọn font

Để rút ngắn mã, cũng có thể chỉ định tất cả các thuộc tính phông chữ riêng lẻ trong một thuộc tính.

Thuộc tính font là một thuộc tính viết tắt cho:

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>

<h1>The font Property</h1>

<p class="a">This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.</p>

<p class="b">This is a paragraph. The font is set to italic and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.</p>

</body>
</html>

Full series tự học CSS từ cơ bản tới nâng cao.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM