怎么才能使服务器Nginx(或者Apache)支持字体文件
为了在前端正确地显示字体,浏览器必须使用正确的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 *;
}
怎么才能使服务器Nginx(或者Apache)支持字体文件的更多相关文章
- web服务器nginx和apache的对比分析
今天准备较详细的对比一下apache httpd与nginx两个web服务器的异同点.优缺点.由于我并不是做web开发的,所以有什么理解错误还请指出,想要了解它们是因为工作中有时候会用到它, ...
- 如何让你的Apache支持include文件解析和支持shtml的相关配置
源地址:http://www.itokit.com/2011/0430/65992.html Apache支持include文件解析shtml首先要应该修改Apache配置文件httpd.conf . ...
- 树莓派做web服务器(nginx、Apache)
一想到Linux Web服务器,我们首先想到的是: Apache + MySql + Php. Apache:是世界使用排名第一的Web服务器软件. 可以运行在几乎所有广泛使用的计算机平台上,由于其跨 ...
- Windows Server 2008 R2的web服务器nginx和Apache的比较
因为很喜欢nginx,所以也想尝试在Windows下使用nginx,前面安装配置都挺顺利,把域名解析尽量后,通过域名代理访问jboss,却异常的慢,起码有3秒的时间才显示页面,而这个页面是jboss的 ...
- nginx比apache处理静态文件速度快,但是nginx处理大量并发的php请求时,容易出现502错误,频率大概是多少
首先要明确一点的是502是怎么出现的,为什么会出现502呢? 一般而言,出现502的错误是因为php-cgi连接数不够导致的.举个例子:php-cgi开10个进程,前端发20个请求,每个请求的脚本都s ...
- 让apache支持htaccess文件
第一:检测 apache是否开启mod_rewrite 通过php提供的phpinfo()函数查看环境配置,在"apache2handler -> Loaded Modules&quo ...
- nginx和apache的优缺点比较
简单的说apache httpd和nginx都是web服务器,但两者适应的场景不同,也就是两者专注于解决不同的问题.apache httpd:稳定.对动态请求处理强,但同时高并发时性能较弱,耗费资源多 ...
- nginx与Apache的对比以及优缺点
本文来自其他文章.如有好的问题,希望各位大神多多分享, 谢谢了..... 今天准备较详细的对比一下apache httpd与nginx两个web服务器的异同点.优缺点.由于我并不是做web开发的,所以 ...
- PHP如何让apache支持.htaccess 解决Internal Server Error The server …错误
TP框架 打开 www.newtp.com/index.php/Home/Index/abc出现 如下错误: Internal Server Error The server encountered ...
随机推荐
- .NET轻量级ORM框架Dapper入门精通
一.课程介绍 本次分享课程包含两个部分<.NET轻量级ORM框架Dapper修炼手册>和<.NET轻量级ORM框架Dapper葵花宝典>,阿笨将带领大家一起领略轻量级ORM框架 ...
- What is the NETStandard.Library metapackage?
In my last post, I took a quick look at the Microsoft.AspNetCore meta package. One of the libraries ...
- Firefly-RK3399笔记
有用的连接: Rockchip官方资料: http://opensource.rock-chips.com/wiki_Main_Page http://opensource.rock-chips.co ...
- 移动应用开发技术选型:WebApp>HybridApp>NativeApp
一:概念辨析 Web App:生存在浏览器里的应用,只能运行在浏览器里,宿主是浏览器,不是操作系统.资源一般都在网络上,就是一个触屏版的网站.如:微信公众号.不需要在设备上下载安装,只需通过浏览器即可 ...
- 网页出现400 Bad Request Request Header Or Cookie Too Large错误的解决方法
在开发项目过程中,突然遇到400 Bad Request Request Header Or Cookie Too Large的报错,我也是第一次出现这样的错误,感觉还是挺新奇的. 分析下出现错误的原 ...
- RobotFrameWork系列免费课程-开课了~
1. 背景介绍 有一段时间没有发表过文章了,一方面除了自己确实变得懒惰外,另一方面也确实有其它事情,无法抽出闲余时间来坚持写下去. 之前在博客园中,发表了关于<公开课一:Robot FrameW ...
- C# websocket与html js实现文件发送与接收处理
C# websocket与html js实现文件发送与接收处理 using System; using System.Collections.Generic; using System.Linq; u ...
- Effective Java 第三版——80. EXECUTORS, TASKS, STREAMS 优于线程
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- Mathematica 11.1.0 下载及注册流程
新版本注册机: http://files.cnblogs.com/files/dabaopku/Mathematica_11.1.0_Keygen.exe.zip 类似于11.0, 在控制台运行, 比 ...
- Xshell设置密钥登录CentOS6.5_64位(图文版)
一.环境 CentOS6.5 64位 VMware 14 Pro XSHEEL 5 build 1333 宝塔Linux面板 二.生成XSHELL密钥 三.上传公钥到服务器,并配置 1.上传vCent ...