统计一下目前使用的自定义字体及调用。

Volantis 主题可直接参考使用。

一、标题字体

您可以挑选一个字体作为网站的 Logo 字体,均为 woff2 格式,尽可能的压缩大小。

SentyGoldenBell

@font-face {
font-family: 'SentyGoldenBell';
font-style: normal;
font-weight: normal;
font-display: swap;
src: url(https://cdn.jsdelivr.net/gh/inkss/common@1/fonts/canva/SentyGoldenBell.woff2) format('woff2');
}

SentyGoldenBell

HYMiaoHunTiJ

@font-face {
font-family: 'HYMiaoHunTiJ';
font-style: normal;
font-weight: normal;
font-display: swap;
src: url(https://cdn.jsdelivr.net/gh/inkss/common@1/fonts/canva/HYMiaoHunTiJ.woff2) format('woff2');
}

HYMiaoHunTiJ

HYRunYuan

@font-face {
font-family: 'HYRunYuan';
font-style: normal;
font-weight: normal;
font-display: swap;
src: url(https://cdn.jsdelivr.net/gh/inkss/common@1/fonts/canva/HYRunYuan.woff2) format('woff2');
}

HYRunYuan

MaShanZheng

@font-face {
font-family: 'MaShanZheng';
font-style: normal;
font-weight: normal;
font-display: swap;
src: url(https://cdn.jsdelivr.net/gh/inkss/common@1/fonts/canva/MaShanZheng-Regular.woff2) format('woff2');
}

MaShanZheng

SentyTEA

@font-face {
font-family: 'SentyTEA';
font-style: normal;
font-weight: normal;
font-display: swap;
src: url(https://cdn.jsdelivr.net/gh/inkss/common@1/fonts/canva/SentyTEA.woff2) format('woff2');
}

SentyTEA

SentySnowMountain

@font-face {
font-family: 'SentySnowMountain';
font-style: normal;
font-weight: normal;
font-display: swap;
src: url(https://cdn.jsdelivr.net/gh/inkss/common@1/fonts/canva/SentySnowMountain.woff2) format('woff2');
}

SentySnowMountain

SentyTriumphCalligraphy

@font-face {
font-family: 'SentyTriumphCalligraphy';
font-style: normal;
font-weight: normal;
font-display: swap;
src: url(https://cdn.jsdelivr.net/gh/inkss/common@1/fonts/canva/SentyTriumphCalligraphy.woff2) format('woff2');
}

SentyTriumphCalligraphy

二、正文字体

目前使用的正文字体为 ,有两种引用方式,一是通过谷歌字体方式引用,但是访问速度不太稳定,二是使用一些谷歌字体的加速网站,不过我是直接将引用的字体全部下载到本地,直接使用 引用。

Roboto,Noto Serif SC

对于 Volantis 主题,你可以修改 _config.yml 引用:

import:
link:
- <link href="https://cdn.jsdelivr.net/gh/inkss/common@1/css/roboto.min.css" rel="stylesheet" media="print" onload="this.media='all'">

再修改主题配置文件的 custom_css.fontfamily.bodyfont 即可,最终效果参见本站。

custom_css:
fontfamily:
bodyfont:
fontfamily: 'Roboto,"Noto Serif SC","Microsoft Yahei",sans-serif,Menlo,Monaco,monospace,sans-serif'

三、代码字体

代码字体使用了 系列,同样通过 加速访问。

JetBrainsMono

对于 Volantis 主题,你可以修改 _config.yml 引用:

import:
link:
- <link href="https://cdn.jsdelivr.net/gh/inkss/common@1/css/jetbrains.min.css" rel="stylesheet" media="print" onload="this.media='all'">

再修改主题配置文件的 custom_css.fontfamily.codefont 即可,最终效果参见本站。

custom_css:
fontfamily:
codefont:
fontfamily: 'JetBrainsMono,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace'

四、自定义加速

当然你也可以将这些字体下载到本地,自行加载的拉 ~



本站托管于 Github Page | 由 Jsdelivr 静态加速

Copyright 2018 - 2021 szyink. All Rights Reserved

枋柚梓的猫会发光

This is a picture without description