（敲键盘声）你的网页文字看起来还像电报机打出来的？满屏宋体字看得眼睛疼？别急！今天咱们就聊怎么用CSS三招搞定字体改造——我敢说，看完这篇连你家猫都能学会！（猫：喵？）

—————— 基础操作区 ——————

??第一招：见缝插针式修改法??
直接在HTML标签里写style属性，这招适合救急用。比如说想把某个标题改成红色：

html运行复制
<h2 style="color: #FF0000; font-size: 24px;">紧急通知！今日奶茶买一送一h2>

看见没？就像给文字穿衣服，想换哪件换哪件。不过注意啊，这法子改多了会累成狗——每个标签都得手动加样式，十处修改就得写十遍！（别问我怎么知道的，说多了都是泪）

??第二招：批量生产大法??
在里搞个标签，这才是聪明人的做法：

css复制

这么一写，全网页的段落文字都变雅黑了。重点来了！font-family里那个sans-serif是保命符，万一用户电脑没装雅黑字体，浏览器会自己找个替代品，总比显示乱码强对吧？

—————— 实战技巧区 ——————

??字体加载翻车现场??
上周我帮人改网页，明明代码写对了却显示默认字体。折腾半天才发现——人家把微软雅黑写成"微软雅黑_"了啊！就多了个下划线，字体死活加载不出来。所以兄弟们，字体名千万要核对清楚！

??字号单位怎么选？??
新手常见迷惑：px、em、rem该用哪个？直接说结论：

• 固定尺寸用px（比如16px）
• 相对父元素用em
• 响应式设计用rem
  举个例子，如果设置body{font-size: 16px}，那么1rem=16px，0.8rem=12.8px。现在主流做法是用rem单位，手机电脑都能适配。

—————— 高阶玩法区 ——————

??手机电脑两套方案??
用这个媒体查询代码，手机屏幕自动变小字号：

css复制
@media screen and (max-width: 768px) {
  p {
    font-size: 14px;
    line-height: 1.8;
  }
}

实测数据显示，手机端行高加到1.8倍阅读体验最佳。不信你现在把手机横过来试试，是不是比默认设置舒服多了？

??字体文件加载加速??
想用特殊字体又怕拖慢网页？教你个妙招——用woff2格式文件，体积比ttf小40%！再配上这段代码：

css复制
@font-face {
  font-family: '酷炫字体';
  src: url('cool-font.woff2') format('woff2');
}

记得把字体文件放在网站服务器上，别用外链！我之前用某云存储链接，结果字体加载速度比乌龟爬还慢...

个人观点时间：见过太多新手沉迷字体特效，又是阴影又是渐变，结果基础字号颜色都没调对。咱就是说，先把字体的可读性搞定了，再去玩那些花活行不？还有啊，改完一定记得在至少三台设备上预览——上次我在4K屏上改得挺美，结果同事手机上看字都挤成芝麻了！（别笑，这事真发生过）