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

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

效果:

共有 23 条评论

  1. yuxiyuqi

    上海

    有点意思,建议有需要的朋友抄起来

    七个月前 Google Chrome 116 · Mac OS X 10.15

    回复

    • S

      江苏

      @yuxiyuqi 必须抄起来哈哈

      七个月前 Microsoft Edge 116 · Mac OS X 10.15

      回复

  2. 不亦乐乎

    福建

    这新主题一出来你就立马换上了啊。
    主题上没见你有加这个功能啊。

    七个月前 Google Chrome 116 · Windows 10

    回复

    • S

      江苏

      @不亦乐乎 还没来得及加,昨晚光忙着改大发的模板了。

      七个月前 Microsoft Edge 116 · Windows 10

      回复

  3. 青山

    江西

    新主题很舒服。

    七个月前 Microsoft Edge 115 · Android 10

    回复

    • S

      江苏

      @青山 我也很喜欢。

      七个月前 Microsoft Edge 116 · Windows 10

      回复

  4. 三棵树人

    四川

    这个主题很简洁清爽,有点像2012年QQ音乐的主界面。

    七个月前 Google Chrome 114 · Windows 10

    回复

    • S

      江苏

      @三棵树人 是有点像QQ音乐

      七个月前 Microsoft Edge 116 · Windows 10

      回复

      • 三棵树人

        四川

        @S 看到就舒服,就想多来转转。

        七个月前 Google Chrome 114 · Windows 10

        回复

        • S

          江苏

          @三棵树人 哈哈,这么赞的吗?其实网站还有一些瑕疵,刚出差回来,等我慢慢修订。

          七个月前 Microsoft Edge 116 · Windows 10

          回复

  5. 网友小宋

    中国

    我说怎么不是全白了。

    七个月前 Microsoft Edge 115 · Android 10

    回复

    • S

      江苏

      @网友小宋 被大发新主题吸引了。

      七个月前 Microsoft Edge 116 · Windows 10

      回复

  6. 聲色犬馬

    香港

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

    FYI:window.onload 这种 Event bind 的灵活性是逊色于 Event listenner。

    七个月前 Firefox 117 · Mac OS X 10.15

    回复

  7. Justin

    广东

    这个新的主题很好看,风格上感觉要比上一版更现代。

    七个月前 Google Chrome 116 · Mac OS X 10.15

    回复

    • S

      江苏

      @Justin 嗯因为是新鲜出炉的

      七个月前 Microsoft Edge 116 · Mac OS X 10.15

      回复

  8. 拾风

    广东

    哎哟~换主题了哦~靓

    七个月前 Safari 16 · Mac OS X 10.15

    回复

    • S

      江苏

      @拾风 哈哈!甚得我心。

      七个月前 Microsoft Edge 116 · Mac OS X 10.15

      回复

  9. Jeff

    广东

    我很久没换博客主题了,感觉痒痒的。

    七个月前 Microsoft Edge 116 · Mac OS X 10.15

    回复

    • S

      江苏

      @Jeff 你那个挺好看的。不过想换就换,哈哈。

      七个月前 Safari 16 · Mac OS X 10.15

      回复

  10. 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

      回复

       

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注