HTML通过相对路径引入本地字体失效，不使用@font-face如何解决

问题核心原因 #

你当前的写法存在两个核心错误：

• 你用<link rel="stylesheet">引入的是字体二进制文件，不是CSS样式文件，浏览器无法从字体文件里读取字体绑定规则，哪怕网络面板显示资源加载完成也不会生效。
• 你原本的@font-face代码存在语法错误：font-weight:400后缺少英文逗号，url和括号之间不能有空格，会导致规则不生效。

解决方案 #

首先明确：浏览器使用自定义字体必须依赖@font-face规则完成「字体文件」和「字体族名称」的绑定，不存在完全脱离该规则的用法。你不想手写@font-face的需求，可以通过抽离独立CSS文件的方式实现，相当于把原本CDN提供的CSS逻辑本地化，不需要在业务代码里写@font-face。
具体操作步骤：

1. 在assets/style/目录下新建material-icons.css文件，写入修正后的规则：

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url("Material-Icons.woff2");
}

2. 修改你index.html里的引入代码，改为引入上述CSS文件：

<link rel="stylesheet" href="assets/style/material-icons.css">

3. 如果你需要保留字体预加载逻辑优化加载速度，可以额外加一条预加载规则，不要和样式引入规则混用：

<link rel="preload" href="assets/style/Material-Icons.woff2" as="font" type="font/woff2" crossorigin>

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