Laravel中public目录内字体文件CSS引用问题排查

你的字体引用方式存在问题，核心原因是普通.css文件里的Laravel Blade语法（{{asset()}}）不会被解析——Laravel仅会处理.blade.php后缀的模板文件，静态CSS文件会直接原样输出内容，所以{{asset()}}才会显示成代码而非生成的URL。

下面是几种可行的解决办法：

方法1：使用相对路径（最简单） #

fonts.css位于public/assets/css目录，字体文件在public/assets/fonts目录，两者属于同级目录下的子文件夹，直接用相对路径引用字体即可：

@font-face {
    font-family: Lato-light;
    src: url("../fonts/Lato/Lato-Black.ttf");
}

方法2：使用根路径绝对地址 #

以Web根目录（public文件夹对应网站根路径）为起点，直接写绝对路径：

@font-face {
    font-family: Lato-light;
    src: url("/assets/fonts/Lato/Lato-Black.ttf");
}

方法3：将CSS文件改为Blade模板 #

把fonts.css重命名为fonts.css.blade.php，让Laravel解析文件里的Blade语法，之后在header.blade.php里正常引用：

<link href="{{ asset('assets/css/fonts.css.blade.php') }}" rel="stylesheet" />

另外注意：你在header.blade.php里的<link>标签重复写了rel="stylesheet"，删掉其中一个即可。

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