CSS font-style: Kiểu chữ (italic, oblique)

Thuộc tính CSS font-style được dùng để chỉ định kiểu bình thường (normal), nghiêng (italic) hoặc xiên (oblique) cho văn bản của một phần tử.

Cú pháp

selector {
    font-style: normal | italic | oblique [angle];
}

Các giá trị

Giá trị	Mô tả
`normal`	Chữ đứng (mặc định)
`italic`	Font chữ nghiêng thiết kế riêng (italic face)
`oblique`	Font chữ đứng bị làm xiên (skewed)
`oblique <angle>`	Xiên với góc tùy chỉnh (-90deg đến 90deg), mặc định 14deg

italic vs oblique

italic: Sử dụng glyph thiết kế riêng của font (true italic) — đẹp hơn, đúng ý đồ thiết kế
oblique: Làm xiên glyph bình thường (synthetic) — dùng khi font không có italic face
Nếu font không có italic, italic sẽ fallback sang oblique

Ví dụ 1: h2 italic + p oblique 10deg

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
    font-style: italic;
    background-color: steelblue;
    color: white; padding: 1rem;
}
p { font-style: oblique 10deg; }
</style>
</head>
<body>
<h2>Fortran Tutorial for Beginners</h2>
<p>Fortran, bắt nguồn từ Formula Translating System, là ngôn ngữ lập trình chung, mệnh lệnh.</p>
<p>Nó dùng cho tính toán số và khoa học.</p>
</body>
</html>

Ví dụ 2: h3 italic + li oblique 5deg

<!DOCTYPE html>
<html>
<head>
<style>
h3 {
    font-style: italic;
    background-color: mediumpurple;
    color: white; text-align: center; padding: 1rem;
}
li {
    font-family: "Comic Sans MS", cursive;
    font-style: oblique 5deg;
}
</style>
</head>
<body>
<h3>Developers Best Practices Tutorial</h3>
<ul>
    <li>Documentation is the key</li>
    <li>Follow the standards</li>
    <li>Write to be Reviewed</li>
</ul>
</body>
</html>

Font Shorthand

/* font: style variant weight stretch size/line-height family */
font: italic 1.2rem/1.5 system-ui;
font: oblique 10deg bold 1rem/1.4 Georgia, serif;

Variable Fonts: font-style + font-weight

@font-face {
    font-family: 'Inter';
    src: url('Inter-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal oblique 0deg 20deg; /* Hỗ trợ oblique variable */
}

.body { font-family: 'Inter'; font-weight: 400; }
.emphasis { font-style: italic; }       /* True italic nếu có */
.slanted { font-style: oblique 12deg; } /* Variable oblique */

Lưu ý

font-style được kế thừa
<em>, <i>, <cite>, <address>, <var> mặc định có font-style: italic
Reset: em, i, cite, address, var { font-style: normal; } nếu cần