Sử dụng thuộc tính font-family trong CSS để thiết lập font chữ hiện thị cho các phần tử HTML

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,625
Được Like
12,670
Sử dụng thuộc tính font-family trong CSS để thiết lập font chữ hiện thị cho các phần tử HTML

Thuộc tính font-family được dùng để chỉ ra font cho phần tử. Có hai kiểu tên font:
  • font family chỉ ra font family ví dụ Times New Roman hoặc Arial
  • generic family nhóm các font family có cách hiển thị tương tự nhau ví dụ Serif, Monospace
screenshot_1591151837.png

Ví dụ có HTML như sau:
Mã:
<p class="serif">
   This is a paragraph shown in serif font.
</p>
<p class="sansserif">
   This is a paragraph shown in sans-serif font.
</p>
<p class="monospace">
   This is a paragraph shown in monospace font.
</p>
<p class="cursive">
   This is a paragraph shown in cursive font.
</p>
<p class="fantasy">
   This is a paragraph shown in fantasy font.
</p>

Giờ dùng CSS để thiết lập font chữ cho các đoạn văn trên
Mã:
<style>
    p.serif {
       font-family: "Times New Roman", Times, serif;
    }
    p.sansserif {
       font-family: Helvetica, Arial, sans-serif;
    }
    p.monospace {
       font-family: "Courier New", Courier, monospace;
    }
    p.cursive {
       font-family: Florence, cursive;
    }
    p.fantasy {
       font-family: Blippo, fantasy;
    }
</style>

Kết quả:

screenshot_1591151881.png

Lưu ý các giá trị trong font-family cách nhau bằng dấu "," các giá trị này được trình duyệt sử dụng thay thế nhau. Nếu font thứ nhất tìm không ra, nó sử dụng font tiếp theo ...

Mã:
body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

Chúc các bạn thành công.


Nguồn: Internet​
 

Top Bottom