自定义你的网站字体

下载字体

下载自己喜欢的字体，字体格式为.ttf，这里推荐一个字体网站：http://www.zhaozi.cn/s/all/ttf/

转化字体格式

将下载好的字体转换成.eot、 .woff、 .woff2三种格式，文件名可以是任意英文，没有特殊要求，可以根据自己的喜好命名（不要设置为中文就可以了）。转化的网站：https://www.fontke.com/tool/convfont/

上传字体

将转换好的.eot、 .woff、 .woff2、.ttf、.svg、.otf格式字体上传到自己网站任何位置，只要和后面的代码路径一致就可以了。

具体CSS格式

@font-face {
  font-family: "ysniziti";
  src: url("https://你的文件路径/ziti.woff2") format("woff2"),
       url("https://你的文件路径/ziti.woff") format("woff"),
       url("https://你的文件路径/ziti.ttf") format("truetype"),
       url("https://你的文件路径/ziti.eot") format("embedded-opentype"),
       url("https://你的文件路径/ziti.svg") format("svg"),
       url("https://你的文件路径/ziti.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body{
    font-family: 'ysniziti'
};

本站CSS代码

@font-face {
  font-family: "ysniziti";
  src: local('PingFang SC'),local('Hiragino Sans GB'),local('Microsoft YaHei'),url(https://cdn.jsdelivr.net/gh/cy-i/[email protected]/font/blockdole.woff2) format("woff2"),
  url(https://cdn.jsdelivr.net/gh/cy-i/[email protected]/font/blockdole.woff) format("woff"),
  url(https://cdn.jsdelivr.net/gh/cy-i/[email protected]/font/blockdole.eot) format("embedded-opentype");
  font-display: swap;
}
body {font-family: ysniziti!important;}

优化说明

font-display: swap;

swap告诉浏览器使用字体的文本应立即使用系统字体显示。自定义字体准备好后，它将替换系统字体。避免显示隐形文字。

预加载网页字

用于更早获取字体文件。要开启此优化，需在博客 head 中插入一下代码。比如：

<!-- load fonts -->
<link rel="preload" href="https://cdn.jsdelivr.net/gh/cy-i/[email protected]/font/blockdole.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://cdn.jsdelivr.net/gh/cy-i/[email protected]/font/blockdole.woff" as="font" type="font/woff2" crossorigin>

as = "font" type =" font / woff2" 属性告诉浏览器以字体形式下载此资源，并有助于确定资源队列的优先级。
crossorigin 属性指示是否应该使用CORS请求获取资源，因为字体可能来自不同的域。如果没有这个属性，预加载的字体将被浏览器忽略。

其他

font-weight 属性设置文本的粗细，一些字体只提供 normal 和 bold 两种值。normal正常粗细。与400等值。bold 加粗。 与700等值。
font-style 属性允许你选择 font-family 字体下的 italic 或 oblique 样式。normal选择 font-family 的常规字体。italic选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代。oblique选择倾斜体

以上代码的url链接为字体文件路径链接，可自行更改，“ysniziti”为字体名称，比如ziti.ttf,ziti.woff等等，在与字体文件名称相同的前提下可随意更改英文。放在style标签之内就可以了!