强仔
@qiangzai

昨天晚上看见别人的博客改了一个自定义字体,瞬间感觉爱了,今天中午撒,在吾柯大佬(老色批 )的帮助下把博客改了一下字体,字体放在了腾讯OSS里,好家伙,这下肯定比把字体文件放本地好多了,下面简单记录一下改字体的过程,其实不复杂,就是在那个字体跨域废了点时间,主要还是我菜,但是经过折腾后发现,还是把选择把字体文件存在github仓库里比较好,各位自行选择吧。

文字教程

  • 首先我们需要准备字体文件
    这里简单分享一个字体网站,100字体网,上面的字体都是免费商用的,找到你喜欢的下载下来

尽量不要下载太大的字体,因为将用户加载容易变慢,影响体验,当然,服务器配置叼的当我没说过这句话

  • 转换字体文件格式
    我们下载好,打卡压缩包就会看到 tff 后缀的字体文件


根据浏览器版本的不同,各种浏览器有时间不会识别读写出来此文件后缀格式,自然文字也不会读写出来,这时间我们就需要准备好多类型的字体文件格式, eot,woff,woff2,svg及tff ,不会转换莫得怕,这里在线字体转换,最后准备成这个样子就行了

  • 选择储存方式
    这点根据你实际情况,可以把字体文件存本地服务器,也可以存oss里,三种方式,大佬随意吧

第一种 ,如果你存本地服务器,别忘了修改nginx配置,代码加到配置里即可

 location ~* \.(eot|otf|ttf|woff|woff2|svg)$ {
add_header Access-Control-Allow-Origin * always;}

大概是这样子的

然后去全局css文件定义属性,一般是style.css

@font-face{
font-family: 'qz';
src:  url('文件直链.tff');
src:  url('文件直链.eot');
src:  url('文件直链.svg');
src:  url('文件直链.woff');
src:  url('文件直链.woff2');
}

最后在body里加上,下面代码刷新即可,不出来字体就清除缓存

font-family: 'qz';

第二种 ,如果存oss里记得跨添加域访问CORS规则

不想麻烦就按提示,填*就完事了,最后一样,定义css并在body中引用,就是这样滴
刷新访问或清除缓存访问即可看到,效果如下

第三种 ,也是最推荐的一种,我们可以把字体文件存在github,通过jsdelivr的cdn全球加速,简单,免费,速度快,实用性强。

最后和上面一样,调用即可

https://cdn.jsdelivr.net/gh/{user}/{repo}/文件路径

结语

感谢访问强仔博客,希望本文对你有所帮助

本文文章字数为:645个

您阅读这篇文章共花了:

文章最后更新于:2020 年 11 月 07 日 10:36:42

当前IP为:3.236.156.34,请自觉遵守网络安全

END
下午3:21 · 2020年10月06日
496
10
8
宝贝留个言吧

    哆啦A梦     
    2个月前

    时刻关注大佬

      强仔靓仔     
      2个月前
      @哆啦A梦

      害,get到啥子没

    哆啦A梦     
    2个月前

    get到了免费字体网站地址

      强仔靓仔     
      2个月前
      @哆啦A梦

      好家伙

    ove     
    2个月前

    不错哦

    四月浅森     
    2个月前

    大佬这个名字后面的 Windows 10 / Google Chrome 是怎么做到的呀,挺有意思的,我也想做一个这个效果

      强仔靓仔     
      2个月前
      @四月浅森

      https://qz.al/2020/09/10/793.html这里

        四月浅森     
        2个月前
        @强仔

        好耶,感谢大佬 arushy2

    Jfz     
    2个月前

    中文字体动不动10M+ 再厉害的服务器也能被拖累

      强仔靓仔     
      2个月前
      @Jfz

      确实,字体大了贼卡

教程
Typecho博客自定义字体
昨天晚上看见别人的博客改了一个自定义字体,瞬间感觉爱了,今天中午撒,在吾柯大佬(老色批 )的帮助下把博客改了一下字体,字体放在了腾讯OSS...
欢迎扫描二维码继续阅读
October 6, 2020
强仔博客
blogger
强仔
统计
文章:106 篇
分类:4 个
评论:324 条
加载耗时:21 ms
运行时长:1年145天
by yoniu.
强仔博客