CClown

无需修改服务器配置解决CSS调用字体跨域问题

作者:cece 时间:2020-12-10 浏览量(88)

这段时间,我把自己的所有网站好好整理了一下,当初做的时候,所有的字体文件和公共js文件都会重复很多,占用的资源也比较大,所以我就给所有的网站套上了cdn,我将字体文件等公共文件弄了一个公共cdn网址,可是发现了一个问题,也是比较经常遇到的,那就是字体跨域问题:

aHR0cHM6Ly9ibG9nLmNjbG93bi5jb20vemJfdXNlcnMvdXBsb2FkLzIwMjAvMDYvMjAyMDA2MDgxNTkxNjIwMTEwMjUwNTAwLmpwZw.jpg

解决了这个问题之后,空间会少占用很多,打开速度会提升很多,在百度和其他站长那里请教了一下,说是改什么服务器的配置文件,还有说修改什么.htaccess文件,总之是非常的麻烦,后来通过研究与查阅,出现了一个更好的解决办法,就是将字体文件转换为base64码的css文件,这里提供一个快速生成base64码的css文件网址:https://transfonter.org/

aHR0cHM6Ly9ibG9nLmNjbG93bi5jb20vemJfdXNlcnMvdXBsb2FkLzIwMjAvMDYvMjAyMDA2MDgxNTkxNjIwMjI1MzY1NTUxLmpwZw.jpg

生成好下载后呢,将文件里的其他文件可以删除,只留下css文件,将css文件里的其他字体链接删除,留下base64码,只要是有css基础的朋友都可以操作,之后呢,再在css文件里添加以下代码:

*{
    font-family:"webfont" !important;
    font-size:inherit;
    color:inherit;
}

这样,跨域问题就解决了,在以后引用字体文件时,直接在html文件头部添加link链接引入此css文件即可,当然,最好是给字体css的链接套个cdn,虽然将字体文件变成了base64码的css文件,但是文件还是比较大的,只不过是解决了跨域问题。


文章标签:杂七杂八 css

本文选自CClown的原创文章,转载请注明内容来源:CClown(https://blog.cclown.com/post/41.html)

评论:

验证码