Toggle Fonts Template

该组件最初是为了改进依照蒙面女郎版式的字体切换组件，此处参照其做法利用 :target 选择器来实现此这一功能。以下为用法：

一、引用字体

首先你需要引用字体，不然默认是“钟齐志莽行书”。

在此参看字体引用指导，以及挑选可用字体。

二、导入组件

切换字体 切换字体
toggle fonts 切换字体

▼

• 默认字体 var(—body-font) 默认字体
• 思源宋体 'Noto Serif SC' !important 预设字体
• 点点像素 'Dotted Songti Square' !important
• 凤凰点阵体 'VonwaonBitmap 12px' !important
• 观致 8px 'GuanZhi 8px' !important
• 王汉宗魏碑 'HanWang WeiBeiMedium-Gb5' !important
• 润植家康熙字典美化体 nzgrKangxi !important
• 钟齐志莽行书 'Zhi Mang Xing' !important
• {$font-8-name} {$font-8}
• {$font-9-name} {$font-9}

始终将源代码置于页面顶部，或者要改变的文本的上方。

[[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：

1. 按钮仅能在默认字体和预设字体间快速切换，右侧的 ▼ 则是下拉菜单，显示还有什么可选择的字体。
2. 在字体后面可以加 !important 以增加字体切换的优先级。例如 |font-1='Zhi Mang Xing' !important
3. 简易复制：

[[include :backrooms-wiki-cn:component:toggle-fonts|source=--]|toggle=--]
|font-1='Zhi Mang Xing'
|font-1-name=钟齐志莽行书
|id=0 ]]

2.2 单独使用

{$btn-aaa} 切换字体
{$btn-bbb} 切换字体

▼

• {$font-0-name} {$font-0} 默认字体
• {$font-1-name} {$font-1} 预设字体
• {$font-2-name} {$font-2}
• {$font-3-name} {$font-3}
• {$font-4-name} {$font-4}
• {$font-5-name} {$font-5}
• {$font-6-name} {$font-6}
• {$font-7-name} {$font-7}
• {$font-8-name} {$font-8}
• {$font-9-name} {$font-9}

如果希望使用复数个切换按钮，但每个切换按钮效果都能共同切换时，则在前面的基础上，新设置个这个：

[[include :backrooms-wiki-cn:component:toggle-fonts |toggle=--] |id=0]] 注意 ID 的文本要与之前的相同

{$btn-aaa} 切换字体
{$btn-bbb} 切换字体

▼

• 默认字体 inherit 默认字体
• 点点像素 'Dotted Songti Square' 预设字体
• {$font-2-name} {$font-2}
• {$font-3-name} {$font-3}
• {$font-4-name} {$font-4}
• {$font-5-name} {$font-5}
• {$font-6-name} {$font-6}
• {$font-7-name} {$font-7}
• {$font-8-name} {$font-8}
• {$font-9-name} {$font-9}

如果希望使用复数个切换按钮，但每个按钮切换不同的文本时，则在一开始的基础上，另外设置：

[[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，方括号要去掉。

四、拓展用法

切换简体 切换字体
切换繁体 切换字体

▼

• 简体 'HanWang WeiBeiMedium-Gb5', kaiti 默认字体
• 繁体 nzgrKangxi, lisu 预设字体
• {$font-2-name} {$font-2}
• {$font-3-name} {$font-3}
• {$font-4-name} {$font-4}
• {$font-5-name} {$font-5}
• {$font-6-name} {$font-6}
• {$font-7-name} {$font-7}
• {$font-8-name} {$font-8}
• {$font-9-name} {$font-9}

有些字体具有强制将文本改成另一种形式，因而可以用更改字体的方式实现简繁切换。自然，这种切换并不精准和美观，但聊胜于无。

简体：
在这里输入要转换的内容
在这里输入要转换的内容
在这里输入要转换的内容
在这里输入要转换的内容

繁體：
在這裡輸入要轉換的內容
在這裡輸入要轉換的內容
在這裡輸入要轉換的內容
在這裡輸入要轉換的內容

[[include :etinjat:typeface-cn
|nzgrKangxi=true
|HanWang-WeiBeiMedium-Gb5=true
]]

[[include :backrooms-wiki-cn:component:toggle-fonts | toggle=--] |single= --]
|id=ts
|btn-aaa=切换简体
|btn-bbb=切换繁体
|font-0='HanWang WeiBeiMedium-Gb5', kaiti
|font-0-name=简体
|font-1=nzgrKangxi, lisu
|font-1-name=繁体
]]

[[div class="fttg-ts"]]
内容
[[/div]]