[博客建设三]更换字体与美化

介绍如何创建属于自己的字体库, 以及写自己的插件

更换字体

_config.inside.yml

1 2	font: url: //fonts.googleapis.com/css?family=Baloo+Bhaijaan\|Inconsolata\|Josefin+Sans\|Montserrat

可以看到作者使用的是 google 提供的在线字体服务, 但国内无法访问.

创建字体库

获取一些字体资源, 我用的Google Fonts
或者国家字体库也有许多不错的中文字体

我们选择自己想要的字体下载.

Download Family会把所有该字体资源都下载, 你也可以在下面选择指定 font-weight 的字体下载

我们把他解压好放在 github 仓库的文件夹中

这里我下载了多个字体

新建一个 CSS 文件

myblog.css

@font-face {
font-family: 'Baloo_Paaji_2'; // 字体名字, 之后引入字体时要用到, 一般填你下载的默认名字
font-style: normal; // italic 斜体, normal 正常
src: local('Baloo_Paaji_2'), url("Baloo_Paaji_2/BalooPaaji2-VariableFont_wght.ttf");
// 网页加载字体时会先在本地查找是否存在 local 中的字体名字, 否则请求 url 中的字体资源, url 中填写相对字体的位置
}

将字体文件上传到 github, 用 jsDelivr 的免费 CDN 加速, 得到 cdn 链接

更改 font

_config.inside.yml

1 2	font: url: https://cdn.jsdelivr.net/gh/s1acr/my_jsDelivr@main/googleFonts/myblog.css

这样我们站点在加载时就获取了我们的字体库资源, 我们将后面的字体更改成我们引入的字体

_config.inside.yml


# 这里引用的就是我们之前设置的 font-family 的名字

    base: ZCOOL_XiaoWei
    logo: Lobster
    menu: Lobster
    label: Lobster
    heading: Baloo_Paaji_2
    code: Inconsolata, monospace
    print: ZCOOL_XiaoWei

效果如下: