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

前言

今天想把自己新写的个人主页套上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，然后就可以正常访问啦