Sử dụng font trong CSS

Giới thiệu nội dung bài viết

Chào các bạn,hôm nay anh sẽ hướng dẫn mọi người cách sử dụng font là như thế nào?

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>

font1

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>

font2

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>

font3

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ại 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> 

font4

4. Kích thướt font

Chúng ta có thể thiết lập kích thướt 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> 

font5

  • Chúng ta có thể sử dụng thuộc tính font-size-adjust để thiết lậy 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>

font6

5. Độ rộng các chữ font

Chúng ta có thể canh chỉnh độ rộng hay khoản 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> 

font7

Chúng ta có thể gom 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>

font8

6. 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

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments