网页设计字体设定怎么搞？看完这篇别再说不会！

哎我说，最近帮朋友改网站发现个怪现象——明明花大价钱买了高级字体，页面看起来咋还跟word文档似的？你肯定也纳闷，为啥别人家的字看着就舒坦，自家网站的字总像穿错衣服的小孩？今天咱们就来掰扯掰扯字体设定那些事儿，保准看完你也能当半个专家！

一、字体选得好，网站老不了

（核心问题：到底该选几个字体？）

先来灵魂拷问：你家网站现在用几种字体？超过三种的话，赶紧打住！就跟炒菜放盐似的，多了齁得慌。去年给郑州烩面馆做官网，老板非要在菜单页塞五种字体，结果用户说像进了字体博物馆，你说冤不冤？

​​正确姿势看这里：​​

1. ​​主字体选个扛把子​​：正文用微软雅黑或思源黑体，跟白T恤似的百搭
2. ​​标题搞个显眼包​​：冬青黑体或方正兰亭，但别整太花哨
3. ​​特殊需求用工具人​​：英文标题可以用Roboto，跟中文配一脸

突然想起来苹果官网的骚操作，人家用苹方配Helvetica，中英文都高级得不行。记住了啊，西文字体要放前头，不然中文会把字母吞了！

二、字号行距不玄学，照着抄就完事

（核心问题：字到底多大才合适？）

新手最爱问："12px和14px到底差在哪？"这么说吧，差在用户会不会掏出手机凑近看！网页3说得好，正文14-18px最保险，跟穿鞋一个道理——太大脚疼，太小挤脚。

​​字号搭配表（实测有效版）：​​

举个栗子：京东商品详情页，标题用20px冬青黑体，正文14px微软雅黑，看着就比淘宝舒服。记住了，​​行距=字号×1.5倍​​，就跟炒菜放水似的，多了糊锅少了干巴！

三、颜色对比要够狠，别玩猜谜游戏

（核心问题：为啥我的字总看不清？）

上周看到个奇葩案例——深灰字配浅，用户得拿手指着读！网页9说得在理，​​正文对比度必须≥4.5:1​​，跟炒辣椒似的，不够辣谁吃啊？

​​避坑指南：​​

• 红配绿赛狗屁：8%的男性分不清这俩色
• 白底别用浅黄字：跟隐形墨水似的
• 黑底慎用纯白字：晚上看能亮瞎眼

教你们个绝招：用WebAIM的对比度检测工具，跟买菜看秤似的，数字不会骗人。对了，按钮文字要够醒目，参考美团黄的#FFD700，隔着三条街都看得见！

四、响应式不是变形记，手机电脑都要美

（核心问题：手机上字怎么老跑偏？）

朋友公司官网在电脑上看挺正常，手机打开字都挤成二维码了！这事儿得学学知乎，人家用rem单位+媒体查询，屏幕再小也不怕。

​​代码示例（照抄不亏）：​​

css**
@media screen and (max-width: 768px) {  body {    font-size: 14px;    line-height: 1.6;  }  h1 {    font-size: 1.8rem;  }}

记住三个不要：

1. 不要用固定像素（px）
2. 不要忽视viewport3. 不要忘记测试老款手机

突然想到小米商城的骚操作，平板端字体会自动加粗，阅读体验直接翻倍。你品，你细品！

五、这些坑我替你踩过了

1. ​​全大写装逼必翻车​​：用户阅读速度直接打七折
2. ​​艺术字当正文​​：跟穿晚礼服逛菜市场似的
3. ​​GIF文字乱闪​​：用户说看得头晕想吐
4. ​​字体文件不压缩​​：加载慢得像蜗牛爬
5. ​​忽视字体版权​​：收到律师函别哭

去年有个客户用了某宝买的字体，结果被索赔20万，现在还在打官司呢。记住了啊，商用字体要授权，开源字体它不香吗？

小编观点：

搞字体设定就跟谈恋爱似的，​​别一见钟情，要多试试看；别贪多嚼不烂，要专一；别闭门造车，要多问用户​​。下次改版前，先把网站截图打印出来贴厕所墙上，蹲坑时多看几眼——要是自己都看不下去，用户早跑没影了！对了，你们有没有见过更奇葩的字体车祸？说出来让我开开眼呗！