做网站显示不同字体，看着心烦？别慌，这篇专治各种“字不对版”。三句话搞定：查字体加载、看CSS优先级、换备用方案。

上周有个老客户找我，急得跟热锅上的蚂蚁似的。他说他那个企业官网，明明本地看着挺美，一上线，标题字体全变了，有的黑体，有的宋体，还有的干脆就是系统默认那个丑丑的Arial。客户直接炸毛：“是不是被黑稿了？”

我让他把链接发我，打开一看，乐了。这哪是黑稿，这是典型的“字体加载翻车现场”。

咱们干这行的都知道，做网站显示不同字体，最让人头疼的就是这个“变脸”问题。你以为你上传了个.ttf文件，浏览器就会乖乖听话？天真。浏览器有自己的脾气，尤其是那些老旧的IE或者某些奇葩的手机浏览器，它们根本不吃你那一套。

先说第一个坑：字体格式不对。

很多新手建站，喜欢直接扔个.ttf或者.otf上去。看着挺高级，其实兼容性极差。现在主流的做法，得用@font-face。而且，你得提供多种格式，WOFF2是首选，它小，加载快，浏览器支持也好。要是你还用那种几兆大的字体文件，用户还没看完你的标题，页面都白屏了，谁还管你字体漂不漂亮？

我有个做餐饮的朋友，非要搞个手写体，结果字体包太大，首页加载要5秒。客户体验？不存在的。后来我帮他改成WOFF2，再压缩一下，加载时间缩到1秒以内，字体也正常显示了。这钱省得，比请个美工还值。

第二个坑：CSS优先级打架。

有时候你代码写得没毛病，字体也加载了，但就是显示不对。这时候得看看你的CSS。是不是有内联样式覆盖了？是不是全局样式里写了body { font-family: sans-serif; }，把你自定义的字体给盖住了？

做网站显示不同字体，很多时候是因为“谁说了算”没搞清楚。浏览器渲染是有优先级的，内联 > 内部 > 外部。如果你在一个div里直接写了style="font-family: 'MyFont';"，那外面写再多也没用。反之，如果外部样式表写得晚，也可能把前面的覆盖掉。

记得有次帮一个做电商的朋友排查，折腾了半天，最后发现是他用了个第三方插件，那个插件里有一段强制定义字体的代码，把他自己写的给顶掉了。把那段代码删了，或者加个!important（虽然不推荐滥用，但紧急时刻管用），立马恢复正常。

第三个坑：备用字体没设好。

这点最容易被忽视。做网站显示不同字体，你得给浏览器留条后路。万一用户网不好，字体没加载出来呢？你得写个font-family: 'MyFont', 'Microsoft YaHei', sans-serif;。

这样，如果MyFont加载失败，浏览器就会自动 fallback 到微软雅黑，再不行就是无衬线字体。虽然不如你自定义的字体好看，但至少不乱码，不显示方框。

我见过太多人，只写一个字体名，没写备用。结果用户一打开，满屏的方框或者默认宋体，丑得没法看。这时候再解释“这是字体加载失败”，客户只回你一句：“我不管，给我改好。”

最后说点实在的。做网站，字体不是越大越好，也不是越花哨越好。清晰、易读、加载快，才是王道。别为了追求所谓的“设计感”，牺牲了用户体验。

如果你现在正被字体问题搞得头大，不妨按我说的这三步走一遍。查格式、看优先级、设备用。大概率能解决80%的问题。剩下的20%，那就是服务器配置或者CDN缓存的锅了，得慢慢调。

建站这事儿，细节决定成败。别嫌麻烦，多试几次，总能找到那个平衡点。毕竟，咱们做网站的，不就是为了让客户的东西更好看、更好用吗？