字体切换组件 样板

注意:

此页为于后室维基内部所使用的组件页面。

该组件最初是为了改进依照蒙面女郎版式的字体切换组件,此处参照其做法利用 :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:
  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 单独使用

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

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

四、拓展用法

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

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

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

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

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License