：为什么我们要折腾字体？
哎，你有没有发现，现在网上好多网站的字体都千篇一律，看得人眼皮子都快打架了。尤其是咱们做内容的，天天对着屏幕敲字，要是字体看着不舒服，那心情能好吗？我以前也是这样，觉得字体不就是宋体、黑体那么几种吗？后来慢慢接触多了，才发现原来字体这事儿大有讲究。今天我就来跟你唠唠，怎么把网页上那烦人的默认字体换成自己喜欢的风格。放心，不是什么高深技术，就跟你聊聊大白话，一步步教你搞定。
字体那些事儿：简单科普一下
在动手之前，咱们得先搞明白几个基本概念。简单来说，网页上的字体主要分两种：
- 系统字体：就是电脑自带的，比如微软雅黑、宋体这些，谁用都行，不用额外安装
- 网络字体：需要从别的地方加载，比如Google Fonts提供的几千种免费字体，但得联网才能显示
字体权重也很重要，就像衣服有S码M码一样。常用的normal（400）、bold（700）这些最常见，但如果你要搞特殊效果，还得了解italic（斜体）、light（细体）这些。
方法一：直接用系统字体，懒人必备
最简单的方法就是用电脑自带的字体。这招特别适合不想折腾、或者大部分用户都使用Windows/Mac的用户。
- 打开你的HTML文件，找到需要改字体的地方
- 在
<body>标签里加一句：body { font-family: "微软雅黑", sans-serif; } - 想兼容老浏览器？再加一句：
font-family: "Microsoft YaHei", "微软雅黑", sans-serif;这样Windows用户能看到微软雅黑，Mac用户能看到系统默认的字体
注意：用系统字体有个
“唯一的缺点就是跨平台不统一”。
我的经验是，除非你的用户特别固定，否则建议还是用网络字体更保险。
方法二：用Google Fonts，免费又好看
这是目前最流行的方法，免费、种类多，还能自动适配各种设备。我平时做内容网站，基本都靠这个。
- 去
https://fonts.google.com/选字体，比如选个”Roboto”，点击”Include in project” - 复制它给的代码，放在你的HTML文件
<head>里：<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> - 然后在CSS里这样用：
body { font-family: "Roboto", sans-serif; }
这里要特别提一下display=swap这个参数，它能保证字体加载慢的时候先显示系统默认字体，等网络好了再自动切换，用户体验会好很多。
进阶玩法：字体搭配与设计感
光换字体还不够，怎么让页面看起来专业又舒服？这就需要点搭配技巧了。
| 场景 | 推荐搭配 | 优点 |
|---|---|---|
| 博客正文 | Open Sans (400) + Lato (400) | 清晰易读，适合长时间阅读 |
| Montserrat (700) + Roboto (400) | 现代感强，对比明显 | |
| 特殊效果 | Playfair Display (700) + Source Sans Pro (400) | 优雅有质感，适合设计类网站 |
记住几个原则：
- 正文
line-height最好设1.5或更高 - 同一页别用超过3种字体，容易乱
真实案例：我的个人博客改造
改造过程其实很简单：先分析自己网站的主要用途（写文章+看文章），然后选了适合这两种场景的字体组合，最后调整了字号、行高和间距。现在用户反馈说阅读体验好了不少。
注意事项：兼容性与性能
换字体虽然好，但也要注意几个坑：
- 移动端适配：现在大部分手机都支持网络字体，但老版本iOS可能有问题
- 性能影响：字体文件可能很大，加载慢会卡页。建议优先用系统字体做基础，网络字体做点缀
我的建议是，对于普通个人网站，用Google Fonts选2-3个经典免费字体就够了。太花哨反而会分散注意力。
：从基础到进阶的字体改造指南
好了，今天就聊到这儿。简单一下：
1. 想简单？用系统字体，加个font-family就好
2. 想好看？用Google Fonts，记得加display=swap
3. 想专业？研究字体搭配，别用超过3种
4. 想优化？注意移动端和性能问题