排行榜 统计
  • 文章总数:90 篇
  • 评论总数:39 条
  • 分类总数:5 个
  • 最后更新:11月27日

如何自定义你的网站全局字体样式

本文阅读 1 分钟
首页 网站代码 正文

食用本博客同款字体:

@font-face {
  font-family: "nexzhu";
  src: local('PingFang SC'),local('Hiragino Sans GB'),local('Microsoft YaHei'),url(https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.woff2) format("woff2"),
  url(https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.woff) format("woff"),
  url(https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.eot) format("embedded-opentype");
  font-display: swap;
}
body {font-family: nexzhu!important;}

优化说明

font-display: swap;

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

预加载网页字

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

<!-- laod fonts -->
<link rel="preload" href="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.woff" as="font" type="font/woff2" crossorigin>
 

as = "font" type =" font / woff2" 属性告诉浏览器以字体形式下载此资源,并有助于确定资源队列的优先级。

crossorigin 属性指示是否应该使用CORS请求获取资源,因为字体可能来自不同的域。如果没有这个属性,预加载的字体将被浏览器忽略。

本文来自投稿,不代表本站立场,如若转载,请注明出处:https://bk.11awz.cn/wzzt.html
-- 展开阅读全文 --
分享几个免费申请SSL证书的网站
« 上一篇 04-23
SEO优化时如何选取关键词?
下一篇 » 04-23

发表评论

成为第一个评论的人

作者信息

动态快讯

换一换
    请配置好页面缩略名选项

热门文章

标签TAG

热评文章