N0ts-blog

  • 首页
  • 简介
  • 友人
  • 分类
    • 笔记
    • 我的项目
  • 其他小站
    • 主页
    • Nutscraft
    • lovexhj
    • 笔记
  • 留言
I AM N0TS
即使前方的路看似绝境,也要有硬生生给自己开出一条路的勇气
  1. 首页
  2. 日常
  3. 正文

无需修改配置解决CSS调用字体跨域问题,CDN通用

2020年4月1日 825点热度 5人点赞 0条评论

前言

今天想把自己新写的个人主页套上cdn,但是遇到了一个问题

 

 

这里可以看见,tff字体文件加载的确成功了,但是却因为跨域问题而不能载入

百度的方法很多需要涉及到修改nginx配置等,所以我解决一下不需要修改配置调用一个css即可解决的办法

 

方法

首先打开一个网站,这个网站可以把字体文件转换为base64码的css文件

https://transfonter.org/

这里简单解释一下需要用到的功能

  • Add Fonts:添加字体文件
  • Convert:开始转换

下方的选择配置中需要打开 Family support 与 Base64 encode

其中Family support默认是打开的,所以我们只需要打开Base64 encode的选项即可

 

 

然后上传需要的字体文件,这里我上传一个ttf格式的文件,上传后就可以点击转换按钮啦,单机转换

 

 

稍等片刻后,转换完成,单击Download下载转换后的文件

 

 

解压后会发现有这些文件,我们只需要拷贝stylesheet.css到自己网站的css目录就行,其他文件不需要,随意删除

 

 

然后打开这个文件,会发现有一对超级长的base64码,这个可以无视

现在要做的就是,让整个网站调用这个css文件来加载字体

我们打开stylesheet.css,添加一句代码用于给整个网站字体做出修改

* {
    font-family: Fira Code;
}

 

 

然后,在html里面加上调用这个css的一句代码

<link rel="stylesheet" type="text/css" href="./css/stylesheet.css">

我删除了全部css的调用字体代码,改为单独调用一个字体的css,然后就可以正常访问啦

标签: 技术分享 资源分享
最后更新:2020年4月1日

n0ts

点赞
< 上一篇
下一篇 >

文章评论

取消回复

我的猪
love love love

标签聚合
我的项目 垃圾笔记 资源分享 日常 html api Linux 技术分享
最近评论
发布于 2 天前(03月06日) 嗯嗯,不用做商业用途,那就谢谢啦!
发布于 2 天前(03月06日) 站点名字:技术松鼠 站点链接:https://www.jishusongshu.com 站点介绍...
发布于 2 天前(03月06日) 你好,我现在想做一个主题收集的站点,想把您做的几个个人主页放进去可以吗? 目前放了一个https:...
发布于 4 天前(03月04日) 大佬打扰了,备案完毕,更改站点至 ``https://blog.skyil.cn/``,麻烦您更改下...
发布于 1 周前(03月01日) 好棒啊,我也是19级的学生,根本没法跟你比 :cry:
最新 热点 随机
最新 热点 随机
nrm报错 internal/validators.js:124问题解决办法 .NET Core 3.1 解决跨域请求问题CORS 解决Win10蓝牙添加设备无法连接问题 利用火绒轻松搞定QQ、微信私自获取浏览器历史记录 本博客Kratos主题改造分享 本小站更换主题完成
.NET Core 3.1 解决跨域请求问题CORSnrm报错 internal/validators.js:124问题解决办法
javax.el.PropertyNotFoundException: 类型xxx上找不到属性xxx问题解决 新的域名正在备案... 两年很短,感谢你们陪伴 centos7.*搭建minecraft服务器并开启ftp服务 给网站加上点击特效~ 无需修改配置解决CSS调用字体跨域问题,CDN通用
站长统计
一言

:D 获取中...

COPYRIGHT © 2021 N0ts-blog. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

湘ICP备18015792号