浏览器对到的默认样式是相对计算的，非固定像素值，且存在跨浏览器差异；必须用css覆盖font-size、line-height、letter-spacing等属性，并禁用align等废弃属性。

直接用 <h1></h1> 到 <h6></h6> 标签就行，但默认样式不等于“大号”

浏览器会给 <h1></h1> 自动设较大字体、加粗、上下外边距，但这个“大”是相对的，且不同浏览器渲染差异明显。比如 Chrome 的 <h1></h1> 默认是 2em（约 32px），而 Safari 可能略小；更关键的是，line-height 松散、letter-spacing 没调、颜色没改——这些加起来，视觉上根本撑不起“大号标题”的气势。

所以别只靠标签语义，得立刻覆盖默认样式：

• 必须写 font-size：用 rem 或 em 单位，比如 font-size: 2.5rem（以根元素 16px 为基准就是 40px）
• 必须设 line-height：无单位值更稳，line-height: 1.2 避免文字挤在一起
• 建议加 letter-spacing：中文标题用 0.08em ~ 0.12em，比英文更需字间呼吸感
• 禁用 align 属性：像 <h1 align="center"></h1> 是废弃写法，会触发 quirks 模式，改用 text-align: center

font 标签和 style 内联写法哪个更靠谱？

<font size="7"></font> 这类写法已从 HTML5 中彻底移除，所有现代浏览器虽仍兼容，但解析时会降级处理，且无法响应缩放、无障碍阅读器可能跳过、CSS 继承链被破坏——实际项目里一加就埋雷。

真正可控的方式只有两种：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 内联 style：适合单页、临时调试，例如 <h1 style="font-size: 42px; line-height: 1.15;">主标题</h1>
• CSS 类选择器：推荐用于多页或需要复用的场景，比如定义 .hero-title { font-size: 3rem; letter-spacing: 0.1em; }，再在 HTML 中写 <h1 class="hero-title">主标题</h1>

注意：如果用了 rem 单位，务必确认根元素 有明确 font-size 基准（如 html { font-size: 16px; }），否则计算会失准。

为什么调大字号后文字反而糊了或错位？

常见原因不是字体本身，而是排版属性没同步更新：

• line-height 没重设：字号放大后，若还用默认的 line-height: 1.6，行距会过大，看起来松散甚至断层
• margin / padding 用的是 px：比如 margin-bottom: 20px，字号变大后这段空白就显得突兀；应改用 em 或 rem，让它随字体等比缩放
• 容器宽度没约束：大号标题在窄屏上会溢出，加 max-width: 100% 和 overflow-wrap: break-word 更安全
• 中英文混排时漏了 text-rendering: optimizeLegibility：西文字母在放大后容易发虚，这行 CSS 能强制启用更精细的字形渲染

竖排大标题怎么避免字母堆成一条线？

用 writing-mode: vertical-rl 是唯一正解，但光写这一句远远不够：

• 必须配 text-orientation: upright，否则英文单词 “HTML” 会变成 H↵T↵M↵L 四行堆叠
• 父容器要设固定 height 或 min-height，否则竖排内容会让高度无限拉长
• text-align 在竖排下含义反转：此时 text-align: center 表示垂直居中（即沿文字走向居中），不是横排时的水平居中
• 首行缩进失效，竖排要用 text-indent 吗？不用——竖排没有“首行”概念，缩进逻辑得换思路，比如用 padding-left 控制左侧留白

最易被忽略的一点：竖排标题的 font-size 实际控制的是文字“行高方向”的尺寸，也就是每个字的高度；如果你发现字看起来太瘦，不是该调宽，而是该选更适合竖排的字体（如“思源宋体”“霞鹜文楷”），或者加 font-weight 强化视觉重量。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！