Học web chuẩn

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

Đầu trang

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%

Đầu trang

font-style

Xác định loại cho chữ

<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

Đầu trang

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

Đầu trang

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

Đầu trang