第08篇：字体与排版基础

第08篇字体与排版基础文字是网页最主要的信息载体。无论设计多么精美的页面如果字体选择不当、排版混乱用户体验都会大打折扣。本篇将系统讲解 CSS 字体属性的使用方法以及如何建立专业的排版系统。学习目标掌握font-family的字体栈写法与回退机制理解font-size的常用单位及选择策略掌握font-weight、font-style的用法理解line-height对可读性的影响学会使用font-face引入自定义字体了解 Web 字体格式woff2、woff、ttf与加载优化核心知识点一、font-family字体栈浏览器会按顺序尝试字体直到找到可用的为止。body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;}字体栈解析字体说明-apple-systemmacOS/iOS 系统默认字体San FranciscoBlinkMacSystemFontChrome on macOS 的系统字体Segoe UIWindows 系统默认字体PingFang SC苹果中文系统字体Microsoft YaHeiWindows 中文字体sans-serif通用无衬线回退中文字体的特殊处理/* 现代网站推荐的中文字体栈 */body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Arial,sans-serif;}/* 衬线字体栈适合长文阅读 */.article{font-family:Noto Serif SC,Source Han Serif SC,SimSun,STSong,serif;}/* 等宽字体栈代码展示 */code, pre{font-family:SF Mono,Fira Code,Consolas,Monaco,Courier New,monospace;}字体栈最佳实践系统字体优先-apple-system、Segoe UI等系统字体加载最快且符合用户习惯中文放在英文后面避免英文字符被中文字体渲染中文字体的英文字形通常不够美观通用族名收尾sans-serif、serif、monospace作为最终回退用引号包裹含空格的字体名如Microsoft YaHei二、font-size字号设置常用单位对比单位相对/绝对说明px绝对像素点最常用em相对相对于父元素的字体大小rem相对相对于根元素html的字体大小%相对相对于父元素的字体大小百分比html{font-size:16px;/* 浏览器默认值通常不需要设置 */}body{font-size:1rem;/* 16px */}h1{font-size:2.5rem;/* 40px */}h2{font-size:2rem;/* 32px */}.small-text{font-size:0.875rem;/* 14px */}为什么推荐用rem/* 用 rem只需改一处全站字号联动变化 */html{font-size:16px;/* 默认 */}media(min-width:1200px){html{font-size:18px;/* 大屏字号整体放大 */}}/* 所有用 rem 的元素会自动按比例缩放 */ 用户的浏览器可以设置基础字号如设为 20px 以适应视力需求。用remrespect 用户的设置用px则无视。三、font-weight字重.normal{font-weight:400;}/* 正常/常规 */.bold{font-weight:700;}/* 粗体 *//* 数值范围100 - 900 */.thin{font-weight:100;}.extra-light{font-weight:200;}.light{font-weight:300;}.regular{font-weight:400;}.medium{font-weight:500;}.semi-bold{font-weight:600;}.bold{font-weight:700;}.extra-bold{font-weight:800;}.black{font-weight:900;}注意不是所有字体都提供所有字重。如果指定了字体不存在的字重浏览器会自动模拟效果不佳使用可变字体Variable Fonts可以实现 1-1000 之间的任意字重四、line-height行高行高决定了文本行的垂直间距是影响可读性的关键属性。/* 无单位数值推荐相对于当前元素的字体大小 */p{line-height:1.6;/* 字体大小的 1.6 倍 */}/* 百分比相对于当前元素的字体大小 */p{line-height:160%;/* 等同于 1.6 */}/* 固定像素值不推荐用于正文 */.heading{line-height:32px;}为什么推荐无单位数值body{font-size:16px;line-height:1.6;/* 计算值 25.6px */}h1{font-size:32px;/* line-height 继承的是 1.6不是 25.6px *//* 所以 h1 的行高 32px * 1.6 51.2px比例保持一致 */}/* 如果 body 写的是 line-height: 25.6px *//* h1 会继承 25.6px对于 32px 的字来说行高就太紧了 */推荐行高值场景推荐 line-height大标题1.2 - 1.3小标题1.3 - 1.4正文1.5 - 1.8中文推荐 1.6-1.8紧凑列表1.4 - 1.5五、font-face自定义字体基本用法font-face{font-family:MyFont;/* 自定义字体名称 */src:url(fonts/myfont.woff2)format(woff2),url(fonts/myfont.woff)format(woff);font-weight:400;/* 该文件对应的字重 */font-style:normal;/* 该文件对应的样式 */font-display:swap;/* 加载策略 */}body{font-family:MyFont,sans-serif;}Web 字体格式格式扩展名说明WOFF2.woff2首选压缩率最高现代浏览器全支持WOFF.woff次选兼容性更好IE9TTF/OTF.ttf/.otf原始格式文件大不推荐直接用于 Webfont-face{font-family:CustomFont;src:url(custom.woff2)format(woff2),/* 现代浏览器 */url(custom.woff)format(woff),/* 旧浏览器回退 */url(custom.ttf)format(truetype);/* 终极回退 */}font-display加载策略font-face{font-family:MyFont;src:url(myfont.woff2)format(woff2);font-display:swap;/* 推荐先显示备用字体加载完成后再切换 */}值行为auto浏览器默认行为block短暂 invisible然后切换FOITswap立即显示备用字体加载后切换FOUTfallback极短时间 block然后 swapoptional类似 fallback但如果加载慢就放弃swap是最佳选择用户能立即看到文字内容即使是用备用字体加载完成后平滑切换到目标字体。多个字重需要分别声明font-face{font-family:MyFont;src:url(myfont-regular.woff2)format(woff2);font-weight:400;font-style:normal;}font-face{font-family:MyFont;src:url(myfont-bold.woff2)format(woff2);font-weight:700;font-style:normal;}/* 使用时 */.normal{font-family:MyFont;font-weight:400;}.bold{font-family:MyFont;font-weight:700;}六、完整排版系统示例/* 基础设置 */html{font-size:16px;-webkit-font-smoothing:antialiased;/* 字体抗锯齿macOS */-moz-osx-font-smoothing:grayscale;}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-size:1rem;line-height:1.7;color:#333;}/* 标题层级 */h1{font-size:2.5rem;/* 40px */line-height:1.2;font-weight:700;margin:2rem 0 1rem;}h2{font-size:2rem;/* 32px */line-height:1.3;font-weight:600;margin:1.8rem 0 0.8rem;}h3{font-size:1.5rem;/* 24px */line-height:1.4;font-weight:600;margin:1.5rem 0 0.6rem;}h4{font-size:1.25rem;/* 20px */line-height:1.4;font-weight:600;}/* 正文与辅助文字 */p{margin:0 0 1rem;}.small{font-size:0.875rem;/* 14px */line-height:1.5;}.caption{font-size:0.75rem;/* 12px */line-height:1.5;color:#666;}/* 强调 */strong, b{font-weight:700;}em, i{font-style:italic;}/* 代码 */code{font-family:SF Mono,Consolas,monospace;font-size:0.875em;background:#f5f5f5;padding:2px 6px;border-radius:3px;}pre{font-family:SF Mono,Consolas,monospace;font-size:0.875rem;line-height:1.6;background:#1a1a2e;color:#fff;padding:20px;border-radius:8px;overflow-x:auto;}动手练习练习 1建立字体栈为你的项目建立三套字体栈正文字体栈无衬线适合屏幕阅读文章标题字体栈衬线适合长文阅读代码字体栈等宽适合代码展示确保每套都包含系统字体、通用中文字体、通用族名练习 2排版层级系统设计一个 5 级标题h1-h5 正文 小字的排版系统用rem单位以 16px 为基准h1 为 40pxh5 为 16px正文 16px小字 14px每个层级设置合适的 line-height大标题紧凑正文宽松设置合适的 margin让标题间距有节奏感练习 3font-face 实战假设你有一个名为 “Inter” 的字体文件编写font-face引入 Regular400和 Bold700两个字重设置font-display: swap写一段 HTML 展示该字体的正文和粗体效果设置合理的备用字体栈常见误区 ⚠️误区真相“font-family写一种字体就够了”用户的电脑可能没有该字体。字体栈是必需的至少要有通用族名作为回退“中文字体名不需要引号”含空格或中文的字体名必须用引号包裹如Microsoft YaHei“px比rem更精确”rem在响应式设计和用户自定义字号时更灵活且同样精确“line-height: 1.6em和1.6一样”不一样1.6em会被子元素继承为固定值1.6会按比例继承“font-weight: bold和700一样”效果相同但数值更精确且可变字体支持 1-1000 的任意值“引入字体只需一个格式就够了”WOFF2 压缩率最高但旧浏览器不支持。建议至少提供 WOFF2 WOFF“所有中文字体都支持 9 种字重”大多数中文字体只有 Regular 和 Bold 两种字重“自定义字体加载越快越好不需要策略”不设置font-display可能导致文字不可见FOIT用户看到的是空白速查卡片 推荐字体栈/* 无衬线正文 */font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;/* 等宽代码 */font-family:SF Mono,Fira Code,Consolas,monospace;字号层级速查16px 基准层级rempxline-heighth12.5rem40px1.2h22rem32px1.3h31.5rem24px1.4h41.25rem20px1.4body1rem16px1.6-1.8small0.875rem14px1.5font-face 模板font-face{font-family:MyFont;src:url(font.woff2)format(woff2),url(font.woff)format(woff);font-weight:400;font-style:normal;font-display:swap;}扩展阅读MDN: font-familyMDN: font-facesystemfontstack.com英文系统字体栈参考Google Fonts — 免费 Web 字体阿里巴巴普惠体 — 免费商用中文字体配套代码 - CODE/08/typography-system.html — 完整排版系统演示CODE/08/custom-font.html — font-face 自定义字体示例下一步进入 第09篇文本样式与控制学习更多文字视觉效果。