资讯专栏INFORMATION COLUMN

CSS 字体(例如font-awesome),使用子域名之后不能正确显示

animabear / 1430人阅读

摘要:症状原来能正常显示的情况下,将图片文件改为子域名访问,方便加速。切换之后一切正常,但是的图片没有正确显示,全部显示框框原因因为浏览器的安全规则,虽然是子域名,但是跨域载入字体文件的时候被浏览器拦截,导致了显示不正常。解决以为例,修改或者

症状

原来能正常显示的情况下,将js、css、图片文件改为子域名访问,方便cdn加速。切换之后一切正常,但是font-awesome的图片没有正确显示,全部显示框框

原因

因为浏览器的安全规则,虽然是子域名,但是css跨域载入字体文件的时候被浏览器拦截,导致了显示不正常。

解决

以apache为例,修改.htaccess或者 httpd.conf


# Make sure proxies don’t deliver the wrong content
Header append Vary User-Agent env=!dont-vary
  
    Header set Access-Control-Allow-Origin "*"
  

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/35777.html

相关文章

  • CSS 字体(例如font-awesome),使用子域之后不能正确显示

    摘要:症状原来能正常显示的情况下,将图片文件改为子域名访问,方便加速。切换之后一切正常,但是的图片没有正确显示,全部显示框框原因因为浏览器的安全规则,虽然是子域名,但是跨域载入字体文件的时候被浏览器拦截,导致了显示不正常。解决以为例,修改或者 症状 原来能正常显示的情况下,将js、css、图片文件改为子域名访问,方便cdn加速。切换之后一切正常,但是font-awesome的图片没有正确显示...

    vboy1010 评论0 收藏0
  • FontAwesome 图标字体库的使用

    摘要:和元素广泛用于图标。可以直接对图标的属性进行更改,如图标的颜色大小,并且可以组合不同的图标形成所需的图标等。执行以上步骤,若是没有图标显示,可以打开,检查字体库,即引入文件的路径是否正确。在前端开发中,许多新手常会遇见一个问题,参考的网页上有类似下图的图标,但在资源里却找不到对应的文件,这是因为这些网页使用了图标库。这里介绍一种常见的图标库——FontAwesome的使用。 1.登录Fon...

    zsirfs 评论0 收藏0
  • CSS进阶篇--fontAwesome代替网页icon小图标

    摘要:网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋。直接看代码链接链接链接链接得出的结果就是其他应用还有其他更加复杂一点的应用,包括固定宽度浮动反转旋转叠加图标等。 引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影。 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标...

    paney129 评论0 收藏0
  • 关于yo+gulp+bower一起构建应用时遇到的一些问题总结

    摘要:问题一在中配置开发测试时用得库,无法在运行时注入。解决办法分如下几步,在自己的里直接将变量重写,指向正确的相对位置即可。 问题一、在bower中配置开发测试时用得库,无法在运行时注入。首先是打算有一些测试时候用到的库,放到bower.json文件的devDependencies里面,但是运行之后怎么也找不到对应的文件,也就是gulp无法进行注入,而加到正式的库里面就能找到解决办法参看了...

    cnsworder 评论0 收藏0
  • 前端基础入门二(CSS

    摘要:输入的时候少按一个键浏览器兼容问题比如使用的选择器命名,在是无效的能良好区分变量命名变量命名是用不要纯数字中文等命名,尽量使用英文字母来表示。选择器和类选择器最大的不同在于使用次数上。当需要设置英文字体时,英文字体名必须位于中文字体名之前。 回顾上一节HTML 思维导图 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

    Lorry_Lu 评论0 收藏0

发表评论

0条评论

animabear

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<