คุณสมบัติใดที่ควบคุมข้อความและแบบอักษร

Question

Accepted Answer

การพิมพ์ถูกควบคุมโดยตระกูลของคุณสมบัติ `font-*` และ `text-*` การได้มันให้ถูกต้องเป็นส่วนใหญ่ของสิ่งที่ทำให้หน้าดูเรียบร้อยและอ่านได้

```css
.text {
  font-family: "Inter", system-ui, sans-serif; /* with fallbacks */
  font-size: 1rem;       /* size (use rem for accessibility) */
  font-weight: 600;      /* 100–900; 400 normal, 700 bold */
  font-style: italic;    /* normal | italic */
  line-height: 1.5;      /* spacing between lines — unitless is best */
  letter-spacing: 0.02em;/* tracking between characters */
}
```

## font-family fallback stacks

```css
font-family: "Inter", system-ui, -apple-system, sans-serif;
```

เบราว์เซอร์พยายามใช้แต่ละแบบอักษรตามลำดับจนกว่าแบบอักษรหนึ่งจะพร้อมใช้ได้ จบด้วย **generic family** (`sans-serif`, `serif`, `monospace`) เสมอเพื่อให้ข้อความแสดงผลแม้ว่าแบบอักษรที่กำหนดเองจะล้มเหลว `system-ui` ใช้แบบอักษรเจาะจงของระบบปฏิบัติการ (เร็ว ไม่มีการดาวน์โหลด)

## คุณสมบัติเค้าโครงข้อความ

```css
.text {
  text-align: center;        /* left | right | center | justify */
  text-decoration: underline;/* underline | line-through | none */
  text-transform: uppercase; /* UPPERCASE | lowercase | Capitalize */
  white-space: nowrap;       /* prevent wrapping */
  word-break: break-word;    /* break long words/URLs */
}
```

## line-height: ใช้ค่าที่ไม่มีหน่วย

```css
line-height: 1.5;    /* ✅ 1.5 × the element's font-size — scales correctly */
line-height: 24px;   /* ⚠️ fixed — doesn't adapt if font-size changes */
```

`line-height` **ที่ไม่มีหน่วย** คูณขนาดแบบอักษรของแต่ละองค์ประกอบของมันเอง ดังนั้นมันจึงยังคงเป็นสัดส่วนเมื่อองค์ประกอบที่ซ้อนกันมีขนาดต่างกัน — วิธีที่แนะนำ

## การตัดข้อความ (ความต้องการทั่วไป)

```css
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* shows "..." when text is cut off */
}
```

## ทำไมถึงสำคัญ

คุณสมบัติข้อความขับเคลื่อนความสามารถในการอ่านและลำดับชั้นของภาพ — `font-size`/`weight` เพื่อเน้น `line-height` (~1.5) สำหรับการอ่านที่สบาย fallback stacks เพื่อความน่าเชื่อถือ และ `text-overflow` เพื่อการตัดที่ชัดเจน

การพิมพ์ที่ดีเป็นส่วนสำหัญของ UI ที่ดูดี