使用 .htaccess 一例：重定向字体文件

最新推荐文章于 2026-05-14 09:25:49 发布

原创最新推荐文章于 2026-05-14 09:25:49 发布 · 585 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#laravel #运维

Laravel 专栏收录该内容

2 篇文章

订阅专栏

在更新基于Laravel的LIMS系统时，重构客户端导致fontawesome图标字体URL改变。原来通过SCSS导入，现在通过Webpack合并CSS。新旧URL的不同引起显示问题。通过在.htaccess文件中添加重定向规则，将新URL映射到旧URL路径，成功解决了字体文件加载问题。

最近在更新基于 Laravel 开发的LIMS系统（实验室信息管理系统），重构客户端，修改了 fontawesome 图标字体的构建方式。重构的一个意外结果是，新的打包样式表和原先的样式表所引用的字体文件的 url 地址不同。

重构前，我在一个 scss 文件中导入 fontawesome 源文件：

@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
@import "~@fortawesome/fontawesome-free/scss/_shims.scss";

现在则在 webpack.mix.js 中直接合并 fontawesome 的发布文件：

mix.styles(
    [
        "node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css",
        "node_modules/@fortawesome/fontawesome-free/css/regular.min.css",
        "node_modules/@fortawesome/fontawesome-free/css/solid.min.css",
        "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css",
        ......
    ],
    "public/css/layout_lims_yx.css"
);

打包后访问页面，发现了问题，重构前后字体文件 url 地址不同（以fa-regular-400.woff2为例）：

新的地址
http://www.e-lims.cn:8021/webfonts/fa-regular-400.woff2
原地址
http://www.e-lims.cn:8021/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2

看了一下 scss 源码, 字体文件的路径由 $fa-font-path 定义：

url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2')

$fa-font-path 在 _variables.scss 中定义

$fa-font-path:         "../webfonts" !default;

不知为何，原本导入 scss 源码方式打包的结果会不对，估计是别重新赋值了，但一时没发现罪魁祸首。

解决问题的办法，最简单的，就是按新的目录再复制一份字体问题。在这里，我们脑雾一下，把简单问题复杂化，拿 .htaccess 的重定向来练练手。

Laravel 默认的应用路径 public 目录下，已经为我们生成了一个 .htaccess 文件，在 RewriteEngine On 行后插入如下代码:

# 字体地址转换
RewriteRule ^webfonts/fa-(.*)$ fonts/vendor/@fortawesome/fontawesome-free/webfa-$1 [L]

.htaccess 文件是 apache 的一个配置文件，可以实现文件重定向URL、防止目录列表、禁止特定的IP地址、防止盗链等功能。模块mod_rewrite允许基于正则表达式解析器重写进入服务器的URL请求。RewriteRule指令用于定义重写规则，语法格式是：

RewriteRule Pattern Substitution [flags]

其中，Pattern是一个perl兼容的正则表达式。

简单解释一下示例中的正则表达式：

尖括号^匹配输入字符串的开始位置，符号$匹配输入字符串的结尾位置。

符号 . 匹配换行符以外的所有单个字符，星号 * 重复零次或更多次。符号 . 和星号放一起，就表示重复零次或更多次的任意单个字符。

左右一对圆括号 ( ) 代表一个分组，标记一个分组表达式的开始和结束位置。输入的字符串将被此分组表达式匹配并且记住供以后使用。正则表达式^(foo) (bar)$ 匹配输入串"foo bar foo bar"时，会匹配并记住字符串中前两个单词，并分别表示为 $1和$2 。示例中只有一对圆括号，它匹配的结果在引用时即为$1

模式^webfonts/fa-(.*)$ 将匹配任何地址中含 webfonts/fa- 的请求(fa-后面至少还要有一个其它字符)，webfonts/fa-替换为 fonts/vendor/@fortawesome/fontawesome-free/webfa-，匹配的部分（即$1）附加到webfa-后面

示例中，[L] 表示停止处理此规则后接下来的规则。

实测，此招管用。