为了在前端正确地显示字体,浏览器必须使用正确的http header来接受字体文件。如果服务器没有设置要求的头信息,那么有些浏览器就会在控制台报错或者直接不能显示。

可能你的服务器已经配置好了,你无须再动任何东西。如果没有配置好,那么你需要注意下面几点:

  • 首先,修改mime-type headers;
  • 其次设置CORS headers-仅当你从不同域下获取字体文件或者html页面的时候。(*注意:如果你没有设置CORS headers信息,你可以直接把字体文件(路径)嵌入到CSS样式中。如果你去fontello网站下载到本地的话fontello.css中就已经这样做好了)

下面介绍两大主流服务器的字体支持配置:

Apache

设置正确的mime-type来支持字体文件,将下面的设置加入到服务器配置文件中:

AddType application/font-sfnt            otf ttf
AddType application/font-woff woff
AddType application/font-woff2 woff2
AddType application/vnd.ms-fontobject eot

如果你不能修改配置文件,那么就在你的项目下新建一个*.htaccess文件,添加下面的设置:

设置CORS headers 信息:

<FilesMatch ".(eot|ttf|otf|woff|woff2)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Nginx

Nginx服务器默认是没有支持字体的mime-type设置的,并且对.eot文件的mime-type也是不正确的。在配置文件夹下找到mime-type设置的地方。通常,在mimes.types文件下。 
搜索.eot,并在下它的设置下添加下面几行:

application/font-sfnt            otf ttf;
application/font-woff woff;
application/font-woff2 woff2;
application/vnd.ms-fontobject eot;

对于CORS headers 信息设置,添加下面的几行到你的vhost配置中:

location ~* \.(eot|otf|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin *;
}
转自:https://blog.csdn.net/yypsober/article/details/52012577

怎么才能使服务器Nginx(或者Apache)支持字体文件的更多相关文章

  1. web服务器nginx和apache的对比分析

         今天准备较详细的对比一下apache httpd与nginx两个web服务器的异同点.优缺点.由于我并不是做web开发的,所以有什么理解错误还请指出,想要了解它们是因为工作中有时候会用到它, ...

  2. 如何让你的Apache支持include文件解析和支持shtml的相关配置

    源地址:http://www.itokit.com/2011/0430/65992.html Apache支持include文件解析shtml首先要应该修改Apache配置文件httpd.conf . ...

  3. 树莓派做web服务器(nginx、Apache)

    一想到Linux Web服务器,我们首先想到的是: Apache + MySql + Php. Apache:是世界使用排名第一的Web服务器软件. 可以运行在几乎所有广泛使用的计算机平台上,由于其跨 ...

  4. Windows Server 2008 R2的web服务器nginx和Apache的比较

    因为很喜欢nginx,所以也想尝试在Windows下使用nginx,前面安装配置都挺顺利,把域名解析尽量后,通过域名代理访问jboss,却异常的慢,起码有3秒的时间才显示页面,而这个页面是jboss的 ...

  5. nginx比apache处理静态文件速度快,但是nginx处理大量并发的php请求时,容易出现502错误,频率大概是多少

    首先要明确一点的是502是怎么出现的,为什么会出现502呢? 一般而言,出现502的错误是因为php-cgi连接数不够导致的.举个例子:php-cgi开10个进程,前端发20个请求,每个请求的脚本都s ...

  6. 让apache支持htaccess文件

    第一:检测 apache是否开启mod_rewrite 通过php提供的phpinfo()函数查看环境配置,在"apache2handler -> Loaded Modules&quo ...

  7. nginx和apache的优缺点比较

    简单的说apache httpd和nginx都是web服务器,但两者适应的场景不同,也就是两者专注于解决不同的问题.apache httpd:稳定.对动态请求处理强,但同时高并发时性能较弱,耗费资源多 ...

  8. nginx与Apache的对比以及优缺点

    本文来自其他文章.如有好的问题,希望各位大神多多分享, 谢谢了..... 今天准备较详细的对比一下apache httpd与nginx两个web服务器的异同点.优缺点.由于我并不是做web开发的,所以 ...

  9. PHP如何让apache支持.htaccess 解决Internal Server Error The server …错误

    TP框架  打开 www.newtp.com/index.php/Home/Index/abc出现 如下错误: Internal Server Error The server encountered ...

随机推荐

  1. PL/SQL中查询Oracle大数(17位以上)时显示科学计数法的解决方法

    PL/SQL查询时,如果Number(17)以上的大数,会显示为科学计数法 解决方法: TOOLS->PREFERENCES->WINDOW TYPE->SQL WINDOW下选中N ...

  2. JS 正则表达式从地址中提取省市县

    var add1 = '四川省西昌市航天路'; var add2 = '北京市北京市东城区前门大街1号' var add3 = '新疆维吾尔自治区乌鲁木齐市天山区中山路479号'; var add4 ...

  3. bimgotoblock-BIM要上区块链

    比特币(BitCoin)的暴涨暴跌让参与者体验着过山车的感觉,有人一夜暴富.别墅靠海,也有人拍断大腿或者恨不得跳楼了此残生.世人也更多的听说了比特币底层的依托--区块链(BlockChain) 技术. ...

  4. window系统命令行设置proxy----Setting a proxy for Windows using the command-line

    设置代理, bypass-list的参数是不走代理地址: netsh winhttp set proxy proxy-server="socks=localhost:9090" b ...

  5. codevs 2033 邮票

    洛谷 P2725 邮票 Stamps codevs 2033 邮票 题目链接 http://codevs.cn/problem/2033/ https://www.luogu.org/problemn ...

  6. MySQL技术内幕读书笔记(三)——文件

    目录 文件 参数文件 日志文件 套接字文件 pid文件 表结构定义文件 INNODB存储引擎文件 文件 ​ 有以下类型文件 参数文件:告诉MYSQL实例启动时在哪里找到数据库文件,并且制定某些初始化参 ...

  7. 17.翻译系列:将Fluent API的配置迁移到单独的类中【EF 6 Code-First系列】

    原文链接:https://www.entityframeworktutorial.net/code-first/move-configurations-to-seperate-class-in-cod ...

  8. Latex中cls和sty文件有何区别?

    Latex中cls和sty文件有何区别? 资源 本文对 LaTeX 中 .cls 和 .sty 文件进行介绍,主要参考了 What are .cls and .sty files?How are th ...

  9. CentOS 7.5 安装KVM虚拟机(Linux)

    1.认识理解KVM虚拟机 Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中.它使用Linu ...

  10. LVS简介与使用

    一.LVS是什么? LVS的英文全称是Linux Virtual Server,即Linux虚拟服务器.它是我们国家的章文嵩博士的一个开源项目.在linux内存2.6中,它已经成为内核的一部分,在此之 ...