刚才碰到一个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. Tap 模拟手势点击坐标

    前言:有时候元素怎么都定位不到,没办法就只能坐标定位了,不过这个坐标定位不准确,换个手机就可能定位不到了,这是一个下下策的定位方式. tap用法 1.tap是模拟手指点击页面上元素语法有两个参数,第一 ...

  2. python Django rest-framework 创建序列化工程步骤

    11创建项目 2创建应用 3stting添加应用(apps)-添加制定数据库-修改显示汉字(zh-hans)-上海时区(Asia/Shanghai) 4主路由添加子路由 5应用里创建子路由 6创建数据 ...

  3. python点滴:判断字符串是否为合法json格式

    在一些情况下,我们需要判断字符串是否为合法json格式. 思路很简单:尝试对字符串使用json.loads(),如果不是合法json格式,则会抛出ValueError异常. 示例如下: import ...

  4. jar安装

    安装sdk jar 安装到本地 mvn install:install-file -Dfile=F:\workspace\api-cookbook\java\src\main\lib\sdk-1.10 ...

  5. HDU 6140 17多校8 Hybrid Crystals(思维题)

    题目传送: Hybrid Crystals Problem Description > Kyber crystals, also called the living crystal or sim ...

  6. 如何在VMware中安装Linux系统

    这篇文章主要讲述如何在VMware12中安装RHEL6.9Linux操作系统 步骤一: 打开VMware软件,在主页中点击创建新的虚拟机或者点击左上角文件,在列表中点击新建虚拟机,如图: 步骤二: 点 ...

  7. 微软Power BI 每月功能更新系列——12月Power BI 新功能学习

    Power BI Desktop12月产品功能摘要 Power BI 作为实力宠粉达人每月更新不来点新花样,怎么对得起翘首期待的实力铁粉您嘞!一起来看看这一次的Power BI版本的更新又给我们带来了 ...

  8. Python 笔试 —— 效率与优雅

    1. 效率 字符串拼接: 加号拼接字符串将造成对象的创建和垃圾的回收: 使用字符串的 join 方法对尤其是循环中的字符串进行拼接(先将不断出现的字符串 append 到 一个 list 中,再进行 ...

  9. 【PPT】 Least squares temporal difference learning

    最小二次方时序差分学习 原文地址: https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd= ...

  10. 【转载】 PyTorch学习之六个学习率调整策略

    原文地址: https://blog.csdn.net/shanglianlm/article/details/85143614 ----------------------------------- ...