HTML页面资源加载异常求助：FontAwesome图标、图片、CSS样式及Google Fonts无法正常加载

问题背景 #

我最近在做一个学习HTML、CSS和JavaScript的项目，写完完整的HTML页面后，在Brave和Microsoft Edge里测试时遇到了麻烦——图片加载不出来，FontAwesome图标显示不出来，连CSS样式也完全没生效。为了排查问题，我把代码精简到了最核心的部分，只保留了CSS样式和页面头部的关键代码。

精简后的代码片段 #

本地CSS文件（style.css） #

* { box-sizing: border-box; font-family: 'Raleway', sans-serif; background-color: #F2F2F2; }

HTML页面代码 #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<link href="/css/style.css">
<link href="/css/normalize.css">
<title>Booki</title>
<nav>
<a class="nav" href="#">Hébergement</a>
<a class="nav" href="#">Activités</a>
<nav>
<a href="#"><img src="/assets/logo/Booki.png"></a>
</head>
</html>

解决过程与方案 #

折腾了好一阵后，我终于定位到问题根源了——资源路径开头的斜杠设置错误！

在本地项目中，路径开头的斜杠/会被浏览器解析为根目录（比如服务器的根目录），但我的项目文件并不是放在根目录下，而是在一个子文件夹里。另外还要注意，原来的CSS引用标签漏写了rel="stylesheet"属性，这也是CSS不生效的小细节。

修正后的路径应该去掉开头的斜杠，同时补全必要属性：

• 把<link href="/css/style.css">改成<link rel="stylesheet" href="css/style.css">
• 把<link href="/css/normalize.css">改成<link rel="stylesheet" href="css/normalize.css">
• 把<img src="/assets/logo/Booki.png">改成<img src="assets/logo/Booki.png">

修改之后，图片、FontAwesome图标和CSS样式都正常加载了！

内容的提问来源于stack exchange，提问作者Guillaume Lamarque