illegalCreed

中文

English

中文

English

Appearance

参考 ​

基于 CSS 现代标准 · 核于 2026-06

速查 ​

  • 字体栈永远带通用族兜底：font-family: "Inter", system-ui, sans-serif;（逐字符回退）
  • @font-face 只发 WOFF2；可变字体用范围声明 font-weight: 100 900，优先用 font-weight 等标准属性而非 font-variation-settings
  • 加载默认 font-display: swap（FOUT），零 CLS 用 optional，图标字体才用 block（FOIT）；关键字体 preload 带 crossorigin
  • 压 CLS：size-adjust + ascent-override / descent-override / line-gap-override 对齐回退字体度量
  • line-height 无单位数；text-align: start/end 优于物理方向；中文首行缩进 text-indent: 2em
  • 防溢出首选 overflow-wrap: break-word；单行省略号 = nowrap + overflow:hidden + text-overflow:ellipsis
  • 现代折行：text-wrap: balance（标题，Baseline 2024）/ text-wrap: pretty（正文，Baseline 新近可用）
  • ::marker 只接受 color/font-*/content 等有限属性；要盒模型效果改 ::before
  • 计数器三步：counter-reset → counter-increment → counter()；多级编号用 counters(名, ".")

字体属性速查 ​

属性作用关键值
font-family字体族优先级列表字体名…，通用族兜底
font-size字号16px / 1rem / 1.25em / clamp()
font-weight字重400/700；可变字体连续值 100–900
font-style斜体normal / italic / oblique <角度>
font-stretch / font-width字宽condensed / expanded / 75%–125%
font-optical-sizing光学尺寸auto / none
font-variation-settings可变字体轴（底层兜底）"wght" 550, "GRAD" 88
font-feature-settingsOpenType 特性"liga" 1, "calt" 0
font-variant-*小型大写/连字/数字样式small-caps / tabular-nums …
font-synthesis禁/允许合成粗斜体none / weight style
font（简写）一行设多项italic 700 16px/1.5 "Inter", sans-serif

通用字体族与可变字体轴 ​

通用字体族：serif、sans-serif、monospace、cursive、fantasy、system-ui、ui-serif、ui-sans-serif、ui-monospace、ui-rounded、math、emoji、fangsong。

可变字体五个注册轴（小写标签，优先用对应标准属性）：

轴标签标准属性
字重wghtfont-weight
字宽wdthfont-stretch / font-width
斜角slntfont-style: oblique <角度>
斜体italfont-style: italic
光学尺寸opszfont-optical-sizing

自定义轴用大写标签（如 GRAD / SOFT），只能经 font-variation-settings 设置。

@font-face 描述符速查 ​

描述符作用
font-family自定义字体名（必填）
src文件来源（必填）：local(...) / url(...) format(...) tech(...)
font-display加载期策略：auto/block/swap/fallback/optional
font-weight该文件字重；可变字体用范围 100 900
font-style该文件样式；可范围 oblique 0deg 10deg
font-stretch该文件字宽；可范围 75% 125%
unicode-range子集化：本文件只覆盖某段码位
size-adjust整体缩放系数（对齐 x-height，压 CLS）
ascent-override / descent-override / line-gap-override覆盖度量（压 CLS）
font-feature-settings / font-variation-settings默认开启的 OpenType 特性 / 轴

font-display 时间线：

值阻塞期（FOIT）交换期（FOUT）
block约 3s无限
swap0ms无限
fallback约 100ms约 3s
optional约 100ms无（不到就这次不换）

文字排版属性速查 ​

属性作用关键值
line-height行高无单位 1.5（强烈推荐）
letter-spacing字符间距-0.02em / 0.08em
word-spacing词间距主要用于西文
text-align水平对齐start / end / center / justify
text-indent首行缩进2em（中文段首）
text-decoration下划线/删除线underline wavy red + text-underline-offset
text-transform大小写（仅显示）uppercase / capitalize

折行 / 截断属性速查 ​

属性作用关键值
white-space空白 + 折行总开关nowrap / pre / pre-wrap / pre-line
text-overflow溢出末尾标记ellipsis（需配 nowrap+overflow:hidden）
overflow-wrap放不下才断词break-word（首选防溢出）
word-break断行激进度break-all（任意字符）/ keep-all（CJK 不断字）
hyphens自动连字符auto（需正确 <html lang>）
text-wrap折行策略简写balance（标题）/ pretty（正文）/ nowrap / stable
-webkit-line-clamp多行省略号行数（配 display:-webkit-box）

列表 / 计数器属性速查 ​

属性 / 函数作用
list-style-type标记符号：disc/decimal/cjk-decimal/字符串/none
list-style-positionoutside（默认）/ inside
list-style-image图片标记（多被 ::marker { content } 取代）
::marker直接样式化标记（仅 color/font-*/content 等有限属性）
counter-reset建/归零/reversed() 计数器
counter-increment自增/自减计数器
counter-set更新已存在的计数器
counter(名, 样式)显示单层计数器
counters(名, 分隔符)显示整条嵌套链（多级编号）
@counter-style自定义编号系统（system/symbols/suffix）

现代特性 Baseline 状态（2026-06 核） ​

特性状态用法建议
可变字体（font-variation-settings / 注册轴）✅ Baseline 广泛可用放心用，优先标准属性
font-display✅ Baseline 广泛可用放心用
size-adjust / ascent-override 系列✅ Baseline 广泛可用压 CLS 放心用
::marker（color / font-* / content）✅ Baseline 广泛可用放心用（盒模型属性无效）
@counter-style✅ Baseline 广泛可用放心用
text-wrap: balance✅ Baseline 2024（新近可用）标题用，≤6 行生效，渐进增强
text-wrap: pretty🟡 Baseline 2024 新近可用（各家实现深浅不一）正文用，纯渐进增强
line-clamp（无前缀标准）🟡 逐步落地暂仍用 -webkit-line-clamp 兜底
text-wrap: avoid-orphans🟠 暂无浏览器实现不要依赖

权威链接 ​

标准 / 规范

课程 / 指南

兼容性 / 调试

相关页 ​