常用HTML网页自定义字体载入与声明代码-html教程-PHP中文网

@font-face声明必须位于所有使用它的css规则之前，且src路径须相对于css文件位置；必需包含font-family（加引号）和src（多格式fallback，woff2置首），并推荐设置font-display:swap防foit。

常用html网页自定义字体载入与声明代码

@font-face 声明必须写在使用前，且路径要能被CSS解析到

浏览器不会预加载未被任何 font-family 引用的 @font-face 规则。如果你把 @font-face 放在 CSS 文件末尾，而 body 样式在前面就用了该字体，那首次渲染大概率回退到 sans-serif —— 不是失败，而是“还没声明完就急着用”。

常见错误现象：font-family: "MyFont" 生效但文字始终显示系统默认字体，Network 面板里根本没发字体请求。

@font-face 建议统一放在 CSS 文件最顶部，或至少在所有使用它的选择器之前
路径必须相对于 CSS 文件位置，不是 HTML 文件位置。比如 CSS 在 /css/style.css，字体在 /fonts/abc.woff2，那么 url('../fonts/abc.woff2') 才对
不要用绝对路径如 url('/fonts/abc.woff2') 除非你确定部署后根路径一致；本地开发时容易因服务器路由出错

src 属性要按兼容性顺序列多个格式，WOFF2 必须放最前

现代浏览器（Chrome 36+、Firefox 39+、Edge 14+）都支持 .woff2，它体积比 .woff 小 30% 左右，加载更快。但 IE11 只认 .eot，旧 Android WebView 可能只支持 .ttf。单写一个格式等于主动放弃部分用户。

正确写法示例：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

@font-face {
  font-family: "Inter";
  src: url("./fonts/inter-var-latin.woff2") format("woff2"),
       url("./fonts/inter-var-latin.woff") format("woff"),
       url("./fonts/inter-var-latin.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

format("woff2") 必须第一个，否则 Safari 15.4+ 会跳过它直接试下一个（即使支持）
format("truetype") 是 .ttf 的标准写法，别写成 format("ttf") —— 浏览器不认
如果字体有可变轴（如 weight 或 width），用 font-weight: 100 900 声明范围，而不是只写 normal 或 400

font-display: swap 是防止 FOIT 的关键配置

没加 font-display: swap 时，Chrome 和 Firefox 会在字体加载完成前让文本“隐身”几百毫秒（FOIT），用户体验断层明显。加了之后，会先用备用字体渲染，等自定义字体就绪再无感替换。

值选 swap 最稳妥；fallback 和 optional 对小字体有效，但中文全量字体基本不适用
这个属性必须写在 @font-face 规则里，不能写在 font-family 应用处
某些老旧 Android 系统（如 4.4 WebView）不支持 font-display，但不影响字体加载，只是降级为默认行为

Canvas 上用自定义字体必须等 document.fonts.ready

哪怕 CSS 里已声明并应用了字体，canvas.getContext('2d').font = '16px "MyFont"' 仍可能无效——因为 Canvas 渲染不等 CSS 字体加载完成就执行了。

正确做法是监听字体加载状态：

document.fonts.load('16px "MyFont"').then(() => {
  const ctx = canvas.getContext('2d');
  ctx.font = '16px "MyFont"';
  ctx.fillText('Hello', 10, 20);
});