CSS Text & Fonts
The main content of web pages is text. CSS provides rich properties to control text font, size, color, spacing, and alignment.
Font Properties
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 |
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
HTML
<style>
p {
font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
</style>
<p>This is a paragraph example.</p>
Text Properties
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) |
Text Alignment
Example
HTML
<style>
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }
</style>
<div class="left">Left aligned (default)</div>
<div class="center">Center aligned</div>
<div class="right">Right aligned</div>
<div class="justify">Justified text, auto-adjusts word spacing</div>
Text Decoration
Example
HTML
<style>
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.none { text-decoration: none; }
</style>
<div class="underline">Underlined text</div>
<div class="overline">Overlined text</div>
<div class="line-through">Strikethrough text</div>
<div class="none">No decoration (removes default link underline)</div>
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
HTML
<style>
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
<h1>Heading with shadow</h1>
Text Overflow
Combined with overflow and white-space for handling text overflow:
Example
HTML
<style>
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
border: 1px solid #ccc;
padding: 8px;
}
</style>
<div class="ellipsis">This is a long text that will be truncated with ellipsis</div>
❓ 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.
Q Why doesn't text-overflow: ellipsis work sometimes?
A Ellipsis needs three conditions simultaneously: `white-space: nowrap` (no line breaks), `overflow: hidden` (hide overflow), and `width` or `max-width` (finite width). Missing any one prevents it from working.
📖 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.