apache xampp 配置 firefox font-face 不加载

一、xampp 配置

参考
前端必备技能——本地服务器的搭建&配置

用 XAMPP 快速搭建 Joomla! 本地测试服务器

1.安装

Paste_Image.png

• Apache 服务器组件是必选的哈，不介绍了。由于偶尔会写一点后端代码，所以我这里把 MySQL 数据库也装上了，下边的 PHPMyAdmin 是用来管理数据库的，这个集成环境的 PHP 也是必选的哈，目前已经更新到7.0.9了，据说比5快一倍2333~
• FileZilla 是个 FTP 服务器、Mercury 是邮件服务器，含义简单明了，不过对于用来测试的本地服务器来说用处都不大。
• Tomcat 如果有喜欢使用 JSP 的后端同学可以把 Tomcat 也勾选上~
• Perl 通用脚本语言，这么火没用过肯定也听说过哈
• Webbalizer 日志分析系统
• Fake Sendmail 支持 PHP 发邮件的组件

2.配置本地测试服
这里主要讲一下本地服务器根目录的设置，将 DocumentRoot 与 Directory 的路径改为你常使用的工作目录，如这里改成‘D:/DinoWeb’。该目录将作为服务器的根目录使用。默认情况下，在浏览器中输入 http://localhost 或 http://127.0.0.1 将直接访问到这个目录

3.端口占用问题
参考XAMPP端口占用问题的解决

二、firefox font-face 不加载

参考
CSS3 @font-face
font-face实战

FF有一个跨域政策，如果字体文件的http头中没有指明Access-Control-Allow-Orig这个属性的话，那就不会加载这个字体，是为了防止盗用字体。

参考fonts not showing up in iframe in firefox

解决办法：
解决firefox和IE9对icon font字体的跨域访问问题
font-face跨域办法
Fixing Firefox font-face Cross Domain Problem
How do I add Access-Control-Allow-Origin in NGINX?

1.htaccess
参考
Windows下自由创建.htaccess文件的N种方法
.htaccess是什么？.htaccess几个简单应用
CentOS下Apache开启伪静态支持教程（简单有效）
配置完毕，htaccess填入以下代码

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.baidu.com/$1 [R,L]

如果打开页面，跳到百度，则说明配置生效了。
2.按照上述解决办法，htaccess填入以下代码

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


Header set Access-Control-Allow-Origin "*"