文字是网页内容的核心载体它承载着信息传达的重任。对于前端开发者而言仅仅将文字摆放在页面上是远远不够的如何精准地控制字体的外观、粗细、大小以及文本的对齐方式、行间距和字间距是打造优秀阅读体验的关键。CSS 为此提供了两大属性类别一类是直接作用于字符本身的字体样式属性另一类是影响文本块整体布局的文本布局属性本文将带你系统地学习这些核心属性从基础的字体颜色、种类、大小到高级的文字阴影、字母间距再到便捷的font简写为你构建完整的文本样式知识体系。一、字体颜色为文本赋予视觉基调color属性是设置文本样式最基础也最常用的属性它用于定义选中元素的前景内容的颜色。前景内容范围主要指文本同时也包括使用text-decoration属性添加的下划线、上划线或删除线等装饰线条的颜色。color属性可以接受任何合法的 CSS 颜色值颜色格式示例特点命名颜色red、blue、navy快速但选择有限十六进制#ff0000、#333333精确、常用RGB/RGBArgb(255, 0, 0)、rgba(0, 123, 255, 0.8)支持透明度控制HSL/HSLAhsl(0, 100%, 50%)直观调整色相、饱和度、亮度默认行为如果没有为元素单独设置color属性浏览器通常会为其应用一个默认颜色。对于大多数浏览器而言正文文本的默认颜色是黑色。示例代码/* 使用命名颜色 */.heading-primary{color:navy;}/* 使用十六进制颜色 */.body-text{color:#333333;}/* 使用 RGBA 颜色包含透明度 */.link{color:rgba(0,123,255,0.8);}讲解.heading-primary—— 直接使用了浏览器内置的命名颜色navy这是一种快速但选择有限的设色方式.body-text—— 使用了十六进制颜色#333333这是一种深灰色是现代网页设计中非常常用的正文颜色比纯黑色#000看起来更柔和能减少视觉疲劳.link—— 使用了带有透明度的rgba函数定义了一个蓝色并将其不透明度设置为80%RGBA优势使用rgba的优势在于颜色可以叠加在父元素的背景之上创造出丰富的层次感这在设置悬停效果或背景上的文本时特别有用。二、字体种类构建可靠的字体栈font-family属性允许你为文本指定一个字体或一个按优先级排列的字体列表。渲染机制当浏览器渲染页面时会从左到右依次检查列表中指定的字体是否在用户的操作系统中可用。如果第一个字体可用就使用它如果不可用就尝试下一个以此类推。如果列表中的所有字体都不可用浏览器将使用其默认字体。这个字体列表被称为字体栈。由于我们无法预知用户设备上安装了哪些字体构建一个健壮的字体栈至关重要。2.1 五大通用字体族最佳实践是在字体栈的最后以一个通用的字体族名称收尾。CSS 定义了五个通用字体族通用字体族特征适用场景serif衬线字体笔画末端有装饰性小线传统、正式、长文阅读sans-serif无衬线字体笔画末端无装饰现代、简洁、屏幕显示monospace等宽字体每个字符宽度相同代码、表格数据cursive手写字体装饰性、个性化fantasy装饰字体特殊效果、标题推荐收尾serif、sans-serif和monospace在大多数系统中都能给出比较合理的默认字体。引号规则当一个字体名称包含空格如Times New Roman或Trebuchet MS时必须用引号将其括起来。2.2 代码示例/* 为正文设置一个优先使用系统原生无衬线字体的字体栈 */body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;}/* 为标题设置一个优先使用衬线字体的字体栈 */h1, h2, h3{font-family:Times New Roman,Times,Georgia,serif;}/* 为代码块设置一个等宽字体栈 */code, pre{font-family:Courier New,Courier,Lucida Console,Monaco,monospace;}讲解字体栈优先级顺序设计意图正文-apple-system→BlinkMacSystemFont→Segoe UI→Roboto→Helvetica Neue→Arial→sans-serif优先使用macOS/iOS系统字体然后是Windows现代系统字体接着是Android系统字体最后是广泛可用的网络安全字体标题Times New Roman→Times→Georgia→serif偏好使用衬线字体营造传统、正式的阅读体验代码Courier New→Courier→Lucida Console→Monaco→monospace锁定等宽字体确保代码的对齐整齐核心价值这样做的好处是在不同操作系统上页面都能利用该平台最优化、加载最快的原生字体提供一致的阅读体验。三、字体大小掌握绝对与相对单位font-size属性用于控制文本的大小。它可以接受多种类型的值其中最常用的单位包括px像素、em、rem和百分比。单位类型参考基准特点px绝对单位固定像素值排版直观但缺乏灵活性em相对单位父元素的字体大小可缩放但嵌套时可能层层叠加rem相对单位根元素html的字体大小全局可控计算简单%相对单位父元素的字体大小与em类似最佳实践rem是现代CSS开发的首选。一个常见的实践是将根元素的font-size设置为10px或62.5%因为16px * 62.5% 10px这样1.4rem就直观地等于14px。示例代码/* 1. 将根字体大小设为 10px方便计算 */html{font-size:10px;/* 16px 的 62.5% 也是 10px */}/* 2. 其他所有元素使用 rem 单位定义大小 */h1{font-size:3.2rem;/* 32px */}h2{font-size:2.4rem;/* 24px */}p{font-size:1.6rem;/* 16px */line-height:1.5;}.small-text{font-size:1.2rem;/* 12px */}讲解这段代码建立了一个清晰的、基于 rem 的字体大小体系。元素rem 值对应像素用途html—10px基准方便心算h13.2rem32px一级标题h22.4rem24px二级标题p1.6rem16px正文.small-text1.2rem12px辅助文字核心优势这个体系最大的优势在于全局可维护性。如果有一天产品经理要求提升整个网站的字体大小以增强可读性你只需要修改html中这一处的font-size比如改为12px那么整个页面的所有文本都会按比例放大无需逐一修改无数个样式规则。四、字体样式与粗细塑造文本的形态4.1font-style—— 斜体控制font-style属性主要用于开启或关闭文本的斜体效果。值效果适用场景normal正常非斜体默认值用于在原本为斜体的元素上强制取消斜体italic真斜体字体本身有斜体版本时使用oblique模拟斜体字体本身没有斜体版本时浏览器通过倾斜正常字体来模拟使用频率你很少需要用到normal除非你需要在一个原本为斜体的元素如em或i标签的内容上强制取消斜体使其恢复为普通字体。4.2font-weight—— 字重控制font-weight属性用于设置文本的粗细。值类型示例说明关键字normal、boldnormal 400bold 700数值100~900100极细到900极粗步长为100⚠️重要前提能否显示所有这些粗细级别取决于你所使用的字体家族是否包含了这些字重版本。如果指定的字重不可用浏览器会尝试近似匹配。示例代码/* 将段落默认字体设置为正常非斜体字重为 400 */p{font-style:normal;font-weight:400;}/* 对引用块中的文字应用真斜体 */blockquote p{font-style:italic;}/* 对强调文本使用更粗的字重 */strong{font-weight:700;/* 等同于 bold */}/* 对特定标题使用更重的字重前提是字体支持 */.hero-title{font-weight:900;/* 极粗相当于 black */}讲解p元素显式设置了font-style: normal这本身是默认值但可以作为全局重置使用blockquote p则让引用中的段落呈现斜体这是一种常见的排版习惯用以区分引用内容和正文对于strong标签我们明确使用font-weight: 700来加粗以保证其在视觉上的强调效果.hero-title类尝试使用900的字重来制造强烈的视觉冲击这通常在超大标题上效果显著⚠️关键前提hero-title所使用的font-family字体必须包含 900 字重的变体否则浏览器可能只会将其显示为普通的700 粗体。五、文本转换与装饰细节之处的微调5.1text-transform—— 大小写转换text-transform属性用于控制文本的大小写转换它不改变原始文本内容仅在视觉上呈现不同的效果。值效果适用场景uppercase全大写导航项、按钮、标签lowercase全小写特殊设计风格capitalize首字母大写文章标题、列表项none不转换默认值取消继承的转换5.2text-decoration—— 文本装饰text-decoration是一个简写属性用于在文本上添加或移除装饰线。最常用场景text-decoration: none;—— 移除链接a元素默认的下划线。text-decoration还可以结合以下长写属性创造出更复杂的装饰效果长写属性控制内容示例text-decoration-line装饰线类型underline、overline、line-throughtext-decoration-style装饰线样式solid、dashed、dotted、wavytext-decoration-color装饰线颜色red、#ff0000示例代码/* 1. 导航链接全部转为大写 */.main-navigation a{text-transform:uppercase;text-decoration:none;/* 移除链接默认下划线 */}/* 2. 文章标题的每个单词首字母大写 */.article-title{text-transform:capitalize;}/* 3. 使用组合属性创建自定义的删除线效果 */.error-message{text-decoration-line:line-through;text-decoration-style:wavy;text-decoration-color:red;}讲解规则效果设计意图.main-navigation a大写 无下划线导航项看起来更加整洁和突出设计师可以用边框或背景等其他方式来表示交互状态.article-title每个单词首字母大写智能地将每个单词的首字母转换为大写适合文章标题.error-message波浪形红色删除线醒目的装饰效果非常适合用于显示错误或已失效的文本信息六、文字阴影为文本增添立体感text-shadow属性可以为文本添加一个或多个阴影效果是创造文字立体感、光晕效果或增加可读性的有力工具。语法text-shadow: h-offset v-offset blur-radius color;参数说明必需水平偏移量阴影相对于原始文本的水平位置正值向右负值向左✅垂直偏移量阴影相对于原始文本的垂直位置正值向下负值向上✅模糊半径阴影边缘的柔和程度数值越大越模糊❌默认0颜色阴影的颜色❌默认黑色多重阴影text-shadow的强大之处在于你可以通过逗号分隔来同时应用多个阴影。通过组合不同的偏移量、模糊度和颜色可以创造出霓虹灯、火焰、3D凸起等复杂的视觉效果。示例代码/* 1. 简单的右下角阴影增加立体感 */.card-title{text-shadow:2px 2px 4pxrgba(0,0,0,0.3);}/* 2. 多重阴影创造霓虹灯般的发光效果 */.neon-text{color:white;text-shadow:0 0 7px #fff,0 0 10px #fff,0 0 21px #fff,0 0 42px #0fa,0 0 82px #0fa,0 0 92px #0fa;}讲解.card-title—— 创建了一个经典的、柔和的投影。阴影向右下方各偏移 2px模糊半径为4px颜色使用了半透明的黑色这使得阴影与背景自然融合为标题文字增添了轻微的立体感这在卡片组件中非常常见.neon-text—— 创造了一个复杂的发光效果这是多重阴影的完美应用首先设置了多层白色阴影从内到外逐渐增加模糊半径形成了一个强烈的白色光芯接着通过添加更大模糊半径的青绿色#0fa阴影创造出霓虹光晕向外扩散的效果技术价值这种多层阴影叠加的技术是创造各种独特文字视觉风格的基石。七、文本对齐与行高构筑舒适的阅读流7.1text-align—— 水平对齐text-align属性用于控制内联级内容如文本在其包含块内的水平对齐方式。值效果适用场景left左对齐从左到右语言的正文默认值right右对齐数字、价格、日期center居中对齐标题、按钮、短文本justify两端对齐长段落、报纸排版⚠️justify注意justify会拉伸每一行的单词间距使文本行的首尾都与容器边缘对齐但若使用不当尤其是在长单词较多的段落中可能产生不美观的单词间隙。7.2line-height—— 行高控制line-height属性用于设置文本行盒的最小高度通俗地讲就是行与行之间的间距。最佳实践使用一个无单位的数字例如1.5。这个数字会作为一个乘数作用于当前元素的font-size。计算示例如果font-size为16px那么line-height: 1.5就计算为24px。继承优势使用无单位值的最大优势在于它的继承性子元素将继承这个乘数而不是一个计算后的固定像素值。这样无论子元素自身的字体大小如何变化都能保持一个恰当的比例。示例代码/* 为正文段落设置左对齐和舒适的行高 */p{text-align:left;line-height:1.6;font-size:16px;}/* 让标题居中对齐并调整其行高 */.article-heading{text-align:center;line-height:1.3;font-size:32px;}/* 设置两端对齐并注意配合连字符使用 */.justified-text{text-align:justify;hyphens:auto;/* 自动添加连字符以帮助改善单词间隙 */}讲解p元素 —— 设置了最常规的阅读对齐方式left和行高1.6。研究表明正文的行高在1.5 到 2 之间时人眼的阅读体验最为舒适1.6 是一个非常平衡的选择.article-heading—— 由于其字体较大32px如果使用相同的1.6 行高在多行标题时行与行之间会显得过于疏远因此使用了一个较小的1.3 行高来保持标题的紧凑与整体感.justified-text—— 设置了text-align: justify并额外设置了hyphens: auto。hyphens属性允许浏览器在单词内部适当的音节处自动插入连字符进行断词这能有效避免两端对齐文本中出现的巨大、不规则的单词间隙是提升两端对齐排版质量的绝佳搭档八、字母与单词间距微调局部的疏密letter-spacing和word-spacing这两个属性允许你精细地控制文本中字母之间以及单词之间的空隙。它们都属于微调属性在日常的段落文本中不经常使用但在特定的设计场景下它们能发挥巨大的作用。属性作用范围正值效果负值效果letter-spacing字母之间的间距增加间距文字更开阔、透气减少间距文字更紧凑word-spacing单词之间的间距增加间距减少间距⚠️使用注意使用这两个属性时通常不建议设置过大的值以免破坏单词的识别性和整体的阅读流畅度。示例代码/* 1. 为导航项增加字母间距使其更现代、透气 */.main-nav-item{text-transform:uppercase;letter-spacing:1.5px;font-size:14px;}/* 2. 为段落的第一行增加单词间距创造一种戏剧性的引导效果 */.intro-paragraph::first-line{letter-spacing:1px;word-spacing:3px;font-weight:bold;}讲解.main-nav-item—— 展示了letter-spacing在现代网页导航中的经典应用。将文本转换为大写text-transform: uppercase后字母之间在视觉上会显得过于拥挤此时增加1.5px的字母间距能为每个字符松绑使导航项看起来更加通透、有设计感尤其是在14px这样相对较小的字体尺寸上.intro-paragraph::first-line—— 使用了::first-line伪元素来单独选中段落的第一行内容。通过轻微增加letter-spacing和word-spacing配合加粗的字体可以创造出一种类似杂志文章首行的、略微舒展和引人注目的导语效果让读者自然地从这里开始阅读九、Font 简写化繁为简的一站式声明font属性是一个强大的简写形式它允许你在一行声明中同时设置多个与字体相关的属性。可设置属性font-style、font-variant、font-weight、font-stretch、font-size、line-height、font-family9.1 使用规则规则说明必需项只有font-size和font-family是绝对必需的缺少任何一个整个声明无效顺序要求font-size和line-height之间必须用斜线/分隔重置行为font简写会重置它未明确列出的所有字体相关属性为初始值包括font-style、font-weight等通常实践将那些不常用或被省略的属性如font-stretch放在前面最后以关键的font-size、可能的line-height和font-family结尾。示例代码/* 1. 一个完整的 font 简写 */.headline{font:italic small-caps bold 2.5rem/1.3Times New Roman,Georgia,serif;}/* 2. 一个最小化的 font 简写只包含必需项 */.body-copy{font:1rem/1.6Helvetica Neue,Arial,sans-serif;}讲解.headline—— 使用了一个完整的 font 简写。它同时设置了font-style: italicfont-variant: small-capsfont-weight: boldfont-size: 2.5remline-height: 1.3斜线分隔font-family: Times New Roman, Georgia, serif这一行代码完成了通常需要六行才能完成的工作.body-copy—— 演示了最小化的用法它省略了所有非必需项italic、small-caps、bold等只设置了必需的font-size: 1rem紧随斜线后的line-height: 1.6最后的font-family所有被省略的属性都将被重置为它们的初始值例如font-weight会变为normal⚠️使用注意因此掌握font简写可以显著提升编码效率但务必注意其属性和值的顺序以及对未声明属性的重置行为这是避免出现意外样式的关键。十、小结掌握文本与字体样式是 CSS 学习者从基础走向进阶的必经之路。属性类别核心属性关键要点字体颜色color支持命名颜色、十六进制、RGB/RGBA、HSL/HSLA字体种类font-family构建字体栈以通用字体族收尾字体大小font-sizerem是现代首选配合html { font-size: 10px }简化计算字体样式font-stylenormal、italic、oblique模拟斜体字体粗细font-weight100~900数值控制字体必须支持对应字重文本转换text-transformuppercase、lowercase、capitalize、none文本装饰text-decoration简写 text-decoration-line/style/color长写组合文字阴影text-shadow支持多重阴影创造霓虹灯、光晕等复杂效果文本对齐text-alignleft、right、center、justify行高line-height使用无单位数字如1.6继承性最佳字母/单词间距letter-spacing/word-spacing微调属性不宜过大Font简写font必需font-sizefont-family注意顺序和重置行为本文从最直观的color属性开始深入讲解了font-family字体栈的构建策略辨析了px、em、rem等字体大小单位的适用场景并展示了font-style、font-weight、text-transform等属性如何塑造文本的形态。在此基础上我们还探索了利用text-shadow创造视觉效果通过text-align和line-height构建舒适的阅读流使用letter-spacing进行微调以及最终利用font简写实现高效编码。此刻你已掌握了在网页上驾驭文字的核心技能。下一篇我们将继续深入 CSS 的精彩世界探索列表样式的奥秘。还在纠结 CSS 样式写得杂乱无章、布局频频踩坑收藏此文持续跟进后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货从基础样式到实战排版一站式学透快速提升前端页面编写能力
跟着 MDN 学CSS day_29：（掌握文本与字体样式的核心艺术）
发布时间：2026/5/30 1:19:38
文字是网页内容的核心载体它承载着信息传达的重任。对于前端开发者而言仅仅将文字摆放在页面上是远远不够的如何精准地控制字体的外观、粗细、大小以及文本的对齐方式、行间距和字间距是打造优秀阅读体验的关键。CSS 为此提供了两大属性类别一类是直接作用于字符本身的字体样式属性另一类是影响文本块整体布局的文本布局属性本文将带你系统地学习这些核心属性从基础的字体颜色、种类、大小到高级的文字阴影、字母间距再到便捷的font简写为你构建完整的文本样式知识体系。一、字体颜色为文本赋予视觉基调color属性是设置文本样式最基础也最常用的属性它用于定义选中元素的前景内容的颜色。前景内容范围主要指文本同时也包括使用text-decoration属性添加的下划线、上划线或删除线等装饰线条的颜色。color属性可以接受任何合法的 CSS 颜色值颜色格式示例特点命名颜色red、blue、navy快速但选择有限十六进制#ff0000、#333333精确、常用RGB/RGBArgb(255, 0, 0)、rgba(0, 123, 255, 0.8)支持透明度控制HSL/HSLAhsl(0, 100%, 50%)直观调整色相、饱和度、亮度默认行为如果没有为元素单独设置color属性浏览器通常会为其应用一个默认颜色。对于大多数浏览器而言正文文本的默认颜色是黑色。示例代码/* 使用命名颜色 */.heading-primary{color:navy;}/* 使用十六进制颜色 */.body-text{color:#333333;}/* 使用 RGBA 颜色包含透明度 */.link{color:rgba(0,123,255,0.8);}讲解.heading-primary—— 直接使用了浏览器内置的命名颜色navy这是一种快速但选择有限的设色方式.body-text—— 使用了十六进制颜色#333333这是一种深灰色是现代网页设计中非常常用的正文颜色比纯黑色#000看起来更柔和能减少视觉疲劳.link—— 使用了带有透明度的rgba函数定义了一个蓝色并将其不透明度设置为80%RGBA优势使用rgba的优势在于颜色可以叠加在父元素的背景之上创造出丰富的层次感这在设置悬停效果或背景上的文本时特别有用。二、字体种类构建可靠的字体栈font-family属性允许你为文本指定一个字体或一个按优先级排列的字体列表。渲染机制当浏览器渲染页面时会从左到右依次检查列表中指定的字体是否在用户的操作系统中可用。如果第一个字体可用就使用它如果不可用就尝试下一个以此类推。如果列表中的所有字体都不可用浏览器将使用其默认字体。这个字体列表被称为字体栈。由于我们无法预知用户设备上安装了哪些字体构建一个健壮的字体栈至关重要。2.1 五大通用字体族最佳实践是在字体栈的最后以一个通用的字体族名称收尾。CSS 定义了五个通用字体族通用字体族特征适用场景serif衬线字体笔画末端有装饰性小线传统、正式、长文阅读sans-serif无衬线字体笔画末端无装饰现代、简洁、屏幕显示monospace等宽字体每个字符宽度相同代码、表格数据cursive手写字体装饰性、个性化fantasy装饰字体特殊效果、标题推荐收尾serif、sans-serif和monospace在大多数系统中都能给出比较合理的默认字体。引号规则当一个字体名称包含空格如Times New Roman或Trebuchet MS时必须用引号将其括起来。2.2 代码示例/* 为正文设置一个优先使用系统原生无衬线字体的字体栈 */body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;}/* 为标题设置一个优先使用衬线字体的字体栈 */h1, h2, h3{font-family:Times New Roman,Times,Georgia,serif;}/* 为代码块设置一个等宽字体栈 */code, pre{font-family:Courier New,Courier,Lucida Console,Monaco,monospace;}讲解字体栈优先级顺序设计意图正文-apple-system→BlinkMacSystemFont→Segoe UI→Roboto→Helvetica Neue→Arial→sans-serif优先使用macOS/iOS系统字体然后是Windows现代系统字体接着是Android系统字体最后是广泛可用的网络安全字体标题Times New Roman→Times→Georgia→serif偏好使用衬线字体营造传统、正式的阅读体验代码Courier New→Courier→Lucida Console→Monaco→monospace锁定等宽字体确保代码的对齐整齐核心价值这样做的好处是在不同操作系统上页面都能利用该平台最优化、加载最快的原生字体提供一致的阅读体验。三、字体大小掌握绝对与相对单位font-size属性用于控制文本的大小。它可以接受多种类型的值其中最常用的单位包括px像素、em、rem和百分比。单位类型参考基准特点px绝对单位固定像素值排版直观但缺乏灵活性em相对单位父元素的字体大小可缩放但嵌套时可能层层叠加rem相对单位根元素html的字体大小全局可控计算简单%相对单位父元素的字体大小与em类似最佳实践rem是现代CSS开发的首选。一个常见的实践是将根元素的font-size设置为10px或62.5%因为16px * 62.5% 10px这样1.4rem就直观地等于14px。示例代码/* 1. 将根字体大小设为 10px方便计算 */html{font-size:10px;/* 16px 的 62.5% 也是 10px */}/* 2. 其他所有元素使用 rem 单位定义大小 */h1{font-size:3.2rem;/* 32px */}h2{font-size:2.4rem;/* 24px */}p{font-size:1.6rem;/* 16px */line-height:1.5;}.small-text{font-size:1.2rem;/* 12px */}讲解这段代码建立了一个清晰的、基于 rem 的字体大小体系。元素rem 值对应像素用途html—10px基准方便心算h13.2rem32px一级标题h22.4rem24px二级标题p1.6rem16px正文.small-text1.2rem12px辅助文字核心优势这个体系最大的优势在于全局可维护性。如果有一天产品经理要求提升整个网站的字体大小以增强可读性你只需要修改html中这一处的font-size比如改为12px那么整个页面的所有文本都会按比例放大无需逐一修改无数个样式规则。四、字体样式与粗细塑造文本的形态4.1font-style—— 斜体控制font-style属性主要用于开启或关闭文本的斜体效果。值效果适用场景normal正常非斜体默认值用于在原本为斜体的元素上强制取消斜体italic真斜体字体本身有斜体版本时使用oblique模拟斜体字体本身没有斜体版本时浏览器通过倾斜正常字体来模拟使用频率你很少需要用到normal除非你需要在一个原本为斜体的元素如em或i标签的内容上强制取消斜体使其恢复为普通字体。4.2font-weight—— 字重控制font-weight属性用于设置文本的粗细。值类型示例说明关键字normal、boldnormal 400bold 700数值100~900100极细到900极粗步长为100⚠️重要前提能否显示所有这些粗细级别取决于你所使用的字体家族是否包含了这些字重版本。如果指定的字重不可用浏览器会尝试近似匹配。示例代码/* 将段落默认字体设置为正常非斜体字重为 400 */p{font-style:normal;font-weight:400;}/* 对引用块中的文字应用真斜体 */blockquote p{font-style:italic;}/* 对强调文本使用更粗的字重 */strong{font-weight:700;/* 等同于 bold */}/* 对特定标题使用更重的字重前提是字体支持 */.hero-title{font-weight:900;/* 极粗相当于 black */}讲解p元素显式设置了font-style: normal这本身是默认值但可以作为全局重置使用blockquote p则让引用中的段落呈现斜体这是一种常见的排版习惯用以区分引用内容和正文对于strong标签我们明确使用font-weight: 700来加粗以保证其在视觉上的强调效果.hero-title类尝试使用900的字重来制造强烈的视觉冲击这通常在超大标题上效果显著⚠️关键前提hero-title所使用的font-family字体必须包含 900 字重的变体否则浏览器可能只会将其显示为普通的700 粗体。五、文本转换与装饰细节之处的微调5.1text-transform—— 大小写转换text-transform属性用于控制文本的大小写转换它不改变原始文本内容仅在视觉上呈现不同的效果。值效果适用场景uppercase全大写导航项、按钮、标签lowercase全小写特殊设计风格capitalize首字母大写文章标题、列表项none不转换默认值取消继承的转换5.2text-decoration—— 文本装饰text-decoration是一个简写属性用于在文本上添加或移除装饰线。最常用场景text-decoration: none;—— 移除链接a元素默认的下划线。text-decoration还可以结合以下长写属性创造出更复杂的装饰效果长写属性控制内容示例text-decoration-line装饰线类型underline、overline、line-throughtext-decoration-style装饰线样式solid、dashed、dotted、wavytext-decoration-color装饰线颜色red、#ff0000示例代码/* 1. 导航链接全部转为大写 */.main-navigation a{text-transform:uppercase;text-decoration:none;/* 移除链接默认下划线 */}/* 2. 文章标题的每个单词首字母大写 */.article-title{text-transform:capitalize;}/* 3. 使用组合属性创建自定义的删除线效果 */.error-message{text-decoration-line:line-through;text-decoration-style:wavy;text-decoration-color:red;}讲解规则效果设计意图.main-navigation a大写 无下划线导航项看起来更加整洁和突出设计师可以用边框或背景等其他方式来表示交互状态.article-title每个单词首字母大写智能地将每个单词的首字母转换为大写适合文章标题.error-message波浪形红色删除线醒目的装饰效果非常适合用于显示错误或已失效的文本信息六、文字阴影为文本增添立体感text-shadow属性可以为文本添加一个或多个阴影效果是创造文字立体感、光晕效果或增加可读性的有力工具。语法text-shadow: h-offset v-offset blur-radius color;参数说明必需水平偏移量阴影相对于原始文本的水平位置正值向右负值向左✅垂直偏移量阴影相对于原始文本的垂直位置正值向下负值向上✅模糊半径阴影边缘的柔和程度数值越大越模糊❌默认0颜色阴影的颜色❌默认黑色多重阴影text-shadow的强大之处在于你可以通过逗号分隔来同时应用多个阴影。通过组合不同的偏移量、模糊度和颜色可以创造出霓虹灯、火焰、3D凸起等复杂的视觉效果。示例代码/* 1. 简单的右下角阴影增加立体感 */.card-title{text-shadow:2px 2px 4pxrgba(0,0,0,0.3);}/* 2. 多重阴影创造霓虹灯般的发光效果 */.neon-text{color:white;text-shadow:0 0 7px #fff,0 0 10px #fff,0 0 21px #fff,0 0 42px #0fa,0 0 82px #0fa,0 0 92px #0fa;}讲解.card-title—— 创建了一个经典的、柔和的投影。阴影向右下方各偏移 2px模糊半径为4px颜色使用了半透明的黑色这使得阴影与背景自然融合为标题文字增添了轻微的立体感这在卡片组件中非常常见.neon-text—— 创造了一个复杂的发光效果这是多重阴影的完美应用首先设置了多层白色阴影从内到外逐渐增加模糊半径形成了一个强烈的白色光芯接着通过添加更大模糊半径的青绿色#0fa阴影创造出霓虹光晕向外扩散的效果技术价值这种多层阴影叠加的技术是创造各种独特文字视觉风格的基石。七、文本对齐与行高构筑舒适的阅读流7.1text-align—— 水平对齐text-align属性用于控制内联级内容如文本在其包含块内的水平对齐方式。值效果适用场景left左对齐从左到右语言的正文默认值right右对齐数字、价格、日期center居中对齐标题、按钮、短文本justify两端对齐长段落、报纸排版⚠️justify注意justify会拉伸每一行的单词间距使文本行的首尾都与容器边缘对齐但若使用不当尤其是在长单词较多的段落中可能产生不美观的单词间隙。7.2line-height—— 行高控制line-height属性用于设置文本行盒的最小高度通俗地讲就是行与行之间的间距。最佳实践使用一个无单位的数字例如1.5。这个数字会作为一个乘数作用于当前元素的font-size。计算示例如果font-size为16px那么line-height: 1.5就计算为24px。继承优势使用无单位值的最大优势在于它的继承性子元素将继承这个乘数而不是一个计算后的固定像素值。这样无论子元素自身的字体大小如何变化都能保持一个恰当的比例。示例代码/* 为正文段落设置左对齐和舒适的行高 */p{text-align:left;line-height:1.6;font-size:16px;}/* 让标题居中对齐并调整其行高 */.article-heading{text-align:center;line-height:1.3;font-size:32px;}/* 设置两端对齐并注意配合连字符使用 */.justified-text{text-align:justify;hyphens:auto;/* 自动添加连字符以帮助改善单词间隙 */}讲解p元素 —— 设置了最常规的阅读对齐方式left和行高1.6。研究表明正文的行高在1.5 到 2 之间时人眼的阅读体验最为舒适1.6 是一个非常平衡的选择.article-heading—— 由于其字体较大32px如果使用相同的1.6 行高在多行标题时行与行之间会显得过于疏远因此使用了一个较小的1.3 行高来保持标题的紧凑与整体感.justified-text—— 设置了text-align: justify并额外设置了hyphens: auto。hyphens属性允许浏览器在单词内部适当的音节处自动插入连字符进行断词这能有效避免两端对齐文本中出现的巨大、不规则的单词间隙是提升两端对齐排版质量的绝佳搭档八、字母与单词间距微调局部的疏密letter-spacing和word-spacing这两个属性允许你精细地控制文本中字母之间以及单词之间的空隙。它们都属于微调属性在日常的段落文本中不经常使用但在特定的设计场景下它们能发挥巨大的作用。属性作用范围正值效果负值效果letter-spacing字母之间的间距增加间距文字更开阔、透气减少间距文字更紧凑word-spacing单词之间的间距增加间距减少间距⚠️使用注意使用这两个属性时通常不建议设置过大的值以免破坏单词的识别性和整体的阅读流畅度。示例代码/* 1. 为导航项增加字母间距使其更现代、透气 */.main-nav-item{text-transform:uppercase;letter-spacing:1.5px;font-size:14px;}/* 2. 为段落的第一行增加单词间距创造一种戏剧性的引导效果 */.intro-paragraph::first-line{letter-spacing:1px;word-spacing:3px;font-weight:bold;}讲解.main-nav-item—— 展示了letter-spacing在现代网页导航中的经典应用。将文本转换为大写text-transform: uppercase后字母之间在视觉上会显得过于拥挤此时增加1.5px的字母间距能为每个字符松绑使导航项看起来更加通透、有设计感尤其是在14px这样相对较小的字体尺寸上.intro-paragraph::first-line—— 使用了::first-line伪元素来单独选中段落的第一行内容。通过轻微增加letter-spacing和word-spacing配合加粗的字体可以创造出一种类似杂志文章首行的、略微舒展和引人注目的导语效果让读者自然地从这里开始阅读九、Font 简写化繁为简的一站式声明font属性是一个强大的简写形式它允许你在一行声明中同时设置多个与字体相关的属性。可设置属性font-style、font-variant、font-weight、font-stretch、font-size、line-height、font-family9.1 使用规则规则说明必需项只有font-size和font-family是绝对必需的缺少任何一个整个声明无效顺序要求font-size和line-height之间必须用斜线/分隔重置行为font简写会重置它未明确列出的所有字体相关属性为初始值包括font-style、font-weight等通常实践将那些不常用或被省略的属性如font-stretch放在前面最后以关键的font-size、可能的line-height和font-family结尾。示例代码/* 1. 一个完整的 font 简写 */.headline{font:italic small-caps bold 2.5rem/1.3Times New Roman,Georgia,serif;}/* 2. 一个最小化的 font 简写只包含必需项 */.body-copy{font:1rem/1.6Helvetica Neue,Arial,sans-serif;}讲解.headline—— 使用了一个完整的 font 简写。它同时设置了font-style: italicfont-variant: small-capsfont-weight: boldfont-size: 2.5remline-height: 1.3斜线分隔font-family: Times New Roman, Georgia, serif这一行代码完成了通常需要六行才能完成的工作.body-copy—— 演示了最小化的用法它省略了所有非必需项italic、small-caps、bold等只设置了必需的font-size: 1rem紧随斜线后的line-height: 1.6最后的font-family所有被省略的属性都将被重置为它们的初始值例如font-weight会变为normal⚠️使用注意因此掌握font简写可以显著提升编码效率但务必注意其属性和值的顺序以及对未声明属性的重置行为这是避免出现意外样式的关键。十、小结掌握文本与字体样式是 CSS 学习者从基础走向进阶的必经之路。属性类别核心属性关键要点字体颜色color支持命名颜色、十六进制、RGB/RGBA、HSL/HSLA字体种类font-family构建字体栈以通用字体族收尾字体大小font-sizerem是现代首选配合html { font-size: 10px }简化计算字体样式font-stylenormal、italic、oblique模拟斜体字体粗细font-weight100~900数值控制字体必须支持对应字重文本转换text-transformuppercase、lowercase、capitalize、none文本装饰text-decoration简写 text-decoration-line/style/color长写组合文字阴影text-shadow支持多重阴影创造霓虹灯、光晕等复杂效果文本对齐text-alignleft、right、center、justify行高line-height使用无单位数字如1.6继承性最佳字母/单词间距letter-spacing/word-spacing微调属性不宜过大Font简写font必需font-sizefont-family注意顺序和重置行为本文从最直观的color属性开始深入讲解了font-family字体栈的构建策略辨析了px、em、rem等字体大小单位的适用场景并展示了font-style、font-weight、text-transform等属性如何塑造文本的形态。在此基础上我们还探索了利用text-shadow创造视觉效果通过text-align和line-height构建舒适的阅读流使用letter-spacing进行微调以及最终利用font简写实现高效编码。此刻你已掌握了在网页上驾驭文字的核心技能。下一篇我们将继续深入 CSS 的精彩世界探索列表样式的奥秘。还在纠结 CSS 样式写得杂乱无章、布局频频踩坑收藏此文持续跟进后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货从基础样式到实战排版一站式学透快速提升前端页面编写能力
相关文章
花生矮砧密植：手把手教你铺好水肥一体化系统
导读：花生矮砧密植是一种提高土地利用率和产量的新型种植模式，但很多种植户不知道如何配套水肥一体化系统。本文用大白话从头到尾讲清楚整个铺设流程，从选材料到安装调试，一步步教你少走弯路。全文无复杂术语，新手也能…
用了半年只留下这1个，2026年我亲测好用的b站视频提取工具真的太香了
职场新人要啃B站上成堆的培训课，HR要整理面试访谈，销售要转客户拜访录音，内容创作者要扒口播素材，不同岗位需求天差地别，核心诉求其实都是一个：要准、要快、要能帮我省时间，不是花里胡哨的无用功…
从散点图到p值：手把手教你用Python完整解读皮尔逊相关分析结果
从散点图到p值：用Python实战解读皮尔逊相关系数的完整指南当你第一次计算出皮尔逊相关系数r0.8时，是否曾困惑这个数字背后真正的含义？在数据分析领域，相关系数就像一把双刃剑——用得好能揭示变量间的深层联系，用不好则…
谷歌AI搜索变革：EEAT与SGE如何重塑SEO与内容策略
1. 项目概述：当“帝国”开始反击 如果你在数字营销、内容创作或者互联网产品领域摸爬滚打过几年，对“The Google Empire Strikes Back”这个标题一定不会感到陌生，甚至可能心头一紧。这绝不是一个科幻电影的影评，而是过去几年里&a…
VLC媒体播放器：全能跨平台播放解决方案终极指南
VLC媒体播放器：全能跨平台播放解决方案终极指南 【免费下载链接】vlc VLC media player - plays everything, runs anywhere. Code here: https://code.videolan.org/videolan/vlc 项目地址: https://gitcode.com/gh_mirrors/vl/vlc 你是否曾经遇到过下载的视…
AI热潮下的创新失衡：如何避免技术单一化埋没其他关键突破
1. 项目概述：当聚光灯只照亮AI最近和几位做材料科学和生物工程的朋友聊天，他们不约而同地提到一种“失语感”。实验室里有了突破性的进展，一篇论文可能酝酿了数年，但当他们试图向外界、向投资人、甚至向同行解释时，得到…
详解C/C++内存管理
C/C赋予程序员管理内存的自由，是C/C语言特色，虽然这引入了复杂度和危险性，但另一方面，它也增加了控制力和灵活性，是C/C独特之处，亦是强大之处。C/C内存分布让我们先来看看下面这段代码：12345678…
手把手教你用STC8G1K08的PCA模块，5分钟搞定舵机PWM驱动（附完整代码）
5分钟实战：用STC8G1K08的PCA模块精准控制SG90舵机最近在做一个机械臂项目时，发现用传统的延时函数控制舵机不仅精度差，还占用大量CPU资源。经过反复测试，最终选择了STC8G1K08单片机内置的PCA模块来生成PWM信号，效果出奇…
llama-3-chinese-8b与transformers集成：完整API使用手册
llama-3-chinese-8b与transformers集成：完整API使用手册 【免费下载链接】llama-3-chinese-8b 项目地址: https://ai.gitcode.com/hf_mirrors/ShanXi/llama-3-chinese-8b llama-3-chinese-8b是基于Llama 3架构优化的中文大语言模型，通过transfor…
Win11/Win10深度学习环境搭建：实测PyCharm远程连接WSL2下的CUDA，性能比虚拟机强多少？
Win11/Win10深度学习环境终极对决：WSL2 CUDA vs 虚拟机 vs 双系统实测指南当开发者需要在Windows系统上进行深度学习开发时，通常会面临三种选择：虚拟机方案、双系统方案和WSL2方案。本文将基于实际测试数据，从GPU性能、开发便利性…
SketchUp STL插件终极指南：3D打印工作流完全掌握
SketchUp STL插件终极指南：3D打印工作流完全掌握 【免费下载链接】sketchup-stl A SketchUp Ruby Extension that adds STL (STereoLithography) file format import and export. 项目地址: https://gitcode.com/gh_mirrors/sk/sketchup-stl SketchUp STL插件…
基于ICL8038的多波形信号发生器：从原理到制作的完整指南
1. 项目概述：从零构建一个基于ICL8038的多波形信号发生器在电子实验、设备调试乃至生物医学信号处理领域，一个稳定可靠、波形纯净的信号源是不可或缺的“心脏”。无论是用于测试放大器的频率响应，还是模拟生理电信号进行算法研究，…
施工现场安全事故预警准确率达94.6%？——解密某央企AI Agent边缘计算部署架构与3个月落地实录
更多请点击： https://codechina.net 第一章：施工现场安全事故预警准确率达94.6%？——解密某央企AI Agent边缘计算部署架构与3个月落地实录 在华北某大型地铁盾构施工现场，一套轻量化AI Agent系统于2024年Q2完成全栈部署ÿ…
附录 B：术语表
本术语表面向“从 MM 到 HMM”专栏阅读过程中的快速查阅。它不是内核 API 手册，而是把文章中反复出现的概念放到同一张地图上：先给出直观含义，再说明它在 Linux MM/HMM 语境里的作用。建议阅读方式： 初读专栏时，把它当…
Midjourney渐变美学的神经渲染原理（附RGB-HSV-LCH三空间渐变映射对照表·行业首曝）
更多请点击： https://kaifayun.com 第一章：Midjourney渐变美学的神经渲染原理（附RGB-HSV-LCH三空间渐变映射对照表行业首曝） Midjourney 的渐变美学并非传统插值实现，而是由其隐式神经渲染器（Implicit Neu…
MPC-BE：基于DirectShow架构的专业级开源媒体播放解决方案
MPC-BE：基于DirectShow架构的专业级开源媒体播放解决方案 【免费下载链接】MPC-BE MPC-BE – универсальный проигрыватель аудио и видеофайлов для операционной системы Windows. 项目地址:…
如何快速计算3D模型体积和重量：STL-Volume-Model-Calculator终极指南
如何快速计算3D模型体积和重量：STL-Volume-Model-Calculator终极指南 【免费下载链接】STL-Volume-Model-Calculator STL Volume Model Calculator Python 项目地址: https://gitcode.com/gh_mirrors/st/STL-Volume-Model-Calculator 你是否曾经为3D打印项目…
通过Taotoken CLI工具一键配置团队开发环境与模型密钥
通过Taotoken CLI工具一键配置团队开发环境与模型密钥 1. CLI工具安装与基本使用 Taotoken提供的CLI工具可通过npm全局安装或直接使用npx运行。对于需要频繁使用CLI的团队，推荐全局安装： npm install -g taotoken/taotoken对于临时使用或项目级配置&a…