Typecho博客自定义字体

博客改了一下字体，字体放在了腾讯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}/文件路径