必须通过css实现字体排版，font-family需配中文字体在前、西文字体在后、通用族收尾的回退链，line-height用无单位值，letter-spacing用em单位，竖排用writing-mode: vertical-rl配合text-orientation: upright。
不能靠 HTML 标签本身设置排版字体效果，<font></font> 已废弃，align、size 等属性也早已失效；所有有效控制都必须通过 CSS 实现。
font-family 必须配回退机制，否则中文可能崩成方块
浏览器只渲染它本地装了的字体。直接写 font-family: "Noto Serif CJK" 而不加备选，用户没装该字体时就会 fallback 到系统默认（Windows 是宋体，macOS 可能是华文宋体或苹方），甚至触发“字体缺失→方块→乱码”链式反应。
- 中英文字体要分开考虑：中文字体通常含西文，但西文字体不含中文，所以顺序必须是「中文字体在前，西文字体在后，最后是通用族名」，例如：
font-family: "HarmonyOS Sans SC", "PingFang SC", "Helvetica Neue", sans-serif - 避免用空格连写多词字体名（如
Microsoft YaHei），必须用引号包裹，否则解析失败 - 不要依赖用户电脑里有“思源黑体”“霞鹜文楷”这类开源字体——它们默认不预装，需用
@import或@font-face加载
line-height 和 letter-spacing 用无单位值和 em 单位才稳
固定像素值（如 line-height: 24px）在缩放、响应式或用户自定义字号时极易断裂；letter-spacing: 1px 在 12px 字体下太挤，在 24px 下又太松。
-
line-height推荐用无单位数值（如1.6），它会乘以当前font-size自动计算，缩放时比例不变 -
letter-spacing优先用em（如0.05em），0.03em～0.08em 是中文正文安全区间；标题可放宽到0.12em - 混排英文时，
text-rendering: optimizeLegibility能改善连字与字距，尤其对fi、fl这类组合
writing-mode: vertical-rl 是唯一合规竖排方案
别用 transform: rotate(90deg) 或手动 <br> 换行模拟竖排——文本不可选、复制错位、屏幕阅读器读不出顺序、SEO 完全失效。
- 竖排必须配
text-orientation: upright，否则英文字符会逐个横着堆叠（"HTML"变成 H↵T↵M↵L） - 容器要设固定
height或max-height，否则竖排内容会让父元素无限拉高 - 去掉所有
direction和unicode-bidi声明，它们会干扰竖排标点顺序，导致「（你好）」变成「）你好（」
真正难的不是写对那几行 CSS，而是意识到：HTML 不负责“怎么显示”，只负责“这是什么”；所有排版细节，包括中英文混排时哪个字距该松、竖排下括号该朝哪边转、缩放后行高是否还自然——都得靠你一条条用 CSS 显式声明，浏览器不会猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
