现代HTML开发应仅用CSS控制字体效果，因、无语义且无法控制字体族、大小等关键属性，而、需配合CSS实现可访问性与视觉统一；font-family必须用逗号分隔的回退链并以通用族名结尾，和<pre>须用跨平台等宽字体栈并处理white-space。
直接用 CSS 控制字体效果，而不是依赖 <b>、<i> 等标签做样式——这是现代 HTML 开发中唯一靠谱的做法。
为什么不能靠 <b> 和 <i> 改字体效果
这两个标签只表示“视觉加粗”和“视觉斜体”，不带任何语义，也不控制字体族、大小、行高、字间距等真正影响可读性的属性。浏览器默认样式可能因系统而异，比如某些 Linux 下 <i> 渲染为 oblique 而非 italic，效果不稳定。
-
<b>无法让字体变大、变色或换字体，仅触发粗体渲染（且可能被 font-weight: normal 覆盖） -
<i>在屏幕阅读器中不传达强调意图，对无障碍支持差 - 想统一全站标题字体？必须写 CSS；想让所有代码块用等宽字体？必须用
font-family: monospace，不是靠<tt>
font-family 设置字体时的回退链怎么写才可靠
单写一个字体名（如 font-family: "Helvetica"）极容易失败：用户没装该字体，浏览器就回退到默认 sans-serif，效果失控。必须用逗号分隔的回退链，并以通用族名结尾。
- 正确写法：
font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif - 避免引号套引号或空格错误，比如
"Helvetica Neue, Arial"是错的（整个字符串被当做一个字体名） - 中文要显式包含常见系统字体：Windows 用
"Microsoft YaHei"，macOS 用"PingFang SC"，iOS 用"-apple-system"，最后补system-ui或sans-serif - 不要用
<font face="...">—— 该标签在 HTML5 中已废弃，且无法响应式适配
用 <strong> 和 <em> 时字体效果怎么配合 CSS
<strong> 和 <em> 是语义标签，它们本身不定义样式，但可以作为 CSS 选择器精准控制字体表现。
立即学习“前端免费学习笔记（深入）”；
- 默认浏览器样式会让
<strong>显示为font-weight: bold，但你可以覆盖它：strong { font-weight: 800; color: #d32f2f; } -
<em>默认是斜体，但可用em { font-style: italic; font-family: "Georgia", serif; }强制换字体+斜体 - 关键点：语义标签 + CSS 才能兼顾可访问性与视觉控制；单独用标签或单独写 CSS 都不完整
- 别给
<strong>加font-size来“突出”，那会破坏文档层级结构；真要放大，请用 heading 标签或专门类名
<code> 和 <pre> 的字体设置容易忽略的细节
这两个标签专用于代码内容，但很多人只记得加样式，却漏掉关键排版属性，导致代码粘连、换行错乱或缩进失效。
-
<code>必须搭配font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace—— 这是现代跨平台等宽字体链 -
<pre>内容默认保留空格和换行，但若嵌套在 flex/grid 容器里，可能被压缩；需加white-space: pre-wrap或pre { overflow-x: auto; }防溢出 - 别用
<tt>替代<code>—— 它已被废弃，且无语义，屏幕阅读器不会将其识别为代码 - 如果代码块内有变量名（如
user_id），应进一步用<var>包裹，再通过 CSS 单独设色：var { color: #1976d2; font-style: normal; }
字体效果不是“加个标签就完事”，而是语义结构、CSS 层叠规则、系统字体可用性三者共同作用的结果。最容易被忽略的是回退链完整性与 <code> 类标签的跨平台字体栈——这两处一出问题，用户看到的就是一堆不一致的默认字体，而不是你设计的排版效果。
