网站字体如何设置好看

字体是网站最沉默的界面元素，却决定了用户读下去的第一直觉。一个页面布局再精妙，若字体选择随意、字号失当、行距局促，视觉效果立刻打折。真正好看的字体设置，不是堆砌花哨字形，而是让文字在特定屏幕上呈现最舒服的阅读节奏。

中文字体优先考虑系统原生家族。Windows平台的微软雅黑和macOS的苹方（PingFang SC）都是为屏幕显示优化的无衬线字体，笔画清晰，字怀开阔，适合正文。但要注意，微软雅黑在字号小于14像素时容易出现笔画粘连，所以设置了14像素以下的正文，应切换到系统默认的中易宋体或干脆放大字号。Linux用户常用思源黑体或文泉驿微米黑，这些开源字体渲染正常，但个别浏览器对思源黑体的字重加载有延迟，需要配合font-display: swap属性避免文字闪烁。

正文最佳字号在16至18像素之间。这个范围经过多年web排版实践验证，是视网膜屏幕下人眼读取速度最快的区间。低于15像素会让中文笔画密集的字形辨识吃力，超过20像素则导致单屏信息量骤减，用户需要频繁滚动。手机端因为视距近，16像素同样适用，但iPhone在系统开启“动态字体”时会强制放大，建议用rem单位而不是px，让字号随系统缩放。

行高是比字号更关键的细节。中文正文行高设为字号的1.6到1.8倍，段落间距不小于字号的一倍。1.6倍是紧凑型新闻网站的常用值，适合信息密度高的页面；1.8倍带有呼吸感，适合长文阅读或品牌官网。行高过小会让段落像一块砖头，视觉压力巨大；过大又让内容显得稀碎，用户很难连贯地追读。

字重选择同样影响观感。中文系统字体通常提供常规（400）和中等（500）两个常用字重，正文一律用常规，标题可用中等或半粗（600）。避免使用超过700的超粗字重做正文，因为中文字形复杂，粗重笔画在尺寸大时显得笨拙，尺寸小时又糊成一片。标题和正文字重的对比度控制在200到300之间即可，太小的差距会让层级模糊，太大则显得突兀。

颜色与背景的对比度至少要达到WCAG的AA标准，即正文与背景的对比度不低于4.5:1。纯黑与纯白虽然符合这条规则，但实际观感锐利刺眼。更稳妥的做法是用深灰（如#333）配上浅灰白背景（如#f9f9f9），对比度大约在12比1左右，既清楚又不刺目。文字颜色不要用纯红或纯蓝，蓝色在部分色弱人群眼中会发暗，红色则容易产生视觉疲劳。如果需要在强调文字中使用彩色，请附加下划线或背景色块作辅助标识。

中英文混排是许多中文网站的日常挑战。中文和英文字体要维持和谐的视觉基线，英文使用无衬线体（如Arial、Helvetica或system-ui指定的字体），并让英文字号比中文略微缩小的同时增加一点字距。在实践中，设置font-family时把中文放在后面，如“PingFang SC, "Helvetica Neue", Arial”，这样系统会优先渲染英文字体，中文字体作为回退，英文单词不会占用中文笔画的空间感。此外，中文句中的英文单词左右应留有半角空格，这是写内容时就要养成的习惯。

字体加载性能往往被人忽略。使用网页字体（Web Font）时，不要一次加载全套字体文件。常规做法是只加载所需的字重和字形子集。思源宋体或思源黑体的单个中文全字库体积可达十几MB，如果直接嵌入整包，首屏等待时间会超过三秒。通过unicode-range属性把常用三千五百字、生僻字和标点分成不同区块加载，或者直接用有中文字符集且做了subset切割的CDN字体方案，比如Google Fonts的中文字体子集或国内BootCDN提供的字体服务。正文若统一使用系统原生字体，加载成本就是零，这也是许多知名网站至今不改用网页字体的原因。

不同设备的字体渲染原理并不相同。Windows的DirectWrite在清晰度上超过旧版GDI，但依然对细体字不友好，小于0.4像素的笔画会被直接削掉。macOS和iOS的字体平滑效果偏饱满，同一套字体设置在这两个平台看起来粗细不一致。所以调试时不能只在一个系统里确认效果，要在Windows、macOS、Android至少三个环境下做交叉检查。Android的中文默认字体换成思源黑体之后（版本9及以上），渲染已经不输给iOS，但个别低端机的浏览器仍会忽略自定义字体，因此fallback链中必须写清系统通用中文字体名，比如“sans-serif”放在最后。

最终好看的标准不复杂：正文清晰易读，标题有层次但不喧闹，用户不用放大页面就能顺畅阅读，长时间浏览没有眼睛酸涩的感觉。网站字体的本质不是装饰而是传递信息，当你把每一个像素都调节到最适合人眼接收的状态，美观自然就从细节里长出来了。