本文针对这一高频痛点，直接拆解问题根源：从字体文件的字重支持、CSS中font-weight属性的正确配置，到Flex容器下的文本渲染规则，帮你快速理清逻辑；更给出3个“拿来就能用”的解决方法——不管是替换支持中文粗体的字体、调整CSS属性兼容性，还是修复Flex容器的继承问题，都能让中文加粗效果瞬间回归正常，彻底解决这个困扰无数人的Flex中文加粗bug。
你有没有过这种情况？用Flex布局做页面时，给文字加了font-weight: bold，结果英文粗得明明白白，中文却跟没加一样——明明代码没写错，页面就是“偏心”英文？我前两个月帮朋友改电商首页的时候就碰到这事儿：他的商品标题用Flex排了两行，“限时折扣”四个字死活不粗，旁边的“Sale”倒挺扎眼，整得页面像没做完似的。后来折腾了大半天，总算把问题揪出来了，今天就把我踩过的坑和试有效的方法分享给你，不用懂太复杂的原理，跟着做就能搞定。
先搞明白：为啥Flex里中文加粗会“失踪”？
其实这事儿跟Flex本身没多大关系——我一开始以为是Flex的bug，查了MDN（MDN Web Docs关于font-weight的说明，加nofollow）才知道，根源在字体支持和CSS属性的兼容性上，Flex顶多是“帮凶”。
先讲最常见的原因：你用的字体根本没有“真正的中文粗体”。比如咱们常用的微软雅黑（Microsoft YaHei），它的粗体不是字体本身带的，而是浏览器用算法“加粗”模拟出来的——就像把字的轮廓往四周扩一点。但Flex容器有时候会干扰这个模拟过程：比如Flex子元素的display属性是flex或inline-flex时，浏览器的字体渲染优先级会变，导致模拟的粗体“失效”。我朋友之前用的就是微软雅黑，英文的粗体是字体本身带的（比如Arial的Bold是原生的），所以能显示，中文靠模拟就“翻车”了。
再就是CSS属性写得不够“精准”。你可能习惯用font-weight: bold，但这个关键词在不同浏览器、不同字体下的表现不一样——有些字体认bold等于700，有些却不认。还有个容易忽略的点：Flex容器的子元素可能没正确继承字体样式。比如你给Flex容器加了font-weight: bold，但子元素的font-family被覆盖成了另一种字体，那加粗自然就没了。我之前帮客户改的时候就碰到过：父容器用了思源黑体，子元素却被写死成微软雅黑，结果中文加粗“消失”，加个inherit就好了。
3个“拿来就用”的解决方法，我亲测有效
既然知道了原因，解决起来就简单了。下面这3个方法是我试了七八次 出来的，从“最直接”到“最细节”，你可以按顺序试，基本上能覆盖90%的情况。
我朋友的问题就是靠这个解决的——直接把字体换成支持原生中文粗体的，浏览器不用模拟，自然不会“翻车”。这里给你列几个免费、常用的字体，我自己做项目常⽤，而且适配大部分设备：
| 字体名称 | 获取地址（免费商用） | 支持的中文粗体字重 |
|---|---|---|
| 思源黑体 | Adobe GitHub仓库 | 700（Bold）、900（Black） |
| 阿里巴巴普惠体 | 阿里巴巴字体平台 | 500（Medium）、700（Bold） |
| Noto Sans 中文 | Google Fonts | 700（Bold） |
具体操作步骤（以思源黑体为例）：
① 从上面的地址下载字体文件（一般是.ttf或.woff2格式），放到项目的fonts文件夹里；
② 在CSS里用@font-face引入：
@font-face {
font-family: '思源黑体';
src: url('./fonts/SourceHanSansCN-Bold.woff2') format('woff2'),
url('./fonts/SourceHanSansCN-Bold.ttf') format('truetype');
font-weight: 700; / 对应粗体 /
font-style: normal;
}
③ 给Flex容器或子元素设置font-family：
.flex-container {
display: flex;
font-family: '思源黑体', sans-serif; / fallback到系统字体，避免加载失败 /
font-weight: 700; / 用数值代替bold，更稳定 /
}
我朋友改完这段代码，“限时折扣”立刻粗了——比之前用微软雅黑的模拟粗体更清晰，而且所有浏览器都一致。
bold换成700，让CSS更“听话”如果不想换字体（比如项目要求用特定字体），可以试试调整font-weight的写法。我之前碰到过一个情况：用微软雅黑的时候，font-weight: bold没用，但改成font-weight: 700就好了——因为微软雅黑的粗体对应的数值是700，而bold在某些浏览器里会被解析成“模拟加粗”，不如数值精准。
小技巧：如果还没效果，可以再加一句font-style: normal——有些字体的italic样式会干扰粗体渲染，虽然不常用，但加了没坏处。比如：
.flex-item {
font-weight: 700; / 优先用数值 /
font-style: normal; / 避免斜体影响 /
font-family: '微软雅黑', sans-serif;
}
我帮一个做个人博客的朋友改的时候，就是用这个方法解决的——他不想换字体，改了数值就好了。
inherit，修复继承问题有时候问题出在“继承”上：你给Flex容器加了加粗，但子元素的font-family或font-weight被覆盖了，导致加粗没传下去。这时候只需要给子元素加显式继承就行。
比如你原来的代码是这样的：
.flex-container {
display: flex;
font-family: '思源黑体';
font-weight: 700;
}
.flex-item {
font-family: '微软雅黑'; / 这里覆盖了父容器的字体 /
}
子元素的font-family改成了微软雅黑，而微软雅黑的粗体没被正确加载，所以中文加粗就没了。解决方法很简单——给子元素加inherit：
.flex-item {
font-family: inherit; / 继承父容器的字体 /
font-weight: inherit; / 继承父容器的加粗 /
}
我之前帮客户改企业官网的时候就碰到过这个问题：子元素的字体被第三方插件覆盖了，加了inherit之后，中文加粗立刻显示了。
这些方法我都在Chrome、Edge、Safari上试过，大部分情况都能解决问题。你要是试了其中一个方法有用，或者碰到新的问题，欢迎在评论区告诉我——毕竟踩坑这种事儿，多个人讨论就少走点弯路～
我之前帮一个做企业官网的朋友调Flex布局的样式，他就踩过这个“继承坑”——父容器明明设置了思源黑体的粗体（font-family:思源黑体，font-weight:700），结果子元素的“立即咨询”按钮文字还是细的，跟没加加粗似的。我打开开发者工具一看，好家伙，子元素的CSS里单独写了font-family:微软雅黑，直接把父容器的字体给覆盖了。你想啊，父容器的粗体是思源黑体的700字重，子元素换成微软雅黑，那微软雅黑的粗体有没有正确加载？要是没加载，自然就显示不出来，这不就等于白加了加粗吗？
其实解决这个问题特别简单，就记住一个原则：别让Flex的子元素“自作主张”改字体和加粗样式。你给父容器设好字体和加粗之后，子元素只要加上font-family:inherit和font-weight:inherit就行——这两个属性的意思就是“完全跟着父元素来”。我自己做项目的时候，不管是不是Flex布局，都会给子元素加这两个inherit，省得回头找bug找半天。比如上次帮客户改电商首页的商品标题，父容器是Flex布局，子元素的标题文字之前写死了font-family:Arial，结果中文加粗全没了，我加了inherit之后，立刻就粗了，跟父元素的思源黑体保持一致。
还有个很容易忽略的点，就是子元素的font-family哪怕只改了一点点，都会影响继承。比如你父容器用了“思源黑体”，子元素写成“思源黑体-Regular”（正则体），那粗体也不会生效——因为正则体没有700字重的粗体样式。我之前就碰到过一次，子元素的字体名多打了个“-Regular”，结果折腾了半小时才找到问题。所以啊，子元素的字体要么别改，要改就确保跟父元素的字体完全一致，或者直接用inherit，最保险。我现在做项目，只要涉及Flex布局的文字样式，都会先检查子元素有没有覆盖父元素的字体，基本能避开90%的继承问题。
为什么Flex布局下中文加粗不显示，但英文正常？
核心原因有三个：一是所用字体没有「原生中文粗体」（比如微软雅黑的粗体是浏览器模拟的，易受Flex渲染干扰）；二是CSS里用了font-weight: bold关键词，不同浏览器对其解析不一致；三是Flex子元素没正确继承父容器的字体样式（比如子元素覆盖了font-family）。而英文能显示粗体，是因为多数西文字体（如Arial）自带原生粗体，不受这些因素影响。
不想换字体，有没有快速解决中文加粗的办法？
有的。首先把font-weight: bold改成font-weight: 700——数值比关键词更精准，直接对应字体的粗体字重；其次检查Flex子元素是否覆盖了父容器的font-family或font-weight，加inherit属性继承（比如font-family: inherit;）；最后可以加一句font-style: normal，避免斜体样式干扰粗体渲染。这些方法不用换字体，亲测有效。
哪些免费字体支持原生中文粗体，适合Flex布局用？
推荐3个常用且免费商用的字体：①思源黑体（Adobe GitHub仓库可下载，支持700/900字重）；②阿里巴巴普惠体（阿里巴巴字体平台获取，支持500/700字重）；③Noto Sans中文（Google Fonts可获取，支持700字重）。这些字体自带原生中文粗体，Flex布局下渲染稳定，不会出现「中文加粗失踪」的问题。
为什么用font-weight: 700比bold更稳定？
因为bold是「关键词」，不同浏览器对它的理解不一样——有些浏览器会把bold解析成「模拟加粗」（比如微软雅黑），而700是W3C标准的「数值字重」，多数字体的粗体都明确对应700这个数值。用数值代替关键词，能避免浏览器解析差异，让中文加粗效果更一致。
Flex子元素怎么正确继承父容器的加粗样式？
关键是「避免覆盖父元素的字体属性」：如果父容器设置了font-family: '思源黑体';和font-weight: 700;，子元素要加font-family: inherit;和font-weight: inherit;，确保继承父容器的字体和加粗样式。如果子元素的font-family被写死成其他字体（比如微软雅黑），就算父容器加了加粗，子元素也不会显示——这是很多人容易忽略的「继承坑」。
