Kiểu chữ

Font được nối vào thế nào

Hai nửa phải khớp nhau: app khai font và đặt tên biến, gói đọc biến đó trong khối @theme của nó. Thiếu nửa phía app thì lỗi xảy ra lặng lẽ chứ không ồn ào: var(--font-inter) không có giá trị dự phòng, nên cả khai báo thành không hợp lệ lúc tính giá trị và chữ thừa hưởng font mặc định của trình duyệt — phần đuôi "Inter", system-ui, sans-serif viết sau nó không bao giờ tới lượt. Đặt biến này là bắt buộc.

// app/layout.tsx — the APP loads Inter and publishes it as --font-inter.
// The package never bundles a font; it only consumes the variable.
import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin', 'vietnamese'],
  weight: ['400', '500', '600', '700', '800'],
  display: 'swap',
  variable: '--font-inter',
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${inter.variable} font-sans antialiased`}>{children}</body>
    </html>
  )
}

/* @comitor/ui/styles.css — the two lines the package actually ships */
@theme inline {
  --font-sans: var(--font-inter), "Inter", system-ui, sans-serif;
  --font-mono: var(--font-inter-mono, "Geist Mono"), ui-monospace, monospace;
}

Giá trị dự phòng của font đơn cách được viết bên trong var(--font-inter-mono, "Geist Mono") chứ không viết sau nó trong danh sách, và đó là cố ý: một var() không có dự phòng trỏ vào một biến chưa khai báo làm cả khai báo không hợp lệ lúc tính giá trị, nên font-mono sẽ thừa hưởng font xung quanh thay vì đi tiếp xuống danh sách. Gần như không app nào đặt --font-inter-mono, nên nó có dự phòng ngay trong var; còn --font-inter thì app nào cũng phải đặt, vì vậy dòng sans không kèm dự phòng.

Bảng thang chữ

Các bậc dưới đây là thang có sẵn của Tailwind. Gói cố ý không khai lại --text-* trong khối @theme của nó — không có thang chữ Comitor nào phải học thêm ngoài thang của Tailwind. Thứ gói nắm thay vào đó là cỡ chữ gốc, ở mục kế tiếp.

Các cỡ là giá trị ở bậc cỡ chữ mặc định. Vì cả thang viết bằng rem, mọi con số ở đây đổi theo khi người dùng đổi cỡ chữ.

Cỡ chữ là cài đặt của người dùng

Một trong năm trục hiển thị gói cung cấp. Nó co giãn cỡ chữ gốc, không phải thang chữ — nên icon và chiều cao control, vốn lấy cỡ từ thang khoảng cách bằng rem, to ra và nhỏ lại cùng nhịp với chữ, thay vì đứng yên trong khi nhãn quanh chúng đổi cỡ.

'use client'

// The font-size axis is a user setting, wired once in the root layout with
// <FontSizeProvider> and exposed anywhere with <FontSizeControl>. Its group name
// and the three option labels follow ComitorLocaleProvider — Small / Medium /
// Large in English, Nhỏ / Vừa / Lớn under locale="vi". To reword, pass label
// and optionLabels (all three sizes at once).
import { FontSizeControl } from '@comitor/ui/shell'

export function DisplaySettings() {
  return <FontSizeControl />
}

Quy tắc