Trong bài này chúng ta sẽ tìm hiểu về việc định dạng văn bản trong CSS ( CSS text). Thì cái này chúng ta cũng đã làm quen qua khá nhiều qua các ví dụ rồi, tuy nhiên nội dung nó còn rất nhiều và bây giờ là lúc tìm hiểu thêm.
Định dạng font chữ
Thì định dạng font chữ bao gồm một số thuộc tính thường dùng như: Loại font, kiểu font (đậm, mảnh) và kích thước font.
Loại font trong CSS (font-family)
Để định dạng loại font cho văn bản, chúng ta sẽ sử dụng thuộc tính font-family và giá trị của font-family là tên loại font mà bạn muốn áp dụng. Ở đây mình đề xuất 02 loại font sử dụng phổ biến đó là Roboto và Arial, còn những loại font khác các bạn tự tìm hiểu thêm.
Vd: Ở đây mình thiết lập cho tiêu đề bài viết là font Roboto, nội dung trong đoạn văn là Georgia ( mình dùng font này cho nó xấu xấu tí để cho hình dung sự khác biệt với font Arial).
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Tiêu đề webiste</title>
<style type="text/css">
h1 {
font-size: 40px;
color: red;
font-family: Roboto;
}
p {
font-size: 16px;
color: blue;
font-family: Georgia;
}
</style>
</head>
<body>
<h1> Tiêu đề bài viết </H1>
<p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus
facilisis felis massa, at bibendum lorem fringilla ut. Sed
ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
</p>
</body>
</html>
Trong ví dụ trên chúng ta cũng có luôn thuộc tính về kích thước font (font-size), màu sắc font (color).
Kiểu font (font-style)
Sử dụng thuộc tính font-style để làm cho văn bản của bạn có thể in nghiêng. Các giá trị bao gồm: normal (bình thường) và italic (in nghiêng).
In đậm văn bản (font-weight)
Để in đậm văn bản thì bạn sử dụn thuộc tính font-weight. Giá trị của nó là là từ100,200, 300,….900, số càng lớn thì chữ càng đậm.
Nhưng nếu bạn không thích dùng số thì có thể dùng các giá trị:normal,bold.
Bây giờ chúng ta sẽ làm ví dụ, với yêu cầu: cho chữ trong đoạn văn in nghiêng và có độ in đậm là 700, tiêu đề văn bản in đậm 800:
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Tiêu đề webiste</title>
<style type="text/css">
h1 {
font-size: 40px;
color: red;
font-family: Arial;
font-weight: 800;
}
p {
font-size: 16px;
color: blue;
font-family: Arial;
font-style : italic;
font-weight: 700;
}
</style>
</head>
<body>
<h1> Tiêu đề bài viết </H1>
<p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus
facilisis felis massa, at bibendum lorem fringilla ut. Sed
ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
</p>
</body>
</html>
Trên đây là ví dụ khá đầy đủ về định dạng Font chữ với một số thuộc tính đã nêu ra ở trên. Đúng ra thì mình không viết dài như thế nhưng để các bạn làm quen với cách nhúng CSS vào trong tập tin HTML nên các ví dụ đều đầy đủ nguyên một file HTML.
Bài học trước đó và tiếp theo
![[Học CSS] Bài 11: Làm việc với padding trong CSS](https://hocban.vn/wp-content/uploads/2017/05/Hoc-CSS-211x150.jpg "[Học Css] Bài 11: Làm Việc Với Padding Trong Css")
