刚才碰到一个css加载字体跨域问题,记录一下。
站点的动态请求与静态文件请求是不同的域名的。站点的域名为 www.domain.com,而静态文件的域名为 st.domain.com。
问题:
页面中加载css文件:<link rel="stylesheet" href="http://st.domain.com/css/uniform.css" />
此css中调用了外部字体如下:
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot');
}
浏览器报请求跨域的错误。

解决方案:
我们使用Access-Control-Allow-Origin:* 通过启用cors 来解决跨域问题。
具体步骤如下:
1.开启apache的mod_headers模块
LoadModule headers_module modules/mod_headers.so

2.设置Access-Control-Allow-Origin
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

done!

css加载字体跨域问题的更多相关文章

  1. 使用Typescript写的Vue初学者Hello World实例(实现按需加载、跨域调试、await/async)

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  2. Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  3. netstrem获取302后的地址,可用来截图,加载实际跨域文件

    直接放代码,老外博客看来的,老外还是牛逼,这都用出来了:http://jessewarden.com/2009/03/handling-crossdomainxml-and-302-redirects ...

  4. CSS远程加载字体

    CSS 远程加载字体的方法,做网站CSS的都知道,用户浏览网站时,网页上的字体是加载本地的.换言之,如果网站使用了用户电脑所没有安装的字体,那显示字体就会被默认字体所代替了,自然效果就大受影响了. 上 ...

  5. 加上cdn后字体跨域

    @font-face是CSS3中的一个特性,可以把自己定义的Web字体嵌入到网页中,随着@font-face,越来越多的网页采用字体图标作为网页中的小图形. 比如Bootstrap就采用了Glyphi ...

  6. css加载会造成阻塞吗?

    终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染 ...

  7. css加载会造成阻塞吗

    本文由云+社区发表 作者:嘿嘿嘿 可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试. 为 ...

  8. webpack4加载字体

    webpack加载字体,刚开始下载完字体后就用css去引用它,结果死活没显示我要的字体,后来https://www.aliyun.com/jiaocheng/654750.html这篇文章说要把下载的 ...

  9. 关于IIS下字体跨域问题

    将网站的CSS与项目分离后报了一个错,是因为字体跨域的原因,查了一下资料. 解决方案如下: 1:打开访问的资源iis,在HTTP 响应表头中添加代码名称:Access-Control-Allow-Or ...

随机推荐

  1. webrtc 音频一点相关知识

    采样频率:  44.1kHz ,它的意思是每秒取样44100次   .8kHz    8000次,  16kHz   160000次 比特率:  比特率是大家常听说的一个名词,数码录音一般使用16比特 ...

  2. 若sql语句中order by指定了多个字段,怎么排序?

    举个例子吧: order by id desc,time desc 先是按 id 降序排列 (优先)如果 id 字段 有些是一样的话 再按time 降序排列 (前提是满足id降序排列)

  3. IDEA_debug窗口问题,debugger窗口消失,窗口漂浮等

  4. es6 常用总结

    1.变量 let 声明的变量只在它所在的代码块有效,不允许重复声明 const 声明是一个只读的常量.一旦声明,常量的值就不能改变. const与let的作用域相同,只在声明所在的块级作用域内有效. ...

  5. hadoop day 4

    1.自定义的一种数据类型,要在hadoop的各个节点之间传输,应该遵循hadoop的序列化机制 就必须实现hadoop相应的序列化接口Writable 实现的方法包括:write(),readFiel ...

  6. 20165228 2017-2018-2 《Java程序设计》第7周学习总结

    20165228 2017-2018-2 <Java程序设计>第7周学习总结 教材学习内容总结 MySQL数据库管理系统安装和初始化 使用MySQL建立连接和数据库.表 使用JDBC:(1 ...

  7. 【linux基础】使用命令行编译运行c++程序

    前言 在linux系统运行程序,小鹅知道的有3种编译方式,一种是直接命令行编译,一种是使用Cmake,一种是使用脚本文件(*.sh).本文介绍的是使用命令行编译. 使用过程 注意不同系统的编译器版本可 ...

  8. python 加密 hashlib与hmac模块

    https://www.jb51.net/article/128911.htm hashlib模块简介: hashlib模块为不同的安全哈希/安全散列(Secure Hash Algorithm)和 ...

  9. [MarkDown] markdown语法小结

    目录 写在前面 目录 特殊字符自动转换 段落和换行 第一阶标题 第二阶标题显示效果有下划线 H1 H2有下划线 H3 区块引用 列表 代码区块 分割线 链接 强调 删除线 代码 图片 反斜杠 表格 g ...

  10. P3084 [USACO13OPEN]照片Photo (dp+单调队列优化)

    题目链接:传送门 题目: 题目描述 Farmer John has decided to assemble a panoramic photo of a lineup of his N cows ( ...