1. Khái niệm font chữ và nhóm font chữ
Font chữ chính là kiểu chữ, mẫu mã của chữ. Ví dụ, một số font chữ quen thuộc như: Georgia, Arial, Courier New,….
Các font 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.
Có ba nhóm font chữ cơ bản là:
+ Serif <=> các phông chữ Serif có các đường nhỏ ở đầu trên một số ký tự. (gọi nôm na là kiểu chữ có chân)
+ Sans-Serif <=> “Sans” có nghĩa là không có – những phông chữ này không có các dòng ở cuối ký tự (gọi nôm na là kiểu chữ không chân)
+ Monospace <=> Tất cả ký tự của nhóm font monospace đều có cùng chiều rộng
Lưu ý: Trên màn hình hiển thị của trình duyệt thì font sans-serif dễ đọc hơn font serif
1.1 Các font chữ thuộc nhóm Serif:
+ Palatino
+ Palatino Linotype
+ Time New Roman
+ Times
+ Georgia
+ Book Antiqua
1.2 Các font chữ thuộc nhóm Sans-Serif:
+ Arial
+ Arial Black
+ Comic Sans MS
+ Cursive
+ Charcoal
+ Tahoma
+ Trebuchet MS
+ Gadget
+ Geneva
+ Lucida Sans Unicode
+ Lucida Grande
+ Helvetica
+ Impact
+ Verdana
1. 3 Các font chữ thuộc nhóm Monospace:
+ Courier New
+ Courier
+ Lucida Console
+ Monaco
1.4 Lưu ý
Nếu bạn muốn tìm kiếm số liệu thống kê của font thường được sử dụng trên win và mac bạn có thể vào trang web http://ift.tt/1FrWLDq
2. Thuộc tính font-family
Để thiết lập kiểu chữ cho văn bản, ta sử dụng thuộc tính font-family với giá trị là tên font chữ.
Không phải mọi trình duyệt đều hỗ trợ hết tất cả các font chữ phía trên.
Để phòng trường hợp khi ta thiết lập font chữ mà trình duyệt không hỗ trợ dẫn đến việc hiển thị không như ý, ta sẽ thiết lập nhiều font chữ khác nhau (nếu font một không được hỗ trợ thì sẽ đến font hai, nếu font hai không được hỗ trợ thì đến font ba,….)
Cú pháp
font-family: tên-font, tên-font-backup, tên-font-backup … tên nhóm font;
Lưu ý:
+ Các font chữ phải được ngăn cách nhau bởi dấu phẩy.
+ Các font chữ có nhiều hơn một từ phải được đặt bên trong cặp dấu ngoặc kép ” ” hoặc ngoặc đơn ‘ ‘
+ Font chữ cuối cùng nên là tên nhóm font chữ, vì chắc chắn tên nhóm font chữ sẽ được mọi trình duyệt hỗ trợ
3. Thuộc tính font-style
Thuộc tính font-style là để bạn thiết lập chữ viết được hiển thị dưới dạng in nghiêng hoặc bình thường.
Thuộc tính font-style có ba giá trị:
+ normal: bình thường
+ italic: in nghiêng
+ oblique: in nghiêng (giống italic, nhưng độ in nghiêng ít hơn)
4. Thuộc tính font-size
Thuộc tính font-size dùng để thiết lập kích cỡ chữ của văn bản.
Giá trị của thuộc tính font-size bạn nên xác định theo đơn vị px.
Lưu ý: Nếu không thiết lập kích cỡ chữ cho văn bản thì mặc định văn bản có kích cỡ chữ là 16px
5. Thuộc tính font-weight
Thuộc tính font-weight dùng để thiết lập sự tô đậm của chữ.
Thuộc tính font-weight có hai giá trị thường dùng:
+ normal: bình thường
+ bold: tô đậm
6. Các bài tập
6.1 Bài tập 1
Thiết lập font cho trang là “Courier New” và font cho h1 là “Verdana”.
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Tiêu đề</h1> <p>Đoạn văn.</p> <p>Đoạn văn khác.</p> </body> </html>
Câu trả lời của bài tập 1
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Courier New";
}
h1 {
font-family: Verdana;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
<p>Đoạn văn khác.</p>
</body>
</html>
6.2 Bài tập 2
Cũng như bài tập 1 nhưng hiển thị các phần tử <p> dưới dạng văn bản nghiêng
Câu trả lời của bài tập 2
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
<p>Đoạn văn khác.</p>
</body>
</html>
6.3 Bài tập 3
Cũng như bài tập 1 nhưng thiết lập font cho trang là “20px” và font cho phần tử h1 là “40px”
Câu trả lời của bài tập 3
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 20px;
}
h1 {
font-size: 40px;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
<p>Đoạn văn khác.</p>
</body>
</html>
6.4 Bài tập 4
Cũng như bài tập 1 nhưng hiển thị các phần tử <p> dưới dạng chữ “đậm”.
Câu trả lời của bài tập 4
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
<p>Đoạn văn khác.</p>
</body>
</html>
7. Lời cuối bài
Đến đây là kết thúc bài viết về các thuộc tính font trong CSS. Ở bài sau tôi sẽ viết về những điều cần biết về icon trong CSS.
The post [CSS bài 15] Các thuộc tính font trong CSS appeared first on Học online.
from WordPress http://ift.tt/2iUawM8
via IFTTT
Không có nhận xét nào:
Đăng nhận xét