这几个月一直不定期的折腾站点字体，原因大家都懂的，男人朝三暮四、喜新厌旧……
因为没想过可以借助JS来切换，之前是通过直接改CSS或者干脆做子主题的方式实现切换。
然后今天有位自己送上门的网友Jdeal，回访时发现他博客使用了个小技巧。
立刻抄起来，结合本站情况只用了半小时搞好了。舒适。
记一下方法：
1、增加altfont.js并在function函数中引用：
//Alter font family
functionWenkaiMode(){
if(localStorage.WenkaiMode=="true"){
localStorage.WenkaiMode="false";
document.body.classList.remove("WenkaiMode");
}
else{
localStorage.WenkaiMode="true";
document.body.classList.add("WenkaiMode");
}
}
window.onload=function(){
if(localStorage.WenkaiMode=="true"){
document.body.classList.add("WenkaiMode");
}
}2、用PS制作或当一个现成的SVG图片作为按钮。然后制作SVG Markup，推荐用Git站svgomg转化。我这里偷懒用了<svg><text>T</text></svg>文字形式。
3、放置按钮。
<a href="javascript:;" class="wenkaimode tooltip" onclick="WenkaiMode()" data-msg="换个字体">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"><text xml:space="preserve" x="2" y="13.344" fill-opacity=".54" stroke="#000" stroke-width="0" font-family="Times New Roman" font-size="20">T</text></svg>
</a>4、CSS中加入想切换的字体。
a.wenkaimode {
margin-left: 10px;
color: var(--dark-background);
}
a.wenkaimode:hover {
cursor: hand;
}
.WenkaiMode {
font-family: LXGW WenKai Screen;
}5、第3条代码中的tooltip是原作者自己制作的CSS提醒框，我一开始没找到源码，被迫去其站点扒CSS后一条条清洁，后来才发现他单独写了一篇……🤦♂️ 标题确实不抓眼球，谴责这种“反标题党”行为。
.tooltip {
position: relative;
}
.tooltip:hover::before{
white-space:nowrap;
line-height:18px;
content:attr(data-msg);
position:absolute;
padding:0px 8px;
display:block;
color:#ffffff;
background:#656565;
border-radius:3px;
font-size:12px;
top:-25px;
left:50%;
transform:translateX(-50%);
}
.tooltip:hover::after{
content:"";
position:absolute;
top:-8px;
left:50%;
transform:translateX(-50%);
border:6px solid transparent;
border-top:6px solid #656565;
}效果：
yuxiyuqi 上海
有点意思，建议有需要的朋友抄起来
八个月前 Google Chrome 116 · Mac OS X 10.15S 江苏 *
@yuxiyuqi 必须抄起来哈哈
八个月前 Microsoft Edge 116 · Mac OS X 10.15不亦乐乎 福建
这新主题一出来你就立马换上了啊。
八个月前 Google Chrome 116 · Windows 10主题上没见你有加这个功能啊。
S 江苏 *
@不亦乐乎 还没来得及加，昨晚光忙着改大发的模板了。
八个月前 Microsoft Edge 116 · Windows 10青山 江西
新主题很舒服。
八个月前 Microsoft Edge 115 · Android 10S 江苏 *
@青山 我也很喜欢。
八个月前 Microsoft Edge 116 · Windows 10三棵树人 四川
这个主题很简洁清爽，有点像2012年QQ音乐的主界面。
八个月前 Google Chrome 114 · Windows 10S 江苏 *
@三棵树人 是有点像QQ音乐
八个月前 Microsoft Edge 116 · Windows 10三棵树人 四川
@S 看到就舒服，就想多来转转。
八个月前 Google Chrome 114 · Windows 10S 江苏 *
@三棵树人 哈哈，这么赞的吗？其实网站还有一些瑕疵，刚出差回来，等我慢慢修订。
八个月前 Microsoft Edge 116 · Windows 10网友小宋 中国
我说怎么不是全白了。
八个月前 Microsoft Edge 115 · Android 10S 江苏 *
@网友小宋 被大发新主题吸引了。
八个月前 Microsoft Edge 116 · Windows 10聲色犬馬 香港
AI 时代，我喜欢把这种小玩意代码交给 ChatGPT 來完成，然后偷懒。
FYI：window.onload 这种 Event bind 的灵活性是逊色于 Event listenner。
八个月前 Firefox 117 · Mac OS X 10.15S 江苏 *
@聲色犬馬 确实。
八个月前 Microsoft Edge 116 · Windows 10Justin 广东
这个新的主题很好看，风格上感觉要比上一版更现代。
八个月前 Google Chrome 116 · Mac OS X 10.15S 江苏 *
@Justin 嗯因为是新鲜出炉的
八个月前 Microsoft Edge 116 · Mac OS X 10.15拾风 广东
哎哟～换主题了哦～靓
八个月前 Safari 16 · Mac OS X 10.15S 江苏 *
@拾风 哈哈！甚得我心。
八个月前 Microsoft Edge 116 · Mac OS X 10.15Jeff 广东
我很久没换博客主题了，感觉痒痒的。
七个月前 Microsoft Edge 116 · Mac OS X 10.15S 江苏 *
@Jeff 你那个挺好看的。不过想换就换，哈哈。
七个月前 Safari 16 · Mac OS X 10.15Jeff 广东
发现一个疑似 bug，点击发表评论后，页面一直没有什么反馈也没有刷新页面。手动刷新后，我提交的评论才会显示。
七个月前 Microsoft Edge 116 · Mac OS X 10.15S 江苏 *
@Jeff 查了，是User-agent插件的锅。已关闭。
七个月前 Safari 16 · Mac OS X 10.15S 江苏 *
@Jeff 今天发现了真正原因，是插件作者某个js文件更新后，因种种神秘因素我上传时没有覆盖到位。现已改正。
七个月前 Microsoft Edge 116 · Windows 10