EnglishPhông chữ đóng vai trò quan trọng trong việc tạo nên diện mạo và trải nghiệm người dùng trên website. Trong bài 13 này, chúng ta sẽ tìm hiểu chi tiết về các thuộc tính định dạng phông chữ trong CSS, bao gồm font-family, font-size, font-weight, font-style, và nhiều thuộc tính khác. Sử dụng đúng các thuộc tính này sẽ giúp bạn tạo ra những kiểu chữ bắt mắt và phù hợp với thiết kế tổng thể của trang web. Cùng bắt đầu khám phá cách định dạng phông chữ hiệu quả trong CSS!
1. CSS Fonts là gì?
Thuộc tính font trong CSS được sử dụng để kiểm soát các khía cạnh liên quan đến phông chữ của văn bản như kiểu chữ, kích thước, độ đậm, và chiều cao dòng. Các thuộc tính chính của phông chữ trong CSS bao gồm:
font-family: Xác định kiểu chữ.font-size: Xác định kích thước của phông chữ.font-weight: Xác định độ đậm của văn bản.font-style: Xác định kiểu văn bản (in nghiêng, thường, in đậm).font-variant: Hiển thị văn bản dưới dạng chữ hoa nhỏ (small caps).
2. Các thuộc tính Font cơ bản trong CSS
2.1. font-family
Thuộc tính font-family cho phép bạn chỉ định một hoặc nhiều phông chữ để hiển thị văn bản. Bạn nên liệt kê các phông chữ dự phòng (fallback) trong trường hợp phông chữ đầu tiên không được hỗ trợ trên thiết bị của người dùng.
Ví dụ:
<style>
body {
font-family: "Arial", "Helvetica", sans-serif;
}
</style>
<p>Đoạn văn này sẽ hiển thị với phông chữ Arial. Nếu không có Arial, nó sẽ hiển thị với Helvetica.</p>"Arial": Font chính."Helvetica": Font dự phòng.sans-serif: Loại font cuối cùng nếu không có font nào khả dụng.
2.2. font-size
Thuộc tính font-size giúp điều chỉnh kích thước của văn bản. Bạn có thể sử dụng đơn vị px, em, rem, %, hoặc từ khóa (small, medium, large).
Ví dụ:
<style>
h1 {
font-size: 36px;
}
p {
font-size: 16px;
}
</style>
<h1>Tiêu đề có kích thước lớn</h1>
<p>Đoạn văn có kích thước nhỏ hơn.</p>Kích thước của tiêu đề là 36px, trong khi đoạn văn bản có kích thước là 16px.
2.3. font-weight
font-weight xác định độ đậm của văn bản. Bạn có thể sử dụng các giá trị từ 100 (mỏng nhất) đến 900 (đậm nhất), hoặc từ khóa như normal, bold, lighter, bolder.
Ví dụ:
<style>
h1 {
font-weight: bold;
}
p {
font-weight: 300;
}
</style>
<h1>Tiêu đề đậm</h1>
<p>Đoạn văn mỏng</p>2.4. font-style
font-style dùng để xác định kiểu chữ in nghiêng, in đậm, hoặc chữ thường. Giá trị có thể là:
normal: Văn bản thường.italic: Văn bản in nghiêng.oblique: Văn bản in xiên (nghiêng nhẹ).
Ví dụ:
<style>
p {
font-style: italic;
}
</style>
<p>Đoạn văn này sẽ được in nghiêng.</p>2.5. font-variant
Thuộc tính font-variant hiển thị văn bản dưới dạng chữ hoa nhỏ (small caps).
Ví dụ:
<style>
p {
font-variant: small-caps;
}
</style>
<p>Văn bản này sẽ được hiển thị dưới dạng chữ hoa nhỏ.</p>2.6. line-height
line-height xác định chiều cao của dòng văn bản, giúp điều chỉnh khoảng cách giữa các dòng trong đoạn văn.
Ví dụ:
<style>
p {
line-height: 1.5;
}
</style>
<p>Đoạn văn này có khoảng cách giữa các dòng là 1.5.</p>2.7. font
Thuộc tính font là cách viết gọn của các thuộc tính liên quan đến font, bao gồm: font-style, font-weight, font-size, line-height, và font-family.
Cú pháp:
font: [font-style] [font-weight] [font-size]/[line-height] [font-family];Ví dụ:
<style>
p {
font: italic bold 16px/1.5 "Arial", sans-serif;
}
</style>
<p>Đoạn văn này sử dụng kiểu viết gọn của thuộc tính font.</p>Kết quả: Văn bản sẽ hiển thị in nghiêng, đậm, kích thước 16px, khoảng cách dòng là 1.5, và dùng phông chữ Arial.
3. Sử dụng web Fonts (Google Fonts)
Ngoài các phông chữ mặc định, bạn có thể sử dụng Web Fonts từ các thư viện như Google Fonts để thêm các phông chữ đặc biệt vào trang web.
Bước 1: Chọn font trên Google Fonts
Truy cập trang Google Fonts, chọn font bạn muốn sử dụng (ví dụ: Roboto), và sao chép liên kết để nhúng vào trang web.
Bước 2: Nhúng font vào trang HTML
Dán đoạn mã CSS từ Google Fonts vào phần <head> của tài liệu HTML:
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>Bước 3: Sử dụng font trong CSS
Sau khi nhúng font, bạn có thể sử dụng nó trong CSS như sau:
HTML:
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
<p>Đoạn văn này sử dụng font Roboto từ Google Fonts.</p>Kết quả: Văn bản sẽ hiển thị với phông chữ Roboto từ Google Fonts.
4. Ví dụ về CSS Fonts
Ví dụ 1: định dạng văn bản cho một trang web
<style>
body {
font-family: 'Arial', sans-serif;
font-size: 16px;
line-height: 1.6;
}
h1 {
font-family: 'Georgia', serif;
font-size: 36px;
font-weight: bold;
color: #333;
}
p {
font-size: 18px;
font-weight: 400;
color: #555;
line-height: 1.7;
}
</style>
<h1>Chào mừng đến với Codetuthub</h1>
<p>Đây là một bài viết hướng dẫn về CSS Fonts trên trang web của chúng tôi.</p>Ví dụ 2: Sử dụng Web Fonts từ Google
<head>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
</head>
<style>
h1 {
font-family: 'Lobster', cursive;
font-size: 40px;
color: #ff5722;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 18px;
color: #333;
}
</style>
<h1>CSS Fonts với Google Fonts</h1>
<p>Bài viết này sử dụng phông chữ Lobster cho tiêu đề và Roboto cho nội dung văn bản.</p>Kết quả: Tiêu đề sẽ có font Lobster và nội dung văn bản sử dụng font Roboto.
5. Lời kết
CSS Fonts cung cấp rất nhiều công cụ mạnh mẽ để kiểm soát và định dạng văn bản trên trang web của bạn. Từ việc chọn kiểu chữ phù hợp, tùy chỉnh kích thước, độ đậm, kiểu chữ đến việc sử dụng các Web Fonts như Google Fonts, bạn có thể tạo ra những thiết kế văn bản đẹp mắt và dễ đọc cho người dùng.
Hãy thử nghiệm với các thuộc tính về font trong CSS để tối ưu hóa trải nghiệm người dùng trên trang web Codetuthub.com!
