专栏首页李洋博客Nginx无法加载.woff .eot .svg .ttf等字体文件的解决办法

Nginx无法加载.woff .eot .svg .ttf等字体文件的解决办法

很久之前写过windows20008服务器无法加载woff文件的问题,文章是:解决网站部署svg/woff/woff2字体404错误的方法,今天来说下Nginx无法加载woff的问题,我目前使用的是程序是lnmp,宝塔控制面板,使用的TP5,但是在后台访问的时候无法加载woff文件,页面提示502 bad gateway,使用f12查看开发者信息,所有的woff都是502,所有页面的小图片均已无法显示,如图:

按照网上教程有两个解决方案:一是添加woff后缀到.conf配置文件,代码如下:

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|eot|otf|ttf|woff|woff2|svg)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }

注意,配置文件是存在的,仅仅需要添加其中的“|eot|otf|ttf|woff|woff2|svg”后缀即可,就是这些字体文件,添加进去即可,害怕设置错误的话还可以新建一个配置段落,代码如下:

#加载woff字体
    location ~ \.(eot|otf|ttf|woff|woff2|svg)$ {
        add_header  Access-Control-Allow-Origin *;
    }

这个是独立独立的段落,功能增加的是跨域代码,允许.woff等后缀文件进行跨域显示。问题解决了,很简单,几个代码,但是我还是有个疑问,为什么我的主站代码一切正常,这个测试站TP5却得手动添加呢?另外如果出现“ laravel 访问路由出现404 ”则需要添加如下代码:

location / {
    try_files $uri/ /index.php?$query_string;
}

这个文件没有遇到过,只是看见网上有人说了一句,所以我就添加在这里了,如果遇到了可以试试如上代码是否可用,如有其他问题请留言反馈,虽说我也不一定会,但是可以抛砖引玉啊,毕竟三个臭皮匠顶个诸葛亮嘛,哈哈哈!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 记一次改字体的辛酸史,解决CDN跨域问题

    今天看到主题作者主页大标题用了这个字体,我一想哇还挺好看,也想自己整一个,看了看主题设置并没有更改字体的设置,只有头部标签引用,又回头看了看原页面,注意到了这两...

    jcjyxjs
  • CSS3魔法堂:认识@font-face和Font Icon

    一、前言                                过去我们总通过图片来美化站点的LOGO、标题、图标等,而现在我们可以通过@font-f...

    ^_^肥仔John
  • CSS调用远程字体

    Demo 可以参考:http://idv3.sinaapp.com 中标题字体的用法,具体用法如下:

    大江小浪
  • 修改网页自定义字体的CSS代码+图文教程

    HI,五一玩的怎么样?除了人山人海,高速堵车,高铁全是人之外其他都还好啦,是不是,哈哈哈~~~好了,不闹了,在假期有朋友问我,想要修改网页的字体怎么办?怎么更换...

    李洋个人博客
  • Nginx实现跨域使用字体文件的配置方法

    本文主要给大家介绍了关于Nginx跨域使用字体文件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:

    习惯说一说
  • svgtofont.js 自动生成图标字体和彩色图标文件

    一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体,导入到项目中使用。

    小弟调调
  • Nginx动静分离实现负载均衡

    使用Debian环境。安装Nginx(默认安装),一个web项目,安装tomcat(默认安装)等。

    小小科
  • Nginx + Tomcat实现动静分离、负载均衡

    为了提高网站的响应速度,减轻程序服务器(Tomcat,Jboss等)的负载,对于静态资源比如图片,js,css等文件,我们可以在反向代理服务器中进行缓存,这样浏...

    菲宇
  • web字体规范

    对于设计稿的解析中,肯定是有些设计稿有特殊的字体,而这些字体可能只有设计师才有,或者只有前端拓展了系统字库才能显示器正确效果。但对于前端页面的终极使用者,他们可...

    RobinsonZhang
  • webpack处理ttf字体文件报错的方法

    我们在使用webpack打包的时候经常因为引入ttf字体报错而烦恼,这里解决ttf字体报错的方法需要加入一个url-loader,没有的话需要npm先安装下:

    Dream城堡
  • Web-Fontmin -- 在线提取你需要的字体

    关于@font-face @font-face是CSS3中的一个模块,使用 @font-face 可以自定义网页字体,即使用户的电脑没有安装某种字体。怎么用 @...

    IMWeb前端团队
  • 自定义字体

    本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 概述 一般来说,网页上的字体使用的都是我们电脑里面的字体,比如我们常说的微软...

    IMWeb前端团队
  • 自定义字体

    一般来说,网页上的字体使用的都是我们电脑里面的字体,比如我们常说的微软雅黑、宋体就是 windows 系统自带的字体。所以你可以看到网页的字体一般都比较中规中矩...

    IMWeb前端团队
  • Web-Fontmin -- 在线提取你需要的字体

    @font-face是CSS3中的一个模块,使用 @font-face 可以自定义网页字体,即使用户的电脑没有安装某种字体。怎么用 @font-face 呢?你...

    IMWeb前端团队
  • 04-移动端开发教程-在线字体图标

    在IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其...

    老马
  • 网页中内嵌字体

    gaofc
  • 04-移动端开发教程-在线字体

    在IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其...

    老马
  • Bootstrap里的文件分别代表什么意思及其引用方法

    *bootstrap.css 是完整的bootstrap样式表,未经压缩过的,可供开发的时候进行调试用 *bootstrap.min.css 是经过压缩后的bo...

    德顺
  • 聊一聊“@font-face”

    在@font-face处理兼容中出现了一个#iefix这个东东?到底是神马东西呢? 案例: ? 首先先了解关于@font-face的基本知识 1、@font-...

    HTML5学堂

扫码关注云+社区

领取腾讯云代金券