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