CSS: CSS Text & Fonts
Last updated: 2026-10-13
The main content of web pages is text. CSS provides rich properties to control text font, size, color, spacing, and alignment.
1. Font Properties
(1) Font Properties Quick Reference
| Property | Common Values | Purpose |
|---|---|---|
font-family |
"Microsoft YaHei", Arial, sans-serif |
Set font (multiple fallbacks) |
font-size |
16px, 1.2em, 1rem, 100% |
Font size |
font-weight |
normal(400), bold(700), 100~900 |
Font weight |
font-style |
normal, italic, oblique |
Font style (italic/normal) |
line-height |
1.5(unitless), 24px, 150% |
Line height (recommended 1.5-1.8) |
font |
italic bold 16px/1.8 sans-serif |
Shorthand for multiple properties |
(2) Font Stack Best Practice
✅ Font stack order:
font-family should go from most specific to most generic, e.g., font-family: "PingFang SC", "Microsoft YaHei", sans-serif;. Browsers try loading from left to right until finding an available font.
▶ Example
▶ Try it Yourself2. Text Properties
(1) Text Properties Quick Reference
| Property | Common Values | Purpose |
|---|---|---|
color |
#333, red, rgb(0,0,0) |
Text color |
text-align |
left, center, right, justify |
Horizontal alignment |
text-decoration |
none, underline, overline, line-through |
Text decoration |
text-indent |
2em, 20px |
First line indent |
letter-spacing |
2px, -1px |
Character spacing |
word-spacing |
5px |
Word spacing |
text-transform |
uppercase, lowercase, capitalize |
Text transformation |
text-shadow |
2px 2px 4px rgba(0,0,0,0.5) |
Text shadow |
text-overflow |
clip, ellipsis |
Overflow handling (needs overflow: hidden) |
(2) Text Alignment
▶ Example
▶ Try it Yourself(3) Text Decoration
▶ Example
▶ Try it Yourself(4) Text Shadow
⚠️ Readability reminder: While text shadows look nice, overuse reduces readability. Dark background with dark shadow is unreadable — ensure sufficient contrast between text and background.
▶ Example
▶ Try it Yourself(5) Text Overflow
Combined with overflow and white-space for handling text overflow:
▶ Example
▶ Try it Yourself❓ FAQ
Q How to set font stack for different languages?
A For Chinese:
font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;. Mac uses PingFang SC, Windows uses Microsoft YaHei, fallback to Noto Sans or system sans-serif.Q Does loading Google Fonts affect speed?
A Yes. Google Fonts requires additional network requests. Only load needed weights (don't load all 300/400/500/700 at once), and add
display=swap parameter so browsers use fallback font first, then replace when custom font loads.📖 Summary
- Text is the main content of web pages; CSS font and text properties let you precisely control every character's appearance
- From font selection and size to line height, alignment, indent and shadow — properly combining these properties greatly improves reading experience
- Remember: body text line height 1.5-1.8, first-line indent
text-indent: 2em, text overflowtext-overflow: ellipsis
📝 Exercises
- Create an article reading page with title, subtitle, and body paragraphs. Use different fonts, sizes, and colors to distinguish hierarchy.
- Demonstrate at least 4
text-decorationeffects (underline, overline, strikethrough, wavy). - Implement "single-line text overflow with ellipsis" — show long text in a fixed-width container with
...for overflow. - Use
text-shadowto add a glow effect to a heading.
