自定义你的网站字体

下载字体

下载自己喜欢的字体,字体格式为.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标签之内就可以了!

© 版权声明
THE END
如果喜欢,可以【点赞】【分享】【收藏】
点赞9赞赏 分享
评论 抢沙发
头像
非注册用户需审核通过后才能查看。友好交流,勿发纯表情,勿恶意灌水!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容