JS一键切换站点字体

这几个月一直不定期的折腾站点字体，原因大家都懂的，男人朝三暮四、喜新厌旧……

因为没想过可以借助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;
}

效果：

# 写于，改于。

WordPress CSS Javascript

共有 23 条评论

聲色犬馬
香港

AI 时代，我喜欢把这种小玩意代码交给 ChatGPT 來完成，然后偷懒。

FYI：window.onload 这种 Event bind 的灵活性是逊色于 Event listenner。
两年前 Firefox 117 · Mac OS X 10.15
回复
- S
  江苏
  *
  
  @聲色犬馬确实。
  两年前 Microsoft Edge 116 · Windows 10
  回复
Justin
广东

这个新的主题很好看，风格上感觉要比上一版更现代。
两年前 Google Chrome 116 · Mac OS X 10.15
回复
- S
  江苏
  *
  
  @Justin 嗯因为是新鲜出炉的
  两年前 Microsoft Edge 116 · Mac OS X 10.15
  回复
拾风
广东

哎哟～换主题了哦～靓
两年前 Safari 16 · Mac OS X 10.15
回复
- S
  江苏
  *
  
  @拾风哈哈！甚得我心。
  两年前 Microsoft Edge 116 · Mac OS X 10.15
  回复
Jeff
广东

我很久没换博客主题了，感觉痒痒的。
两年前 Microsoft Edge 116 · Mac OS X 10.15
回复
- S
  江苏
  *
  
  @Jeff 你那个挺好看的。不过想换就换，哈哈。
  两年前 Safari 16 · Mac OS X 10.15
  回复
Jeff
广东

发现一个疑似 bug，点击发表评论后，页面一直没有什么反馈也没有刷新页面。手动刷新后，我提交的评论才会显示。
两年前 Microsoft Edge 116 · Mac OS X 10.15
回复
- S
  江苏
  *
  
  @Jeff 查了，是User-agent插件的锅。已关闭。
  两年前 Safari 16 · Mac OS X 10.15
  回复
- S
  江苏
  *
  
  @Jeff 今天发现了真正原因，是插件作者某个js文件更新后，因种种神秘因素我上传时没有覆盖到位。现已改正。
  两年前 Microsoft Edge 116 · Windows 10
  回复

竹炉山房

JS一键切换站点字体

共有 23 条评论

发表评论取消回复

共有 23 条评论

发表评论 取消回复

发表评论取消回复