HTML模板如何使用自定义字体_HTML模板界面排版美学-html教程-PHP中文网

最稳妥的字体加载方式是用@font-face优先加载woff2并降级woff，配font-display:swap；预加载需加crossorigin；中文字体栈须前置系统字体；line-height必须用无单位值。

html模板如何使用自定义字体_html模板界面排版美学

直接用 `@font-face` 加载 WOFF2 是最稳妥的方式

浏览器对 WOFF2 支持已全覆盖（Chrome 36+、Firefox 39+、Safari 10+、Edge 14+），它压缩率高、加载快，比 WOFF/TTF 更适合生产环境。别再为兼容 IE 保留 EOT 或 SVG——2026 年还在强求 IE 支持，只会拖慢所有现代用户。

常见错误是只写一个 src，结果在某些系统或网络条件下字体 fallback 失败：

必须提供至少两个格式：优先 woff2，降级到 woff（不要用 ttf，它没压缩，体积大）
font-display: swap 必须加，否则文字会白屏等待字体加载完成
font-family 名称建议用连字符或英文，避免空格和中文（如 'My-Brand-Font'，不是 '我的品牌字体'）

示例：

@font-face {
  font-family: 'My-Brand-Font';
  src: url('fonts/myfont.woff2') format('woff2'),
       url('fonts/myfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Google Fonts 不要直接 ``，改用 `` + `&display=swap`

直接 `` 看似简单，但会阻塞渲染——CSS 文件本身需额外 HTTP 请求，且字体资源在解析完 CSS 后才发起。

更优解是预加载关键字体文件，并手动声明 @font-face：

先用 Google Fonts URL 解析出实际 WOFF2 地址（例如 https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2）
在中添加：<link rel="preload" as="font" type="font/woff2" crossorigin href="https://fonts.gstatic.com/...">
再在 CSS 中用 @font-face 声明该字体，src 指向同一地址
务必加 crossorigin 属性，否则预加载失效（字体跨域资源需匿名请求）

这样能确保字体在 HTML 解析阶段就并行下载，首屏文本几乎不闪动。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

字体栈里系统字体顺序不能乱，中文必须前置「苹方 / 微软雅黑 / 系统默认」

很多人把 sans-serif 放最前，或把 Helvetica 写在中文前面，结果 macOS 用户看到的是 Helvetica（无中文字形），直接 fallback 到系统默认宋体，排版崩坏。

正确顺序要按「设备原生支持优先级」排列，尤其注意中英文混合场景：

中文段落：优先 "PingFang SC"（macOS）、"Hiragino Sans GB"（旧 macOS）、"Microsoft YaHei"（Windows）、"Noto Sans CJK SC"（Linux/Android）、最后 sans-serif
英文段落：可单独设 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
避免混用：不要在同一个 font-family 值里把中英字体交叉写（如 "Roboto", "Microsoft YaHei"），浏览器可能跳过整个声明

示例：

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

`font-size` 和 `line-height` 必须用相对单位，但别盲目套 rem

用 rem 确实方便全局缩放，但若根元素 font-size 被 JS 动态修改（比如适配不同屏幕），所有基于 rem 的行高都会失准——line-height: 1.5 是无单位数值，它始终相对于当前元素的 font-size，而 line-height: 1.5rem 会变成固定像素值，失去弹性。

真正安全的做法：

font-size 可用 rem 或 em（推荐 clamp(1rem, 4vw, 1.25rem) 做响应式字号）
line-height **永远用无单位数值**（如 1.6），它自动随字号缩放
margin 和 padding 用 em 或 rem 配合 line-height，才能保持段落呼吸感一致
中文段落首行缩进别用 text-indent: 2em，iOS Safari 有渲染 bug；改用 padding-left: 2em + box-sizing: border-box