CSS3文本样式完全指南轻松掌握网页文字排版与美化技巧

引言

在网页设计中，文本是传递信息的主要媒介。良好的文本样式不仅能提升网站的美观度，还能增强用户体验和信息的可读性。CSS3作为层叠样式表的最新版本，提供了丰富的文本样式属性和功能，使开发者能够创造出更加精美和多样化的文本效果。

本文将全面介绍CSS3中的文本样式属性，从基础的字体设置到高级的文本特效，帮助读者掌握网页文字排版与美化的技巧。无论你是初学者还是有经验的开发者，都能从本文中获得实用的知识和灵感。

CSS3文本样式基础

字体属性

字体是文本样式的基础，CSS3提供了多种字体相关属性，让我们可以精确控制文本的外观。

font-family

font-family属性用于设置文本的字体族。可以指定一个或多个字体名称，浏览器会按顺序使用可用的字体。

body { font-family: "Helvetica Neue", Arial, sans-serif; }

在这个例子中，浏览器会首先尝试使用”Helvetica Neue”字体，如果不可用，则尝试Arial，最后使用系统默认的无衬线字体。

font-size

font-size属性用于设置文本的大小。可以使用绝对单位（如px、pt）或相对单位（如em、rem、%）。

h1 { font-size: 32px; } p { font-size: 1rem; /* 相对于根元素的字体大小 */ } .small-text { font-size: 0.875em; /* 相对于父元素的字体大小 */ }

font-weight

font-weight属性用于设置文本的粗细。可以使用关键字（如normal、bold）或数值（100-900）。

.bold-text { font-weight: bold; } .light-text { font-weight: 300; } .heading { font-weight: 700; }

font-style

font-style属性用于设置文本的样式，如斜体。

.italic-text { font-style: italic; } .oblique-text { font-style: oblique; }

font-variant

font-variant属性用于设置小型大写字母。

.small-caps { font-variant: small-caps; }

font简写属性

font属性是一个简写属性，可以同时设置多个字体相关属性。

p { font: italic small-caps bold 16px/1.5 "Helvetica Neue", sans-serif; }

文本颜色

文本颜色是文本样式的另一个重要方面，CSS3提供了多种设置文本颜色的方法。

color

color属性用于设置文本的颜色。可以使用颜色名称、十六进制值、RGB、RGBA、HSL或HSLA值。

h1 { color: #333333; /* 十六进制 */ } p { color: rgb(51, 51, 51); /* RGB */ } .highlight { color: rgba(255, 0, 0, 0.7); /* RGBA，带透明度 */ } .accent { color: hsl(240, 100%, 50%); /* HSL */ }

opacity

opacity属性用于设置元素的透明度，包括文本。

.faded-text { opacity: 0.5; }

文本对齐

文本对齐属性控制文本在容器中的位置。

text-align

text-align属性用于设置文本的水平对齐方式。

.left-align { text-align: left; } .center-align { text-align: center; } .right-align { text-align: right; } .justify-align { text-align: justify; }

text-justify

text-justify属性用于设置当text-align设置为justify时的对齐方式。

p { text-align: justify; text-justify: inter-word; /* 增加单词间距 */ }

vertical-align

vertical-align属性用于设置元素的垂直对齐方式，主要用于行内元素或表格单元格。

img { vertical-align: middle; /* 图像与文本垂直居中对齐 */ } sub { vertical-align: sub; /* 下标 */ } sup { vertical-align: super; /* 上标 */ }

text-align-last

text-align-last属性用于设置块级元素中最后一行文本的对齐方式。

p { text-align: justify; text-align-last: center; /* 最后一行居中对齐 */ }

CSS3高级文本样式

文本装饰

文本装饰属性可以为文本添加下划线、上划线、删除线等效果。

text-decoration

text-decoration属性用于设置文本的装饰线。

.underline { text-decoration: underline; } .overline { text-decoration: overline; } .line-through { text-decoration: line-through; } .no-decoration { text-decoration: none; }

CSS3还允许我们分别控制文本装饰线的颜色、样式和位置：

fancy-link { text-decoration: underline wavy #ff0000; text-decoration-thickness: 2px; text-underline-offset: 4px; }

text-decoration-color

text-decoration-color属性用于设置文本装饰线的颜色。

.underline-red { text-decoration: underline; text-decoration-color: red; }

text-decoration-style

text-decoration-style属性用于设置文本装饰线的样式。

.dotted-underline { text-decoration: underline; text-decoration-style: dotted; } .dashed-underline { text-decoration: underline; text-decoration-style: dashed; } .wavy-underline { text-decoration: underline; text-decoration-style: wavy; }

text-decoration-thickness

text-decoration-thickness属性用于设置文本装饰线的粗细。

.thick-underline { text-decoration: underline; text-decoration-thickness: 3px; }

text-underline-offset

text-underline-offset属性用于设置下划线与文本基线的距离。

.spaced-underline { text-decoration: underline; text-underline-offset: 5px; }

文本转换

文本转换属性可以改变文本的大小写。

text-transform

text-transform属性用于设置文本的大小写转换。

.uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; }

文本间距

文本间距属性控制字符、单词和行之间的空间。

letter-spacing

letter-spacing属性用于设置字符之间的间距。

.spaced-out { letter-spacing: 2px; } .tight { letter-spacing: -0.5px; }

word-spacing

word-spacing属性用于设置单词之间的间距。

.wide-spacing { word-spacing: 5px; }

line-height

line-height属性用于设置行高，即行与行之间的垂直距离。

p { line-height: 1.5; /* 无单位，相对于字体大小 */ } .heading { line-height: 1.2; }

white-space

white-space属性用于控制元素内的空白符处理方式。

.nowrap { white-space: nowrap; /* 文本不换行 */ } .pre { white-space: pre; /* 保留空白符序列 */ } .pre-wrap { white-space: pre-wrap; /* 保留空白符序列，但允许换行 */ } .pre-line { white-space: pre-line; /* 合并空白符序列，但保留换行符 */ }

文本溢出处理

当文本超出容器大小时，我们可以使用以下属性来控制溢出文本的显示方式。

text-overflow

text-overflow属性用于设置当文本溢出容器时的显示方式。

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 显示省略号 */ } .clip { white-space: nowrap; overflow: hidden; text-overflow: clip; /* 直接裁剪 */ }

word-break

word-break属性用于设置单词内的换行规则。

.break-all { word-break: break-all; /* 允许在单词内换行 */ } .keep-all { word-break: keep-all; /* 只在半角空格或连字符处换行 */ }

overflow-wrap

overflow-wrap属性用于设置当内容超出容器边界时的换行规则。

.break-word { overflow-wrap: break-word; /* 允许在单词内换行 */ } .normal-wrap { overflow-wrap: normal; /* 只在允许的断字点换行 */ }

hyphens

hyphens属性用于控制自动连字符的使用。

.auto-hyphens { hyphens: auto; /* 自动添加连字符 */ } .manual-hyphens { hyphens: manual; /* 只在手动添加的连字符处换行 */ }

CSS3文本特效

文本阴影效果

文本阴影可以为文本添加深度和视觉吸引力。

text-shadow

text-shadow属性用于为文本添加阴影。可以设置一个或多个阴影效果。

.simple-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .multiple-shadows { text-shadow: 1px 1px 2px #000, 0 0 10px #f00, 0 0 20px #0f0; } .glow-effect { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073; } .emboss-effect { color: #ccc; text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333; }

文本渐变效果

虽然CSS没有直接提供文本渐变属性，但我们可以使用一些技巧来实现文本渐变效果。

背景裁剪渐变文本

使用background-clip和text-fill-color属性（需要浏览器前缀）可以创建渐变文本效果。

.gradient-text { background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: gradient 3s linear infinite; } @keyframes gradient { to { background-position: 200% center; } }

SVG渐变文本

另一种方法是使用SVG来创建渐变文本。

<svg width="100%" height="100"> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#ff0000;stop-opacity:1" /> <stop offset="100%" style="stop-color:#0000ff;stop-opacity:1" /> </linearGradient> </defs> <text x="10" y="50" font-family="Arial" font-size="36" fill="url(#gradient)">Gradient Text</text> </svg>

文本描边效果

文本描边可以为文本添加轮廓效果。

-webkit-text-stroke

-webkit-text-stroke属性（需要浏览器前缀）用于为文本添加描边。

.stroked-text { color: white; -webkit-text-stroke: 2px black; text-stroke: 2px black; /* 标准属性，但支持度较低 */ }

text-shadow描边

使用多个text-shadow可以模拟文本描边效果。

.outline-text { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

文本动画效果

CSS3的动画和过渡属性可以为文本添加动态效果。

文本淡入淡出

.fade-in { animation: fadeIn 2s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-out { animation: fadeOut 2s ease-in-out; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

文本打字机效果

.typewriter { overflow: hidden; border-right: .15em solid orange; white-space: nowrap; animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange; } }

文本弹跳效果

.bounce { display: inline-block; animation: bounce 1s ease infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

文本发光效果

.glow { animation: glow 2s ease-in-out infinite alternate; } @keyframes glow { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073; } to { text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6; } }

响应式文本设计

在响应式设计中，文本需要适应不同的屏幕尺寸和设备。CSS3提供了一些技术来实现响应式文本设计。

媒体查询与文本

使用媒体查询可以根据屏幕尺寸调整文本样式。

/* 默认样式 */ body { font-size: 16px; line-height: 1.5; } /* 平板设备 */ @media screen and (min-width: 768px) { body { font-size: 18px; } h1 { font-size: 2.5em; } } /* 桌面设备 */ @media screen and (min-width: 1024px) { body { font-size: 20px; } h1 { font-size: 3em; } }

视口单位与文本大小

视口单位（vw, vh, vmin, vmax）可以根据视口大小设置文本大小。

.responsive-text { font-size: 4vw; /* 视口宽度的4% */ } .responsive-heading { font-size: 8vw; } /* 结合calc()函数进行更精确的控制 */ .calculated-text { font-size: calc(16px + 1vw); }

弹性文本设计

使用相对单位（em, rem, %）可以创建更具弹性的文本设计。

html { font-size: 16px; /* 基准字体大小 */ } body { font-size: 1rem; /* 16px */ } h1 { font-size: 2rem; /* 32px */ } h2 { font-size: 1.5rem; /* 24px */ } .small-text { font-size: 0.875rem; /* 14px */ } /* 使用em单位创建相对于父元素的文本大小 */ .card { font-size: 1rem; } .card-title { font-size: 1.25em; /* 相对于.card的字体大小 */ } .card-body { font-size: 0.875em; /* 相对于.card的字体大小 */ }

流式文本

流式文本技术可以根据容器宽度动态调整文本大小。

.fluid-text { font-size: clamp(1rem, 4vw, 2rem); } /* 使用CSS变量和calc()函数创建更复杂的流式文本 */ :root { --min-font-size: 16px; --max-font-size: 24px; --min-viewport: 320px; --max-viewport: 1200px; } .fluid-heading { font-size: calc( var(--min-font-size) + (var(--max-font-size) - var(--min-font-size)) * ((100vw - var(--min-viewport)) / (var(--max-viewport) - var(--min-viewport))) ); }

CSS3文本样式最佳实践

可读性考虑

良好的可读性是文本设计的首要目标。以下是一些提高文本可读性的最佳实践：

适当的行高

行高对文本可读性有重要影响。通常，行高应设置为字体大小的1.4到1.6倍。

body { line-height: 1.5; } /* 对于大标题，可以使用较小的行高 */ h1, h2, h3 { line-height: 1.2; }

限制行长

过长的行会降低阅读体验。通常，每行应包含45到75个字符。

article { max-width: 800px; margin: 0 auto; } /* 使用ch单位（字符宽度的0倍）限制行长 */ p { max-width: 65ch; margin: 0 auto; }

足够的颜色对比度

文本颜色与背景颜色之间应有足够的对比度，以确保可读性。

/* 高对比度文本 */ .high-contrast { color: #333; /* 深灰色文本 */ background-color: #fff; /* 白色背景 */ } /* 使用CSS变量管理颜色主题 */ :root { --text-color: #333; --background-color: #fff; } body { color: var(--text-color); background-color: var(--background-color); }

适当的字体大小

字体大小应足够大，以便于阅读，但也不应过大，以免占用过多空间。

body { font-size: 16px; /* 基准字体大小 */ } /* 使用rem单位确保一致的字体大小缩放 */ h1 { font-size: 2rem; /* 32px */ } h2 { font-size: 1.5rem; /* 24px */ } h3 { font-size: 1.25rem; /* 20px */ }

性能优化

良好的性能优化可以确保网页加载和渲染速度。

使用系统字体

使用系统字体可以减少字体加载时间，提高页面加载速度。

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

优化Web字体加载

如果需要使用Web字体，应优化其加载方式。

/* 使用font-display属性控制字体加载时的显示 */ @font-face { font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); font-display: swap; /* 字体加载期间使用备用字体 */ } /* 预加载关键字体 */ <link rel="preload" href="critical-font.woff2" as="font" type="font/woff2" crossorigin>

限制文本效果

复杂的文本效果（如阴影、渐变等）可能会影响性能，特别是在移动设备上。

/* 使用will-change属性提示浏览器元素将发生变化 */ .animated-text { will-change: transform, opacity; } /* 避免在大量文本上使用昂贵的效果 */ .expensive-effect { /* 仅在悬停时应用效果 */ transition: text-shadow 0.3s ease; } .expensive-effect:hover { text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

浏览器兼容性

确保文本样式在不同浏览器中都能正常显示。

使用浏览器前缀

对于一些实验性或非标准属性，使用浏览器前缀可以提高兼容性。

.text-stroke { -webkit-text-stroke: 1px black; text-stroke: 1px black; } .gradient-text { background: linear-gradient(to right, #ff0000, #0000ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; }

提供备用方案

对于不支持某些属性的浏览器，提供备用方案。

/* 渐变文本的备用方案 */ .gradient-text { background: linear-gradient(to right, #ff0000, #0000ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; /* 备用颜色 */ color: #ff0000; } /* 使用@supports检测属性支持 */ @supports (background-clip: text) or (-webkit-background-clip: text) { .gradient-text { background: linear-gradient(to right, #ff0000, #0000ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; } }

使用Autoprefixer等工具

使用Autoprefixer等工具自动添加浏览器前缀。

/* package.json中的Autoprefixer配置 */ { "browserslist": [ "last 2 versions", "not dead", "> 0.2%" ] }

实例项目：创建一个美观的文本样式库

让我们创建一个完整的文本样式库，展示各种CSS3文本样式的应用。

HTML结构

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3 Text Styles Showcase</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1 class="main-title">CSS3 Text Styles Showcase</h1> <p class="subtitle">Exploring the Power of CSS3 for Beautiful Typography</p> </header> <main> <section class="text-section"> <h2>Basic Text Styling</h2> <p class="sample-text">This is a sample paragraph demonstrating basic text styling. Notice the font family, size, weight, and color.</p> <div class="code-example"> <pre><code>p { font-family: 'Open Sans', sans-serif; font-size: 1rem; font-weight: 400; color: #333; line-height: 1.6; }</code></pre> </div> </section> <section class="text-section"> <h2>Text Shadows</h2> <p class="simple-shadow">Simple Shadow Effect</p> <p class="neon-shadow">Neon Shadow Effect</p> <p class="retro-shadow">Retro Shadow Effect</p> <div class="code-example"> <pre><code>.simple-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .neon-shadow { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073; } .retro-shadow { color: #fff; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }</code></pre> </div> </section> <section class="text-section"> <h2>Gradient Text</h2> <p class="gradient-text">This text has a beautiful gradient effect</p> <p class="animated-gradient">This gradient text is animated</p> <div class="code-example"> <pre><code>.gradient-text { background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }</code></pre> </div> </section> <section class="text-section"> <h2>Text Effects</h2> <p class="outlined-text">Outlined Text Effect</p> <p class="typewriter">Typewriter Effect</p> <p class="glow">Glowing Text Effect</p> <div class="code-example"> <pre><code>.outlined-text { color: white; -webkit-text-stroke: 2px black; } .typewriter { overflow: hidden; border-right: .15em solid orange; white-space: nowrap; animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } .glow { animation: glow 2s ease-in-out infinite alternate; }</code></pre> </div> </section> <section class="text-section"> <h2>Responsive Text</h2> <p class="fluid-text">This text size changes with the viewport width</p> <p class="responsive-heading">This heading also adapts to different screen sizes</p> <div class="code-example"> <pre><code>.fluid-text { font-size: clamp(1rem, 4vw, 2rem); } .responsive-heading { font-size: calc(1.5rem + 3vw); }</code></pre> </div> </section> </main> <footer> <p>&copy; 2023 CSS3 Text Styles Showcase. All rights reserved.</p> </footer> </body> </html>

CSS样式

/* 基础样式 */ :root { --primary-color: #3498db; --secondary-color: #2ecc71; --accent-color: #e74c3c; --text-color: #333; --bg-color: #f9f9f9; --card-bg: #fff; --border-color: #ddd; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; color: var(--text-color); background-color: var(--bg-color); padding: 20px; } /* 头部样式 */ header { text-align: center; margin-bottom: 40px; padding: 20px; } .main-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; margin-bottom: 10px; background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .subtitle { font-size: 1.2rem; color: #666; font-weight: 300; } /* 主要内容样式 */ main { max-width: 1200px; margin: 0 auto; } .text-section { background-color: var(--card-bg); border-radius: 8px; padding: 30px; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .text-section h2 { font-size: 2rem; margin-bottom: 20px; color: var(--primary-color); border-bottom: 2px solid var(--border-color); padding-bottom: 10px; } .sample-text { font-size: 1.1rem; margin-bottom: 20px; padding: 15px; background-color: #f5f5f5; border-radius: 4px; } /* 文本阴影效果 */ .simple-shadow { font-size: 2rem; font-weight: bold; margin: 20px 0; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .neon-shadow { font-size: 2rem; font-weight: bold; margin: 20px 0; color: #fff; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073; } .retro-shadow { font-size: 2rem; font-weight: bold; margin: 20px 0; color: #fff; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; } /* 渐变文本效果 */ .gradient-text { font-size: 2rem; font-weight: bold; margin: 20px 0; background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .animated-gradient { font-size: 2rem; font-weight: bold; margin: 20px 0; background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: gradient 3s linear infinite; } @keyframes gradient { to { background-position: 200% center; } } /* 文本效果 */ .outlined-text { font-size: 2rem; font-weight: bold; margin: 20px 0; color: white; -webkit-text-stroke: 2px black; text-stroke: 2px black; } .typewriter { font-size: 2rem; font-weight: bold; margin: 20px 0; overflow: hidden; border-right: .15em solid orange; white-space: nowrap; animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange; } } .glow { font-size: 2rem; font-weight: bold; margin: 20px 0; animation: glow 2s ease-in-out infinite alternate; } @keyframes glow { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073; } to { text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6; } } /* 响应式文本 */ .fluid-text { font-size: clamp(1rem, 4vw, 2rem); margin: 20px 0; font-weight: 500; } .responsive-heading { font-size: calc(1.5rem + 3vw); margin: 20px 0; font-weight: 700; color: var(--accent-color); } /* 代码示例样式 */ .code-example { margin-top: 20px; background-color: #f8f8f8; border-radius: 4px; overflow: hidden; } .code-example pre { padding: 15px; overflow-x: auto; } .code-example code { font-family: 'Courier New', Courier, monospace; font-size: 0.9rem; color: #333; } /* 页脚样式 */ footer { text-align: center; margin-top: 40px; padding: 20px; border-top: 1px solid var(--border-color); color: #666; } /* 响应式设计 */ @media screen and (max-width: 768px) { .text-section { padding: 20px; } .text-section h2 { font-size: 1.5rem; } .code-example code { font-size: 0.8rem; } }

这个实例项目展示了各种CSS3文本样式的应用，包括基本文本样式、文本阴影、渐变文本、文本特效和响应式文本。你可以根据需要修改和扩展这些样式，创建自己的文本样式库。