讲师中心 微信公众号
AI工具推荐 视频效率加速

css font weight 不生效怎么办_字体粗细失效原因分析

老墨小哥_6775

老墨小哥_6775

发布时间:2026-01-05 13:13:38

|

429人浏览过

|

来源于php中文网

原创

font-weight未生效的主因是字体不支持对应字重,需通过DevTools检查计算值及字体文件是否存在;其次注意加载顺序、简写语法缺失font-family、打印/移动端兼容性等问题。

css font weight 不生效怎么办_字体粗细失效原因分析

font-weight 设置了但没变粗?先看字体支不支持

绝大多数情况下,font-weight: 500 或 font-weight: 600 不生效,不是你写错了,而是当前字体压根没提供这个字重。比如系统自带的 Microsoft YaHei(微软雅黑)只包含 normal(400)和 bold(700)两个字重——中间的 500、600 全部被浏览器自动“降级”到 400 或“升级”到 700。

  • 用开发者工具(DevTools)打开「Computed」面板,看 font-weight 最终计算值是 400 还是 700,再点开旁边的字体名,确认它是否真有对应字重文件
  • Google Fonts 等服务默认只加载 wght@400 和 wght@700,要支持 500,得显式加参数,例如:https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700
  • 自定义字体必须用 @font-face 分别声明每种字重,且 font-weight 值要严格匹配:
@font-face {
  font-family: 'MyFont';
  src: url('myfont-medium.woff2') format('woff2');
  font-weight: 500; /* 必须写 500,不能写 medium */
}
@font-face {
  font-family: 'MyFont';
  src: url('myfont-bold.woff2') format('woff2');
  font-weight: 700;
}

线上正常、本地失效?优先级和加载顺序在捣鬼

常见于用了第三方 UI 库(如 Element Plus、Ant Design)的项目:本地开发时你的 CSS 在框架样式之后引入,所以能覆盖;但构建后打包顺序变了,框架样式反而盖住了你的 font-weight。

  • 检查 DevTools 的「Styles」面板,看你的规则是不是被划掉(strikethrough),被哪个选择器干掉了
  • 不要依赖 !important 治标,优先改选择器权重,比如把 .title { font-weight: 500; } 改成 body .title { font-weight: 500; }
  • H5 页面特别容易中招:大字体包(如 10MB 的 .ttf)异步加载完成前,浏览器用系统字体临时渲染(此时 font-weight 可能有效),加载完切回自定义字体后,因字重缺失立刻“变细”——这时直接删掉自定义字体,靠系统字体 + 合理 font-weight 反而更稳

打印样式或移动端加粗失败?字体家族必须锁死

打印预览里 font-weight: bold 失效,大概率是因为浏览器在打印时悄悄换掉了你的字体(比如换成 Times New Roman),而该字体根本不支持 bold 渲染。

Outlook Calendar & Microsoft 365
Outlook Calendar & Microsoft 365

Outlook 日历 / Microsoft 365 日历 SECURE API CLI。当用户需要列出、搜索或读取 Outlook / Microsoft 365 日历事件,以及创建……

下载
  • 打印媒体查询里必须强制指定一个「已知支持多字重」的无衬线字体:
@media print {
  .bold-row {
    font-family: Arial, 'Helvetica Neue', sans-serif !important;
    font-weight: 700 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
  • 安卓 WebView 对 font-weight 解析极不稳定,尤其老版本。实测有效的兜底方案:用 text-shadow: 0.1px 0 0 currentColor 模拟加粗感(慎用于正文,仅限小范围强调)
  • Chrome / Safari 对 font-weight: 100 等极细字重支持差,MDN 明确说:“对只有 normal/bold 的字体,100–500 全当 400 渲染”——别硬刚,换字体或换设计

font 简写属性里 font-weight 失效?漏写了 font-family

font 是简写属性,语法要求严格:font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family]。其中 font-size 和 font-family 是必需项,缺一不可。

立即学习“前端免费学习笔记(深入)”;

  • 下面这行会失效(浏览器忽略整个声明,或 fallback 到默认字体):
.selector { font: 500 16px; }
  • 正确写法必须带字体名:
.selector { font: 500 16px 'Segoe UI', sans-serif; }
  • 如果想用系统字体栈又怕写错,直接拆开写更安全:font-weight: 500; font-size: 16px;

字体粗细不是 CSS 单方面能决定的事——它卡在字体文件、浏览器匹配算法、加载时机、甚至打印引擎之间。最省事的解法,永远是先查 DevTools 里的 Computed Styles,再顺着字体名反向验证资源是否存在。别猜,直接看浏览器到底用了哪个文件、哪个字重。

热门AI工具

更多
音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2506

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

4459

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

3267

2026.03.24

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

4747

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

2148

2023.08.10

页面置换算法
页面置换算法

页面置换算法是操作系统中用来决定在内存中哪些页面应该被换出以便为新的页面提供空间的算法。本专题为大家提供页面置换算法的相关文章,大家可以免费体验。

4856

2023.08.14

http与https有哪些区别
http与https有哪些区别

http与https的区别:1、协议安全性;2、连接方式;3、证书管理;4、连接状态;5、端口号;6、资源消耗;7、兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

5270

2024.08.16

vsd文件打开方法
vsd文件打开方法

vsd文件打开方法有使用Microsoft Visio软件、使用Microsoft Visio查看器、转换为其他格式等。想了解更多vsd文件相关内容,可以阅读本专题下面的文章。

1202

2023.10.30

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

160

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 5.7万人学习

CSS教程
CSS教程

共754课时 | 94.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn