网页文字的字体和大小，取决于CSS中几个核心属性的共同作用。最基础的是font-family和font-size，但仅仅写下这两个属性还不足以应对多平台、多分辨率的显示需求。字体栈的先后顺序、字号单位的选择、行高与字重的配合，都会显著影响最终阅读体验。本文围绕这些控制方法展开，结合可运行的CSS示例说明如何在不同场景下调整文字外观。
字号单位如何选择：px、em、rem与clamp的取舍
设置网页文字大小时，最容易想到的是font-size: 16px。像素单位直观、固定，适合追求精确还原的设计稿。但px也有明显缺点：浏览器用户如果修改系统默认字号，或者使用辅助工具放大页面，px设定的文字可能仍然保持不变，可访问性较差。因此，正文文字更适合使用相对单位，让字号跟随根元素或父元素缩放。
em和rem是两种常见的相对单位。em的参照物是父元素的字号，容易产生层级叠加问题。例如父元素设置font-size: 1.2em，子元素再设置font-size: 1.2em，实际字号会逐级放大。相比之下，rem始终参照根元素<html>的字号，计算规则简单，更适合全局排版。一般建议在<html>上设置一个基础字号，例如font-size: 16px，然后在其他元素中优先使用rem。
如果希望字号跟随视口宽度变化，可以使用vw单位，但纯vw在手机窄屏上可能太小、在桌面宽屏上又可能过大。更好的方案是使用clamp()函数，它允许同时设置最小字号、首选字号和最大字号。下面是一组常见的字号配置：
html {
font-size: 16px;
}
body {
font-size: 1rem;
line-height: 1.6;
}
h1 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
}
p {
font-size: 0.95rem;
color: #333;
}
这段代码中，h1的字号会根据视口宽度在1.5rem到2.5rem之间动态调整，既避免手机上过大，也避免桌面上过小。对于正文段落，使用接近1rem的字号配合1.6左右的行高，可以保持较好的阅读节奏。
字体族设置：font-family与字体回退机制
font-family决定文字使用哪一套字体。它允许指定多个字体名称，浏览器会从第一个开始尝试，如果系统中没有该字体，就继续尝试下一个，直到找到可用字体。这种机制叫字体回退栈。建议把通用字体族放在最后，例如sans-serif、serif或monospace，这样即使前面所有字体都不存在，浏览器也能使用默认的无衬线或衬线字体渲染。
中文字体名称或包含空格的英文字体名称需要用引号包裹。常见写法如下：
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", "Microsoft YaHei", sans-serif;
}
这套系统字体栈在苹果、Windows和Android设备上都能优先使用系统原生字体，速度最快，也不会产生额外字体下载请求。对于中文网页，可以补充"PingFang SC"、"Hiragino Sans GB"、"Source Han Sans SC"等中文字体名称。需要注意，如果字体名称本身包含中文，也要用双引号引起来，例如font-family: "思源黑体", "Microsoft YaHei", sans-serif;。
当需要使用设计师提供的特殊字体时，可以通过@font-face自定义字体。它告诉浏览器从哪里下载字体文件，以及如何处理加载过程。为避免文字在字体加载完成前长时间不可见，建议设置font-display: swap，让浏览器先使用回退字体显示文字，字体加载完成后再替换。示例如下：
@font-face {
font-family: "CustomFont";
src: url("/fonts/custom.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
h2 {
font-family: "CustomFont", "Microsoft YaHei", sans-serif;
}
这样配置后，标题文字会优先使用自定义字体，如果字体文件尚未下载完成，则临时显示系统中可用的无衬线字体，避免页面出现空白文字区域。
字重、行高与复合写法：让字体样式更完整
除了字体种类和字号，font-weight和line-height同样影响文字观感。font-weight可以设置为normal、bold，也可以使用数值100到900。中文网页不适合大量使用极细字体，因为在低分辨率屏幕上容易发虚，建议正文使用400或500，标题使用600或700。
line-height用于控制行间距。正文行高通常设置为1.5到1.7，标题行高可以略小，例如1.2到1.4。行高可以使用无单位数值，它会根据元素自身的字号自动计算，比固定像素更灵活。下面是一组包含字重、字型和行高的完整样式：
p {
font: 400 1rem/1.6 "Segoe UI", "Microsoft YaHei", sans-serif;
}
h3 {
font: 700 1.5rem/1.3 "PingFang SC", "Microsoft YaHei", sans-serif;
}
这里的font是复合属性，书写顺序依次为font-style、font-weight、font-size/line-height和font-family。其中font-size和line-height之间用斜杠分隔，字体族名称放在最后。使用复合属性可以简化代码，但必须保证顺序正确，否则部分浏览器可能无法正确解析。
移动端字号还有一个常见坑：iOS Safari在输入框获得焦点时，如果页面字号小于16px，会自动放大页面。为了避免这种情况，输入框文字应至少设置为16px。同时，可以使用媒体查询为不同屏幕宽度调整基础字号：
@media (max-width: 600px) {
html {
font-size: 15px;
}
h1 {
font-size: 1.8rem;
}
input, textarea, select {
font-size: 16px;
}
}
这种响应式字号方案既保持了移动端的舒适阅读体验，又避免输入框自动缩放打扰用户操作。综合运用字号单位、字体回退栈、自定义字体、字重与行高，就能让网页文字在不同设备和浏览器中清晰、稳定地呈现。