Bài 8. Văn bản, font chữ và biểu tượng

Một số khái niệm

Nguyên tắc dễ đọc: cỡ chữ thân bài 16–18px, giãn dòng 1.5–1.8, dòng dài 45–75 ký tự, tương phản đủ, tránh căn đều (justify) tiếng Việt trên màn hình hẹp vì tạo khoảng trắng lớn.

Định dạng văn bản

<style>
  .t1 { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: #2e7d32; font-weight: 700; }
  .t2 { font-size: 28px; font-weight: 800; line-height: 1.2; margin: 4px 0; }
  .t3 { line-height: 1.8; max-width: 55ch; color: #455a64; }
  .t4 { text-decoration: underline wavy #e53935; text-underline-offset: 4px; }
  .t5 { width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #ddd; padding: 4px; }
  .t6 { text-shadow: 2px 2px 0 #ffcc80; font-size: 22px; font-weight: 700; }
</style>
<div class="t1">Phát triển web</div><div class="t2">Học CSS từ cơ bản</div>
<p class="t3">Giãn dòng 1.8 và giới hạn độ dài dòng giúp đoạn văn thoáng, dễ đọc trên mọi màn hình.</p>
<p class="t4">Gạch chân lượn sóng</p><div class="t5">Văn bản rất dài bị cắt bằng dấu ba chấm ở cuối</div><p class="t6">Bóng chữ</p>

Nhúng Google Fonts có tiếng Việt

<!-- Trong <head>: chọn font có hỗ trợ Vietnamese tại fonts.google.com -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700&display=swap" rel="stylesheet">

body { font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Tự host font (tải tệp .woff2) */
@font-face {
  font-family: "TBU Sans";
  src: url("../fonts/tbu-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

Font tốt cho tiếng Việt: Be Vietnam Pro, Inter, Roboto, Noto Sans/Serif, Lexend, Montserrat. Chỉ tải các độ đậm thật sự dùng để trang nhẹ.

Biểu tượng

<!-- Font Awesome 6 (CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<i class="fa-solid fa-house"></i> <i class="fa-brands fa-github"></i>

<!-- SVG nội tuyến: nét, màu theo chữ nhờ currentColor -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12l9-9 9 9M5 10v10h14V10"/></svg>

<style>.ic{display:inline-flex;align-items:center;gap:6px;color:#1565c0;font-size:18px;margin-right:16px}</style>
<span class="ic"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12l9-9 9 9M5 10v10h14V10"/></svg>Trang chủ</span>
<span class="ic" style="color:#2e7d32"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/></svg>Hoàn thành</span>