必须用CSS的font-family属性设置HTML标题字体,不可依赖HTML标签或过时font属性;需提供字体栈、注意引号包裹中文名、检查选择器权重与覆盖、优先使用系统中文字体并谨慎引入自定义字体。
HTML 标题用 font-family 指定字体,但不能只改标题标签本身
浏览器默认用系统无衬线字体渲染 <h1></h1> 到 <h6></h6>,想换字体,必须写 css。光在 html 里加 font 标签或属性(比如过时的 <font face="..."></font>)已无效,现代浏览器直接忽略。
实操建议:
- 优先用
font-family声明字体栈,例如:font-family: "Helvetica Neue", Arial, sans-serif; - 别只写一个字体名,必须提供备选(如
Arial、sans-serif),否则用户没装该字体时会回退到默认字体,甚至空白 - 中文字体名带空格或中文时,必须用英文引号包裹,比如:
"Microsoft YaHei"、"PingFang SC" - 避免用
<font></font>标签或style属性内联写,维护困难且无法复用
给 <h1></h1> 单独设字体,CSS 选择器要写对
很多人写 h1 { font-family: "Noto Sans CJK SC"; } 没生效,常见原因是选择器被覆盖或拼写错误。
实操建议:
- 检查是否被其他 CSS 规则覆盖:用浏览器开发者工具(F12)看
font-family是否被划掉,是则说明权重不够或顺序靠后 - 确保选择器足够具体,比如项目用了 BEM 或组件化结构,可能需要写成
.article__title h1或h1.title - 如果页面有多个
<h1></h1>但只想改某一个,加 class 更稳妥,别依赖标签选择器 - 注意大小写:CSS 中
h1和H1是等价的,但 class 名大小写敏感,.Title≠.title
中文字体加载慢?@font-face 引入需谨慎
想用思源黑体、霞鹜文楷这类开源字体,得用 @font-face 加载,但容易引发 FOIT(字体闪白)或布局偏移。
立即学习“前端免费学习笔记(深入)”;
实操建议:
- 优先使用系统自带中文字体栈,例如:
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;—— 启动快、无需下载 - 若必须自定义字体,用
font-display: swap;防止文字长时间不可见 - WOFF2 格式优先(体积小、兼容好),别传 TTF 或 OTF 原始文件
- 别把整套字重(light/regular/bold)全加载,按需引入,比如只用 regular 和 bold,就只声明两个
@font-face
移动端标题字体变小?检查 viewport 和缩放行为
有些手机上 <h1></h1> 看起来特别小,不是字体设错了,而是浏览器自动缩放或视口设置问题。
实操建议:
- 确认
<meta name="viewport" content="width=device-width, initial-scale=1">存在且没写错,缺了这行,iOS Safari 会强制缩放文本 - 不要用
font-size: 100%或em直接套在<h1></h1>上,它会继承父级字号再放大,容易失控;推荐用rem或固定px+ 媒体查询微调 - iOS 上
<h1></h1>默认有-webkit-text-size-adjust: auto;,某些情况会放大,可显式设为none(但慎用,影响可访问性) - 用
font-size: clamp(1.5rem, 4vw, 2.5rem);做响应式字号更可靠,比纯媒体查询灵活
font-family,实际牵扯到加载策略、CSS 层叠、设备特性、甚至可访问性反馈。最容易被忽略的是:你写的那行 CSS,到底有没有真正应用到目标元素上——别猜,F12 看 computed style。










