CSS基础教程（十一）Text文本格式：别让你网站的字丑到报警！CSS文本化妆术：从程序猿到艺术家的逆袭指南-优快云博客

深度分析CSS Text文本格式

引言：文字的“颜值即正义”

在互联网的世界里，文字不再是枯燥的信息载体。它是界面的话语，是品牌的喉舌，更是用户体验的灵魂。想象一下，两个内容一模一样的网站：一个用的是默认宋体，字挤字，颜色刺眼；另一个字体优雅，间距舒适，色彩和谐。你会选择看哪个？

答案是显而易见的。这就是CSS文本格式化的魔力——它不是什么高深莫测的黑科技，而是每个前端开发者与设计师必须掌握的“形象管理”艺术。今天，就让我们一起打开这个“文本化妆包”，从粉底（字体）到高光（阴影），为你网站上的文字来一场彻头彻尾的“颜值革命”！

第一章：基础底妆——字体（Font）家族的那些事儿

给文字化妆的第一步，是选一款合适的“粉底”，也就是字体。这决定了整体的基调和气质。

font-family：指定字体家族
这是最基础的属性。但千万别傻傻地只写一个字体名，否则用户的电脑上没有，就会瞬间打回原形（默认字体）。

/* 错误示范：风险极高！ */
.text {
  font-family: "My Cool Font";
}

/* 正确示范：设置备选字体栈（Font Stack） */
.text {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
}

深度解读：浏览器会从左到右依次查找用户系统已安装的字体。上面的例子意思是：优先用苹方，没有就用微软雅黑，再没有就用冬青黑体，最后实在没了就用任何无衬线字体。sans-serif 和 serif 是通用字体族名，是必须的保底选择。

@font-face：召唤自定义字体
不想被用户电脑里的字体限制？@font-face 就是你的任意门，可以直接引入网络字体（如 Google Fonts）。

/* 引入Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* 或者使用本地字体文件 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 优化字体加载显示策略 */
}

body {
  font-family: 'Roboto', 'MyFont', sans-serif;
}

font-size：字号大小的权力游戏
字号决定了文字的视觉权重和页面的层次结构。

- 绝对单位：px (像素) 是固定值，精确但缺乏弹性。
- 相对单位：rem (根元素相对单位) 是现代Web开发的首选。它基于 <html> 元素的字号，易于维护和实现响应式。em 则是相对于父元素的字号，容易产生嵌套计算问题，需谨慎使用。

html {
  font-size: 16px; /* 设定基准字号 */
}

h1 {
  font-size: 2.5rem; /* 16px * 2.5 = 40p