• 首页
    • English
    • 中文
  • 关于我们
  • 服务项目
    • 谷歌SEO服务
    • WordPress建站服务
    • 谷歌ADS/SEM代运营
  • 项目案例
    • 医疗
    • 建材
    • 机械加工
    • 照明
    • 电商
    • 电脑硬件
  • 博客
    • 服务器运维
      • aliyun
      • 服务器安装
      • 宝塔面板
      • 虚拟化
      • 阿里云
      • Centos
      • linux
      • nginx
    • 电子商务
    • 免费资源
    • PHP
      • Magento
      • WordPress
    • 大数据采集
    • Python
    • Javascript
    • SEO
    • 未分类
  • 联系我们
What's Hot

机械模具加工公司网站设计案例

24 10 月, 2023

快速原型公司案例

24 10 月, 2023

陶瓷加工网站案例

24 10 月, 2023
Facebook Twitter Instagram
  • 中文
  • English
Facebook Twitter Instagram
VPSEO VPSEO
  • 首页
    • English
    • 中文
  • 关于我们
  • 服务项目
    • 谷歌SEO服务
    • WordPress建站服务
    • 谷歌ADS/SEM代运营
  • 项目案例
    • 医疗
    • 建材
    • 机械加工
    • 照明
    • 电商
    • 电脑硬件
  • 博客
    • 服务器运维
      • aliyun
      • 服务器安装
      • 宝塔面板
      • 虚拟化
      • 阿里云
      • Centos
      • linux
      • nginx
    • 电子商务
    • 免费资源
    • PHP
      • Magento
      • WordPress
    • 大数据采集
    • Python
    • Javascript
    • SEO
    • 未分类
  • 联系我们
VPSEO VPSEO
Home»PHP»CDN中,字体文件的跨域问题和解决
PHP

CDN中,字体文件的跨域问题和解决

chrispengcnBy chrispengcn7 8 月, 2021没有评论1 Min Read
Facebook Twitter Pinterest LinkedIn Tumblr Email
Share
Facebook Twitter LinkedIn Pinterest Email

今天部署外网上线事宜,前端我来配置了CDN,阿里云的 CDN服务,其他都没问题,简直了

阿里云的CDN  GZIP压缩也是够强

开启GZIP压缩后,原来我几十K 的 JS文件,直接变成了 不足1K ,秒加载,你妹,我们项目组高兴了一把。

这网站还不是秒开么 ?

———————————————-

看效果 :

通过这个 我得到也给结论, 在代码文件结构 尽量优化的同时,能力再强已经到极限了,但你服务器辣鸡,搭配不当,你代码优化上天 也是徒劳啊。

你不怎么优化, 服务器 各种技术配置到位的话, now你也看到了,我一个系统首页也不过用了几百ms,比我本地开发环境都快(mdzz,怪不得阿里这么贵)!

——————————  吹牛逼结束 ,开始记录今天遇到的一个问题

*  字体 font  跨域加载问题   看图

注:由于采用了cdn 加速, 本地测试 就出现了如此问题,其他一切正常的额!

那么本问题直接导致 , css 字体 图标无效,呵呵哒,颜值瞬间没了。这能忍?

原因是:字体文件在CDN服务器上、项目部署在自己的服务器上,字体文件就出现了跨域加载的问题。

于是乎,开始了Google之旅,好吧,小伙伴大部分都给出了如下建议: 摘自 网络。亲测有效

1、服务端设置XXX,具体的大家可以直接去搜索,分为apache和nginx两种设置方法,因为我很讨厌折腾这个务器,在我们坑,也无需弄我折腾,所以没测试过,这个上线之后 亲测有效,毕竟同源喽

2、将字体文件以base64编码的方式引入内嵌到样式文件中。这个本人尝试过,书写格式如下:

@font-face {

  font-family: 'icon-tb';

  src: url('../fonts/icon-tb.eot?59lb71');

  src: url('../fonts/icon-tb.eot?#iefix59lb71') format('embedded-opentype'), url('../fonts/icon-tb.woff?59lb71') format('woff'), url('../fonts/icon-tb.ttf?59lb71') format('truetype'), url('../fonts/icon-tb.svg?59lb71#icon-tb') format('svg');

  font-weight: normal;

  font-style: normal;

}

 

@font-face {

  font-family: 'icon-tb';

  S<span style="color:rgb(51,51,51);font-family:Arial;font-size:14px;line-height:26px;">rc : url("data:application/x-font-ttf;charset=utf-8;base64,XXXXXXXXXXXX") format("ttf");</span>

}

 

实际使用过程将那一长串”X“换成自己的base64编码即可。

3、将字体文件放到项目的目录下,也即让它们同源即可,好吧,都是一个爹生的,也不认生啦,问题也就解决了。这个方法是最后采取的,验证OK。

 

附:

base64在线编码工具

http://www.sucaihuo.com/js/2579.html

Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
chrispengcn
  • Website

Related Posts

PHP读取文本文件内容并随机输出任意一行

10 11 月, 2021

PHP中获取远程文件的三种方法

10 11 月, 2021

PHP array_rand() 函数随机输出数组内容

10 11 月, 2021

drupal 后台使用教程

7 8 月, 2021
Add A Comment

Leave A Reply Cancel Reply

*

code

导航
  • 首页
  • 关于我们
  • 服务项目
  • 项目案例
  • 博客文章
  • 联系我们
博客
  • 服务器运维
  • 服务器安装
  • nginx
  • PHP
  • WordPress
  • Python
  • Javascript
  • SEO
  • 电子商务
  • 大数据采集
  • 宝塔面板
  • 数据库
  • 电子商务
  • 虚拟化
  • 阿里云
导航
  • 首页
  • 关于我们
  • 谷歌SEO服务
  • 谷歌ADS/SEM代运营
  • WordPress建站服务
  • 项目案例
  • 博客
  • 联系我们
最新文章
  • 机械模具加工公司网站设计案例
  • 快速原型公司案例
  • 陶瓷加工网站案例
  • CNC数控加工日文网站案例
  • 触摸一体机数字标牌厂家网站案例
关于我们
关于我们

广州纬来科技有限公司
联系地址:广东省广州市番禺区富华中路富源二街18号合和大厦809

QQ : 13602156
Email : 13926026058@139.com
Contact: +86 13926026058

Facebook Twitter YouTube LinkedIn
© 2025 广州纬来科技有限公司 粤ICP备2023105857号-2
  • 首页
  • 关于我们
  • 谷歌SEO服务
  • 谷歌ADS/SEM代运营
  • WordPress建站服务
  • 项目案例
  • 博客
  • 联系我们

Type above and press Enter to search. Press Esc to cancel.