为了在前端正确地显示字体,浏览器必须使用正确的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. poj3104 Drying(二分最大化最小值 好题)

    https://vjudge.net/problem/POJ-3104 一开始思路不对,一直在想怎么贪心,或者套优先队列.. 其实是用二分法.感觉二分法求最值很常用啊,稍微有点思路的二分就是先推出公式 ...

  2. 编写CentOS的System V init启动脚本

    系统本身自带了说明,在/usr/share/doc/initscripts-(*)/sysvinitfiles,内容如下: 所有System V init脚本都命名为/etc/rc.d/init.d/ ...

  3. [原创]AndroBugs_Framework Android漏洞扫描器介绍

    [原创]AndroBugs_Framework Android漏洞扫描器介绍 1 AndroBugs_Framework Android 漏洞扫描器简介 一款高效的Android漏洞扫描器,可以帮助开 ...

  4. HA主备路由模式的原理 + HA和负载均衡的区别

       HA主备路由模式的原理 HA是High Availability缩写,即高可用性 ,可防止网络中由于单个防火墙的设备故障或网络故障导致网络中断,保证网络服务的连续性和安全强度.目前,ha功能已经 ...

  5. C# Activator

    需要动态的创建一个实例模型的时候,就用Activator.CreateInstance(Type type);如果是明确的知道要创建哪个实例的模型,就可以用 new C#在类工厂中动态创建类的实例,所 ...

  6. 安装istio v1.0 详细过程和步骤

      创建 istio 目录 [root@centos-110 ~]# mkdir istio [root@centos-110 ~]# cd istio   方案一: # 去下面的地址下载压缩包  # ...

  7. 在.NET下如何预防XXE注入攻击

    接下来关于.NET中XXE注入的内容来自Dean Fleming单元测试的Web站点:https://github.com/deanf1/dotnet-security-unit-tests.该站点覆 ...

  8. Jmeter压力测试(简单的http请求)-实例

    服务端系分提供的某接口样例为: 评估后可采用使用jmeter进行压力测试的步骤为: 启动jmeter:在bin下点击jmeter.bat,运行jmeter 2. 创建测试计划: 默认启动jmeter时 ...

  9. 如何使用HttpClient包实现JAVA发起HTTP请求?

    今天在搭建公司项目框架的时候,发现缺少了一个Java发送HTTP请求的工具类,在网上找了一通,经过自己的改造,已经能实现get请求和post请求的了,现在将代码贴在这里.给大家参考. 1 packag ...

  10. 浅谈MFC类CrackMe中消息处理函数查找方法

    最近一个学姐发给我了一份CrackMe希望我解一下,其中涉及到了MFC的消息函数查找的问题,就顺便以此为例谈一下自己使用的消息函数查找的方法.本人萌新,如果有任何错漏与解释不清的地方,欢迎各路大佬指正 ...