解决nginx下加载eot|otf|ttf|woff|svg等404 错误问题

Posted VincentYew

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决nginx下加载eot|otf|ttf|woff|svg等404 错误问题相关的知识,希望对你有一定的参考价值。

1、文件不存在,先检查一下服务器上 对应的路径上有没有对应的文件

2、mime.types的原因 需要加对应的type,如

    application/x-font-truetype           ttf;
    application/x-font-woff               woff woff2;(可省略)

3、同源策略的原因,跨域的问题

   在nginx.conf 添加如下:

        location ~* .(eot|otf|ttf|woff|svg)$ { 
             add_header Access-Control-Allow-Origin *;
         }

4、nginx识别路径问题

 如果以上都不行,检查一下日志,如果出现

/etc/nginx/html/my-web/static/fonts/8417dfa4.DIN-Condensed-Bold.ttf" failed (2: No such file or directory):

则检查一下nginx.conf 下的 location的root 指定(需要保持一致),修改如下

        location / {
            root /www; 
            index index.html index.htm;
        }       

       location ~* .(eot|otf|ttf|woff|svg)$ {
            root /www;
             add_header Access-Control-Allow-Origin *;
         }

以上是关于解决nginx下加载eot|otf|ttf|woff|svg等404 错误问题的主要内容,如果未能解决你的问题,请参考以下文章

如何将 OTF/TTF 文件转换为 EOT 格式?

Laravel:为静态文件添加 Cors 标头

安全地允许通过 MIME TYPES / fil 上传网络字体(ttf、eot、svg、woff、otf)

在webpack中加载.otf字体文件的正确方法是什么?

将 Webfonts 转换为 ttf / otf 格式 - 有可能吗?

为啥nginx环境下bootstrap中font-awesome图标显示不出来