使用SegoeUI字体时b、strong标签加粗效果失效如何解决？

问题原因 #

• 最核心的原因是字体名称拼写错误：Segoe UI 字体的标准调用名称为Segoe UI（中间包含空格），你代码中写的SegoeUI是无空格的非标准别名，部分操作系统和浏览器无法通过该名称匹配到字体家族的粗体变体，只会调用默认的常规字重文件，因此<b>、<strong>标签自带的加粗效果无法生效。移除字体设置后浏览器会使用默认字体，默认字体的粗体变体可以被正常识别，所以加粗效果恢复正常。
• 若你使用的是自定义引入的Web版Segoe UI字体，也有可能是你仅引入了常规字重的字体文件，未引入字重为700的粗体字体文件，导致浏览器无法渲染加粗样式。

修复方案 #

1. 修正字体名称拼写，将代码中的字体配置改为标准写法：

<div style={{ fontFamily: 'Segoe UI' }}>
  <b>Hello world</b>
</div>

2. 建议补充字体 fallback 栈提升兼容性，避免部分无Segoe UI的系统（比如Linux、部分精简版Windows）字体显示异常：

<div style={{ fontFamily: 'Segoe UI', system-ui, 'Microsoft YaHei', sans-serif }}>
  <b>Hello world</b>
</div>

3. 如果你使用的是自定义导入的Web字体，检查你的@font-face配置，确保已经引入了字重为700的粗体字体资源，且font-family属性值和你业务代码中调用的名称完全一致。
4. 若调整后仍觉得加粗效果不明显，可以手动为加粗标签指定字重：

b,
strong {
  font-weight: 700;
}

内容的提问来源于stack exchange，提问作者anthino12