这几个月一直不定期的折腾站点字体，原因大家都懂的，男人朝三暮四、喜新厌旧……
因为没想过可以借助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