CSS: Thuộc tính font

Đánh giá bài viết

Định nghĩa và sử dụng

Thuộc tính font thiết lập font cho thành phần, bao gồm font chữ, độ rộng, …

Cấu trúc

tag {
    font: giá trị;
}

Với giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
font-family giá trị font font-family: Arial, Helvetica, sans-serif; Xác định giá trị font family cho chữ.
font-size Kích cỡ font-size: 120%; Xác định kích cỡ của chữ, đơn vị có thể là px, em, %, …
font-size-adjust Chỉ Firefox hỗ trợ thuộc tính này, nên ít được dùng tới.
font-stretch Hiện tại các trình duyệt không hỗ trợ thuộc tính này.
font-style normal
italic
oblique
font-style: italic; Xác định loại chữ.
font-variant normal
small-caps
inherit
font-variant: small-caps; Chuyển đổi kiểu chữ (thường thành hoa).
font-weight bold
normal
Giá trị
font-weight: bold; Hiển thị chữ đậm hay thường.

Ví dụ

Ví dụ về thuộc tính font

font-family

Xác định giá trị font family cho chữ

<html>
<head>
<style type="text/css">
p.fontArial {
    font-family: Arial, Helvetica, sans-serif;
}

p.fontCourier {
    font-family: "Courier New", Courier, monospace;
}
</style>
</head>

<body>
<p class="fontArial">font Arial</p>
<p class="fontCourier">font Courier</p>
</body>
</html>

font Arial

font Courier

font-size

Xác định kích cỡ cho chữ

<html>
<head>
<style type="text/css">
p.size200 {
    font-size: 200%;
}
</style>
</head>

<body>
<p>font-size</p>
<p class="size200">font size 200%</p>
</body>
</html>

font-size

font size 200%

font-size

font size 200%

<html>
<head>
<style type="text/css">
p.fontNormal {
    font-style: normal;
}

p.fontItalic {
    font-style: italic;
}

p.fontOblique {
    font-style: oblique;
}
</style>
</head>

<body>
<p class="fontItalic">font style normal</p>
<p class="fontItalic">font style italic</p>
<p class="fontOblique">font style oblique</p>
</body>
</html>

font style normal

font style italic

font style oblique

font-variant

Chuyển đổi kiểu chữ (thường thành hoa)

<html>
<head>
<style type="text/css">
p.fontVariant {
    font-variant: small-caps;
}
</style>
</head>

<body>
<p>font variant normal</p>
<p class="fontVariant">Font Variant Small Caps</p>
</body>
</html>

font variant normal

Font Variant Small Caps

font-weight

Chuyển đổi kiểu chữ (thường thành chữ in đậm)

<html>
<head>
<style type="text/css">
p.fontWeightNormal {
    font-weight: normal;
}

p.fontWeight600 {
    font-weight: 600;
}

p.fontWeightBold {
    font-weight: bold;
}
</style>
</head>

<body>
<p class="fontWeightNormal">font weight normal</p>
<p class="fontWeight600">font weight 600</p>
<p class="fontWeightBold">font weight bold</p>
</body>
</html>

font weight normal

font weight 600

font weight bold

Xem thêm css là gì?

Leave a Comment

© 2017 Enter Focus Academy – Viện CNTT ĐH QG HN. All rights reserved.

Enter Focus Academy – Viện CNTT ĐH QG HN

Địa chỉ: Tòa B – Trung tâm thương mại Hồ Gươm Plaza – 110 Trần Phú – Hà Đông – Hà Nội

Điện thoại: 0974097554 (Ms Trọng)

Email: enterfocus4@yahoo.com