Sử dụng font trong CSS
Giới thiệu nội dung bài viết
Tiếp nối chuỗi các bài viết chia sẻ về ngôn ngữ lập trình web CSS, hôm nay anh sẽ trình bày về font trong CSS. Khi lập trình web CSS, làm việc với các website, một trong những thuộc tính không thể thiếu đó chính là thuộc tính font.
Bài viết hôm nay anh sẽ chia sẻ cho các bạn hiểu về thuật ngữ Font Family, các kiểu Font thường được sử dụng phổ biến trong lập trình web CSS như font variant,… Cách làm như thế nào để thực hiện in đậm, in nghiêng, chuyển in thường thành in hoa. Hay cách để thiết lập chữ đậm bao nhiêu, kích thước font hay độ rộng các chữ font. Ngoài ra, anh sẽ hướng dẫn các bạn cách để tìm thêm nhiều font khác bên ngoài, sau đó nhúng vào trang web để giúp trang web trở nên đa dạng hơn.
Bên cạnh những kiến thức lí thuyết, trong bài viết có kèm theo các ví dụ minh hoạ chi tiết cho mỗi phần. Hi vọng những chia sẻ này sẽ giúp ích cho bạn trong quá trình làm việc với ngôn ngữ lập trình web CSS.
1. Font Family
Chúng ta sử dụng thuộc tính font family để thiết lập font sẽ được dùng trong trang web. Ví dụ sau ta sử dụng font georgia cho toàn bộ website. Chúng ta khai báo style = “font-family:georgia,garamond,serif;”
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
</head>
<body>
<p style = "font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at your system.
</p>
</body>
</html>
2. Kiểu Font
Nếu chúng ta muốn in đậm hoặc in nghiêng thì ta sử dụng thuộc tính font-style. Ví dụ sau đây anh sẽ in nghiêng một đoạn chữ.
1
2
3
4
5
6
7
8
9
10
<html>
<head>
</head>
<body>
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>
3. Font Variant
Nếu chúng ta muốn chuyển các chữ in thường thành chữ in hoa thì ta sử dụng thuộc tính font-variant
1
2
3
4
5
6
7
8
9
10
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>
4. Chữ đậm font
Chúng ta sử dụng thuộc tính font-weight để thiết lập chữ đậm bao nhiêu. Giá trị được thiết lập từ nhạt đến đậm là 100 đến 900
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
</head>
<body>
<p style = "font-weight:bold;">
This font is bold.
</p>
<p style = "font-weight:bolder;">
This font is bolder.
</p>
<p style = "font-weight:500;">
This font is 500 weight.
</p>
</body>
</html>
5. Kích thước font
Chúng ta có thể thiết lập kích thước của font từ nhỏ tới lớn bởi các giá trị xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger hoặc ta có thể sử dụng phần trăm hoặc pixels
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
</head>
<body>
<p style = "font-size:20px;">
This font size is 20 pixels
</p>
<p style = "font-size:small;">
This font size is small
</p>
<p style = "font-size:large;">
This font size is large
</p>
</body>
</html>
- Chúng ta có thể sử dụng thuộc tính font-size-adjust để thiết lập chiều cao của font như sau
1
2
3
4
5
6
7
8
9
10
<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
</body>
</html>
6. Độ rộng các chữ font
Chúng ta có thể căn chỉnh độ rộng hay khoảng cách các chữ trong văn bản bằng thuộc tính font-stretch. Nó có các giá trị là normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
</head>
<body>
<p style = "font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer
doesn't have a <br>condensed or expanded version of the font being used.
</p>
</body>
</html>
Chúng ta có thể kết hợp các thuộc tính của font vào trong một dòng như sau
1
2
3
4
5
6
7
8
9
10
<html>
<head>
</head>
<body>
<p style = "font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>
</body>
</html>
7. Sử dụng google font
Google đã build sẵn rất nhiều font, chúng ta co thể lên trang https://fonts.google.com Sau đó có thể tìm loại font mà mình thích sau đó nhúng nó vào trang web như sau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>
Chúng ta sử dụng thẻ link để nhúng font vào và khai báo như sau . Trong ví dụ này chúng ta lấy font Sofia là font chủ đạo cho website của mình
8. Video Demo
9. Thực hành online và source code
Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm
Các khoá học lập trình MIỄN PHÍ tại đây
Comments
