结论：应优先使用语义化标签 <strong> 和 <em> 嵌套实现加粗+倾斜，而非 <b><i>；精确样式控制须依赖 CSS 的 font-weight 与 font-style 组合，并注意字体变体支持与简写重置问题。
直接说结论：用 <em> 套 <strong> 或反过来，能同时实现语义化倾斜+加粗；但想精确控制样式（比如斜体但不加粗、加粗但不斜），必须用 CSS 的 font-weight 和 font-style 组合。
为什么不能只写 <b><i>文字</i></b>？
这种写法确实能显示为又斜又粗，但它只是“视觉叠加”，没有语义层次。浏览器和屏幕阅读器无法区分“这是强调的重要术语”还是“纯装饰性效果”。更麻烦的是：<b> 和 <i> 在现代 HTML5 中已被降级为“无语义的呈现标签”，SEO 和无障碍支持弱。实际项目里，只要涉及内容逻辑（比如警告、术语、引用），就该优先用 <strong> + <em>。
font-weight 和 font-style 怎么配才不出错？
CSS 控制最灵活，但也最容易踩坑：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 别混用
font-weight: bold和font-weight: 700—— 它们等价，但数值写法（如600）依赖字体是否真有该字重；很多免费 Web 字体只提供400和700，设500就无效 -
font-style: italic不等于oblique：前者调用字体内置斜体字形（质量好），后者是浏览器强行倾斜（变形、锯齿），优先用italic - 如果父容器设了
font-style: normal，子元素单独写font-style: italic会生效；但若父容器用了font: 16px/1.4 sans-serif这种简写，会把font-style重置为normal，子元素必须显式覆盖
加粗+倾斜一起用时，<strong> 和 <em> 谁套谁？
顺序不影响渲染结果，但影响语义优先级：
立即学习“前端免费学习笔记（深入）”；
-
<strong><em>关键术语</em></strong>：强调“这个术语很重要”，且带语气强调（适合技术文档中的核心概念） -
<em><strong>立刻行动！</strong></em>：强调“立刻行动”这个短语本身，并赋予其重要性（适合按钮文案或警告） - 嵌套层级别超过两层，比如
<strong><em><u>…</u></em></strong>，可读性和维护性会断崖下降，建议改用 CSS 类统一控制
真正容易被忽略的不是怎么写，而是字体本身是否支持你想要的组合——比如你设了 font-weight: 700; font-style: italic，但加载的字体文件没打包 700 italic 变体，浏览器就会回退到 400 italic 或 700 normal，看起来只有斜或只有粗。调试时一定得看开发者工具里的 Computed 面板，确认最终生效的 font-weight 和 font-style 值，而不是只信代码写了什么。
