做前端或者UI设计的，估计都头疼过这个问题。就是那个白色的字，在浅色背景上根本看不见，在深色背景上又觉得太亮、太刺眼，看着累。
很多人第一反应是调透明度，或者加阴影。但这俩招，用多了就显廉价。今天咱不整那些虚头巴脑的理论，就聊聊我在实际项目里怎么搞白色字体的，全是干货，希望能帮到你。
先说个最常见的场景：白色字放在浅灰或者米色背景上。这时候，如果你直接给字体设个#FFFFFF，完蛋，用户根本看不清。这时候，别急着去调背景色，那是设计师的事。你要做的是给文字加点“呼吸感”。
我一般会用text-shadow。别一听阴影就觉得low，用对了就是质感。比如，给白色字加一个极淡的黑色阴影，偏移量设小点，0 1px 2px rgba(0,0,0,0.1)。这层淡淡的影子，能让文字和背景稍微分离开一点， readability（可读性）立马就上去了。注意，透明度别太高，0.1到0.2之间刚刚好，多了就像脏了。
再说说深色背景上的白色字。很多新手喜欢用纯白，觉得这样最干净。其实大错特错。纯白在深色背景上，对比度太高，长时间看眼睛真的会酸。我现在的习惯是，把白色稍微调灰一点点。比如用#F5F5F5，或者#EEEEEE。虽然肉眼看着差不多，但那种柔和感，用户是感觉得到的。
还有一个细节，字重。白色字在深色背景上，如果字重太细，比如300或者400，有时候会显得有点飘，不够稳重。这时候，稍微加粗一点，比如500或者600，视觉上的稳固感会强很多。当然，这得看你用的字体本身的设计，有些字体本身就偏细，那也没办法，只能靠背景色来衬托。
记得之前有个电商项目，要做个活动页。背景是那种很浅的奶油色，文案是白色的。老板非说看不清，让我改。我一开始也是懵的，后来我想，既然背景不能动，那就动文字。我没用阴影，而是给文字加了一个极细的描边。border: 1px solid rgba(0,0,0,0.05)。这个描边几乎看不见，但就是有了它，文字的边缘清晰了很多。这种微操，才是提升体验的关键。
还有，别忽略字体本身。有些字体，比如Helvetica，白色显示效果就比Arial好。因为Helvetica的字怀（counter）更开阔，白色填充进去，视觉上更通透。如果你没得选，那就只能靠调整行高和字间距。把line-height稍微调大一点，letter-spacing加个1px或者2px。空间大了，白色字就不会挤在一起，显得更高级。
说到这，可能有人问，那具体代码怎么写？其实很简单。别去搞什么复杂的滤镜，那是给图片用的。对于文字，就是颜色、阴影、字重、间距这四个维度来回调。
比如，你可以试试这个组合：color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.1); font-weight: 500; line-height: 1.6;。这是一个比较通用的安全牌，放在大多数浅色或中等亮度的背景上，都不会出错。
当然，最好的办法还是多测试。在不同设备上，不同光线环境下，看看白色字的实际效果。手机屏幕和电脑屏幕的色温不一样，白色显示出来的感觉也不同。别光在自己电脑上看着舒服就完事了，得让用户看着舒服。
最后想说，网站怎么做白色字，真的没有标准答案。它取决于你的背景色、你的品牌调性、甚至是你想传达的情绪。有时候，一点点的不完美，反而更真实，更有人味。别怕试错，多调几次，找到那个让你自己看着也舒服的平衡点，那就对了。
希望这点小经验，能帮你解决一点小麻烦。做设计，做开发，其实都是在这个细节里磨性子。慢慢来，比较快。
