应优先用 css 的 font-weight 和 font-style 实现倾斜加粗，语义正确的嵌套仅适用于既重要又需斜体表达的场景（如数学变量 x、外文术语 et al.），避免滥用无语义的 或已废弃的 execcommand。
用 <strong></strong> 和 <i></i> 组合实现倾斜加粗，但语义要对得上
直接嵌套 <strong><i>文本</i></strong> 能在视觉上同时加粗+倾斜，但得先想清楚：这段文字是否既“重要”又“需斜体表达”？比如数学变量名 x 或外文术语 et al.，<strong></strong> 强调其关键性，<i></i> 表示其为技术术语或外来语——这种组合有明确语义支撑。若只是单纯想“看起来又粗又斜”，那更可能是设计需求，该交给 CSS。
常见错误是把 <b><i></i></b> 当快捷写法，但它俩都无语义：<b></b> 不代表重要，<i></i> 也不等于“斜着好看”。屏幕阅读器不会因此加重或变调，SEO 和无障碍检测工具会弱化这类内容。
font-weight 和 font-style 配合才是可控的倾斜加粗
用 CSS 同时控制粗细和倾斜，比标签嵌套更灵活、可维护性更高：
-
font-weight: 700比bold更可靠，避免浏览器模拟加粗（尤其中文字体） -
font-style: italic是标准值；oblique是倾斜变形，仅当字体无真实 italic 字形时 fallback 使用 - 别写
font-weight: "700"——引号是语法错误；也别依赖bolder，它相对父级计算，层级一深就失控 - 如果用了自定义字体（如 Google Fonts），确认你加载的字重文件包含
700且对应 italic 版本，否则font-style: italic可能被忽略或回退成 normal
富文本编辑器里动态加粗+倾斜，别碰 document.execCommand()
Chrome 97+、Firefox 89+ 已废弃 document.execCommand("bold") 和 document.execCommand("italic")，调用后返回恒为 true，但实际行为不可预测：
- 选中部分文字时，常把整行甚至整个
<p></p>包进<strong></strong>或<i></i>，破坏语义结构 - 无法判断当前是否已存在对应标签，撤回操作失效
- 不兼容 Shadow DOM，嵌套组件内直接失效
- 强制插入
<b></b>/<i></i>，而非语义更准的<strong></strong>/<em></em>
正确做法是用 window.getSelection() + Range API：获取选区 → 遍历节点判断是否已有 <strong></strong> 或 <em></em> 父级 → 有则移除，无则包裹。这样逻辑清晰、可测试、可撤回。
加粗+倾斜失效？优先查 computed 样式和字体字重支持
写对了代码却没效果，大概率不是标签或属性写错，而是底层被吃掉了：
- 打开 Chrome DevTools 的 Computed 面板，看
font-weight和font-style最终值是不是你设的（比如显示为400或normal） - 点开 Fonts 面板，确认当前渲染的字体文件是否真包含
700 italic字形；右键 “Show fonts” 查看实际加载路径 - 父元素设了
font-weight: 100，子元素即使写700也可能被继承链压制（尤其用了all: unset或inherit的场景） - 字体加载期间出现闪动：先显示系统字体（带粗斜），再换 Web 字体（缺字重就变细变正）——加
font-display: swap或 fallback 字体族能缓解
真正卡住人的，从来不是“怎么写”，而是“写了之后字体有没有那个字重”和“样式有没有被更高优先级规则静默覆盖”。盯着 computed 值看，比反复改 HTML 标签快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
