哎，各位刚入行的设计小白们，你们是不是也和我当年一样？明明网页配色美如画，一上文字就垮掉——要么字小得像蚂蚁搬家，要么字体选得像盗版书封面？别慌！今儿咱们就掰开了揉碎了聊聊这个看似简单实则暗藏杀机的字体设置！ 说个真事儿——我哥们儿去年给奶茶店做官网，就因为标题用了花体字，顾客愣是认不出"珍珠奶茶"四个字，差点被老板追杀三条街！
一、字体选对，成功一半
先给大伙儿泼盆冷水——别看见漂亮字体就往上怼！这里头讲究可大了去了。三大铁律记好了：
中西搭配要讲究：西文字体放前头，中文字体跟后头。为啥？因为西文字体不认汉字啊！举个栗子：
css**
font-family: "Helvetica Neue", "苹方", sans-serif;这样设置，老外设备显示Helvetica，国产手机用苹方，完美兼容。
系统字体是保命符：微软雅黑、苹方这些预装字体最安全。前阵子某大厂官网用了冷门字体，结果用户电脑没装，页面直接变乱码，你说尴尬不？
特殊字体要慎用：想用书法体装逼？记得用@font-face加载字体文件。不过千万注意版权！去年有家创业公司用了未授权的方正字体，被索赔8万，裤衩都赔没了。
二、字号这事儿有玄机
别以为字号就是随便拉进度条！这里头学问堪比老妈熬汤的火候控制：
正文黄金尺寸：PC端16px是底线，手机端建议18px起。知道为啥吗？人眼离手机屏幕就30cm，小于16px的字看着跟密码似的。
标题要有层次感：
H1: 24-32px（镇场子用）H2: 20-24px（副标题担当）H3: 18-20px（章节分隔线）见过最离谱的案例——某婚庆网站所有标题都用36px，页面像贴满寻人启事，客户当场吓跑。
移动端要特殊照顾：按钮文字最少14px，不然苹果手机会自动放大页面，把你的布局搞得稀碎。去年某外卖平台就栽在这坑里，用户点餐时选择框被放大镜挡得严严实实。
三、行距是文字的呼吸感
字挤字那是春运火车站，行距太宽又像异地恋。记住这个万能公式：
行高 = 字号 × 1.5举个栗子，16px的正文配24px行距，读起来像春风拂面。要是偷懒设成1.2倍，用户看三行就得揉眼睛——别问我咋知道的，当年被甲方骂哭过。
对比案例：
| 网站类型 | 字号 | 行距 | 用户停留时长 |
|---|---|---|---|
| 新闻站 | 16px | 24px | 3分28秒 |
| 竞品站 | 16px | 19px | 1分15秒 |
四、颜色对比是生死线
见过最作死的设计——深灰字配黑背景，用户得拿手机斜45度才能看清！颜色搭配三原则：
- 黑白配永不过时：正文用#333灰，比纯黑更护眼。
- 对比度要达标：W3C说文字和背景的对比度最少4.5:1。有个取巧办法——把设计稿去色后截图，能看清就算过关。
- 红绿色是禁区：8%的男性是色盲，用这俩颜色标注重点？等着被投诉吧！去年某理财APP就因此流失15%用户。
五、作死三连千万别碰
- 字体全家桶：最多用2种字体！见过某旅游网站用了5种字体，页面像字体展览会，用户直接晕车。
- 全大写装逼：所有字母大写看着像吵架，阅读速度直接降40%！某潮牌官网这么干，转化率暴跌。
- 动态闪瞎眼：文字搞闪烁特效？等着收癫痫患者的律师函吧！2019年真有公司因此被告。
小编大实话
要我说啊，网页字体设置就像穿衣服——基础款永不出错，花里胡哨容易翻车。最近发现个野路子：用system-ui这个万能字体，它能自动匹配用户系统字体，省心到飞起！还有啊，定期用Lighthouse检测网页可读性，比算命先生还准。
最最后说句掏心窝的：别迷信设计趋势！ 见过某设计师跟风用超细字体，结果中老年用户集体投诉。记住，网页是给人看的，不是艺术展！实在拿不准就去菜市场转转——大爷大妈能看清的字体，保准错不了！
