返回顶部
F

Fonts字体选择与实现

Choose and implement web typography avoiding common rendering, pairing, and hierarchy mistakes.

作者: admin | 来源: ClawHub
源自
ClawHub
版本
V 1.0.0
安全检测
已通过
1,082
下载量
免费
免费
2
收藏
概述
安装方式
版本历史

Fonts

Display vs Text Fonts

  • - Display fonts (Abril Fatface, Bebas Neue, Lobster) are for headings 24px+ only—using them for body text destroys readability
  • If a font looks decorative or has extreme thick/thin contrast, it's display—not for paragraphs
  • Text fonts (Inter, Roboto, Georgia) are designed for 12-18px—use these for body copy

Pairing Traps

  • - Two fonts too similar look like a mistake—if you can't tell them apart instantly, use one font
  • Contrast in category works: serif heading + sans-serif body, or different weights of same family
  • Two decorative fonts clash—never pair Lobster with Pacifico
  • Safe pairs: same superfamily (Roboto + Roboto Slab) or proven combos (Playfair Display + Source Sans Pro)

Weight and Rendering

  • - Thin weights (100-300) render poorly on Windows—avoid for body text, use 400+ for cross-platform
  • Light fonts on dark backgrounds look thinner—bump weight up one level for dark mode
  • Faux bold (browser-generated) looks wrong—only use weights the font actually includes
  • Check font has italic—faux italic (slanted roman) is noticeably worse than true italic

Line Height and Length

  • - Body text needs 1.4-1.6 line-height—1.0 or 1.2 makes paragraphs unreadable walls
  • Headings need tighter line-height (1.1-1.3)—large text with 1.5 line-height has awkward gaps
  • Line length 45-75 characters max—wider than 75 chars causes readers to lose their place
  • Set max-width on text containers in ch units: INLINECODE1

All Caps

  • - ALL CAPS needs increased letter-spacing—without it, letters collide and look cramped
  • INLINECODE2 + letter-spacing: 0.05em minimum
  • Never use all caps for more than a few words—extended caps text is significantly harder to read
  • Small caps (font-variant: small-caps) only if font supports it—faux small caps look amateurish

Widows and Orphans

  • - Single word alone on last line of paragraph looks broken—adjust text or container width
  • INLINECODE5 (CSS) distributes lines more evenly in headings
  • INLINECODE6 for body text—prevents orphans in browsers that support it
  • Manual fix: non-breaking space ( ) between last two words

Loading and Performance

  • - font-display: swap prevents invisible text—without it, text is blank until font loads
  • Subset fonts to characters you need—Latin-only saves 60%+ over full Unicode
  • WOFF2 is the only format you need—universal support, best compression
  • Preload critical fonts: INLINECODE9

System Font Stack

CODEBLOCK0

  • - Zero load time, native look per platform—use for UI-heavy apps
  • INLINECODE10 is now widely supported—simpler than listing all fallbacks
  • Always end with generic fallback (sans-serif, serif, monospace)

Hierarchy Mistakes

  • - Using too many font sizes—stick to a type scale (1.25 or 1.333 ratio), not random sizes
  • Headings not distinct enough from body—skip at least one scale step between h1 and body
  • Overusing bold—if everything is emphasized, nothing is emphasized
  • Color as only differentiator—size and weight should establish hierarchy before color

标签

skill ai

通过对话安装

该技能支持在以下平台通过对话安装:

OpenClaw WorkBuddy QClaw Kimi Claude

方式一:安装 SkillHub 和技能

帮我安装 SkillHub 和 fonts-1776420039 技能

方式二:设置 SkillHub 为优先技能安装源

设置 SkillHub 为我的优先技能安装源,然后帮我安装 fonts-1776420039 技能

通过命令行安装

skillhub install fonts-1776420039

下载

⬇ 下载 Fonts v1.0.0(免费)

文件大小: 2.39 KB | 发布时间: 2026-4-17 20:03

v1.0.0 最新 2026-4-17 20:03
Initial release

Archiver·手机版·闲社网·闲社论坛·羊毛社区· 多链控股集团有限公司 · 苏ICP备2025199260号-1

Powered by Discuz! X5.0   © 2024-2025 闲社网·线报更新论坛·羊毛分享社区·http://xianshe.com

p2p_official_large
返回顶部