将网页从 .html 改为 .php 后，CSS 中的 @font-face 无法加载自定义字体，通常源于相对路径解析差异或服务器 MIME 类型配置问题；本文提供可立即验证的路径修正方案与关键排查要点。
将网页从 .html 改为 .php 后，css 中的 `@font-face` 无法加载自定义字体，通常源于相对路径解析差异或服务器 mime 类型配置问题；本文提供可立即验证的路径修正方案与关键排查要点。
当您将静态 HTML 页面（如 index.html）重命名为 PHP 文件（如 index.php）后，页面结构看似未变，但浏览器实际请求资源的行为可能已悄然改变——尤其体现在 @font-face 的字体文件路径解析上。根本原因并非 PHP 本身“禁用”了字体，而是：PHP 文件的执行环境不改变 HTML 渲染逻辑，但可能暴露原有 HTML 中被忽略的路径脆弱性。
? 核心问题：相对路径在不同上下文中的歧义
在原始 .html 文件中，浏览器以该 HTML 文件所在目录为基准解析 url('fonts/Billy-Regular.TTF')。但一旦改为 .php，若页面通过某种路由、子目录访问（例如 https://example.com/forum/index.php），或服务器配置了 URL 重写（如 Apache 的 mod_rewrite），当前文档基路径（base URL）可能发生变化，导致相对路径 fonts/... 指向错误位置。
更关键的是：.php 文件常被置于动态结构中（如 /forum/ 子目录），而 fonts/ 目录可能实际位于网站根目录下。此时 url('fonts/...') 会被解析为 https://example.com/forum/fonts/...（404），而非预期的 https://example.com/fonts/...。
✅ 正确做法是使用明确的路径定位方式：
立即学习“PHP免费学习笔记（深入）”；
-
根相对路径（推荐）：以 / 开头，始终相对于网站根目录
@font-face { font-family: 'BillyReg'; src: url('/fonts/Billy-Regular.ttf') format('truetype'); }✅ 无论 PHP 文件位于 /、/forum/ 或 /admin/pages/，该路径均指向 https://yoursite.com/fonts/Billy-Regular.ttf
-
同级相对路径（次选）：使用 ./ 显式声明“当前目录”
@font-face { font-family: 'BillyReg'; src: url('./fonts/Billy-Regular.ttf') format('truetype'); }⚠️ 仅当 fonts/ 文件夹与 .php 文件处于同一目录时有效（例如两者都在 /forum/ 下）
? 提示：字体文件扩展名建议统一小写（.ttf 而非 .TTF），部分服务器（尤其是 Linux）区分大小写，.TTF 可能返回 404。
? 额外必须检查项（常被忽视）
-
服务器 MIME 类型配置
PHP 不影响字体加载，但若 Web 服务器未正确声明 .ttf 文件的 MIME 类型，浏览器会拒绝加载。确保服务器返回 Content-Type: font/ttf（Apache 可在 .htaccess 中添加）：AddType font/ttf .ttf AddType font/woff .woff AddType font/woff2 .woff2
字体文件权限与可访问性
在浏览器地址栏直接访问字体 URL（如 https://yoursite.com/fonts/Billy-Regular.ttf）。若返回 403（禁止）或 404（未找到），说明路径错误或服务器限制了字体目录的公开访问。-
CSS 语法与字体声明完整性
补充 format() 提示，提升兼容性；并确保 font-family 名称在后续 CSS 中严格匹配引号与大小写：/* 声明时 */ @font-face { font-family: 'BillyReg'; /* 注意单引号 */ src: url('/fonts/Billy-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* 使用时 — 必须完全一致 */ body { font-family: 'BillyReg', sans-serif; /* 保留引号！ */ }
✅ 最终验证步骤（三步速查）
- 打开浏览器开发者工具（F12）→ Network 标签页 → 刷新页面 → 筛选 ttf → 查看字体请求是否返回 200 OK；
- 点击该字体请求，确认响应头含 Content-Type: font/ttf；
- 在 Elements 面板中检查 <style> 内 @font-face 是否生效（可临时在控制台输入 window.getComputedStyle(document.body).fontFamily 验证计算值）。
迁移本身不会破坏样式，它只是让潜在的路径与配置问题浮出水面。坚持使用根相对路径 /fonts/...，配合 MIME 类型校准，即可彻底解决 PHP 化后字体“消失”的困扰。
