该组件最初是为了改进依照蒙面女郎版式的字体切换组件，此处参照其做法利用 :target 选择器来实现此这一功能。以下为用法：
一、引用字体
首先你需要引用字体，不然默认是“钟齐志莽行书”。
二、导入组件
[!--源代码开始—-]
——
——
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
[!--—-]
[!--源代码结束—-]
——
—按键开始-]
[!--—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
[!--—-]
▼
—
—
—
——
[!--—按钮结束-]
始终将源代码置于页面顶部，或者要改变的文本的上方。
[[include :backrooms-wiki-cn:component:toggle-fonts|source=--]]]
++* 2.1 总体使用
在导入源代码后，设置具体的按钮组件：
[[include :backrooms-wiki-cn:component:toggle-fonts
|toggle=--] 必填，切换按钮
|id=0 必填，序列号
|btn-aaa=切换字体按钮初始显示
|btn-bbb=切换字体切换后的显示
|font-0=var(--body-font) 默认字体
|font-0-name=默认字体默认字体名称
|font-1='Zhi Mang Xing' 第一个字体，初始显示
|font-1-name=钟齐志莽行书 第一个字体的名称
|font-9='Noto Serif SC' 最多9个字体
|font-9-name=思源宋体
]]
ps：
- 按钮仅能在默认字体和预设字体间快速切换，右侧的 ▼ 则是下拉菜单，显示还有什么可选择的字体。
- 在字体后面可以加 !important 以增加字体切换的优先级。例如 |font-1='Zhi Mang Xing' !important
- 简易复制：
[[include :backrooms-wiki-cn:component:toggle-fonts|source=--]|toggle=--]
|font-1='Zhi Mang Xing'
|font-1-name=钟齐志莽行书
|id=0 ]]
++* 2.2 单独使用
[!--源代码开始—-]
——
——-
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
[!--—-]
[!--源代码结束—-]
——
—按键开始-]
[!--—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
[!--—-]
[!--按钮结束—-]
——
—
—
如果希望使用复数个切换按钮，但每个切换按钮效果都能共同切换时，则在前面的基础上，新设置个这个：
—
—
[[include :backrooms-wiki-cn:component:toggle-fonts |toggle=--] |id=0]] 注意 ID 的文本要与之前的相同
—
—
—
—
——
[!--—源代码开始-]
[!---
[!--—-]
——
[!--—源代码结束-]
[!--按键开始—-]
——
——
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
[!--—-]
[!--按钮结束—-]
——
—
—
如果希望使用复数个切换按钮，但每个按钮切换不同的文本时，则在一开始的基础上，另外设置：
—
—
[[include :backrooms-wiki-cn:component:toggle-fonts |single=--] |toggle=--]
|id=1注意 ID 要与之前不同
|font-0=inherit 新一轮的字体设置，步骤同前
|font-0-name=默认字体
|font-1='Dotted Songti Square'
|font-1-name=点点像素
]]
—
—
—
—
—
三、框住文本
—将要切换的文本用这个 div 块框住：
—
—
[[div class="fonts-toggle"]]
通常文本切换
[[/div]]
—
—
—
—
[[div class="fttg-【id】"]]
单独切换的文本
[[/div]]
—
—
ps：此处的【id】是上文组件所填的 id，方括号要去掉。
—