Oooooo

切换字体切换字体

哈喽！所以你想做个字体切换功能，嗯？就像页面右上角那个？我来帮你搞定！
Hello! so you want to make a font toggle, huh? kinda like that one on the top right of the page? I gotchu!

这组件由 Abdallah Amr 开发，但主要基于CutTheBirch的旧版本，受JamiMyst的启发，我修改了一些东西，使其更具可定制性。
This component is developed by Abdallah Amr, but is heavily based on an older version made by CutTheBirch, and is inspired by another more developed version by JamiMyst, I just modified some stuff to make it more customizable.

只要把这个扔进你的页面，对变量排序，它就会帮你完成剩下的工作！
just throw this in your page, sort your variables, and it's gonna do the rest for ya!

[[include :backrooms-wiki-cn:component:font-toggle
|font-import=在这里导入谷歌字体
|font-family=这儿放字体名称
|font-size=字体大小倍数（可选）
|off-by-default=a （可选）
]]

什么？我没说每个变量的作用吗？好吧有道理，这儿，给你个表格自己看吧，随便了
What? I didn't say what each variable does? Yeah fair point, here, have a table with each one or whatever idk

参数	可选	描述
font-import		这是用于导入所需字体的@import规则，你可以通过谷歌字体等网站生成此代码。
font-family		字体系列名称。你可在获取 @import 语句的同一位置找到此名称。
font-size	✓	此数字表示字体渲染的缩放倍数。可以使用小数。
off-by-default	✓	将此设置为“a”以将开关默认设为关闭。

现在，任何带有 toggle-font 类的 div（如果你想要花哨一点，也可以是 span）都将受到影响！你可以像这样创建一个：
now any div (or span if you wanna be fancy) with the class toggle-font will be affected! you make one of those like this:

[[div class="toggle-font"]]
Put your contents that will switch font here
[[/div]]

the following is an example code you'd use in a Blanche page:

[[include :backrooms-wiki:component:font-toggle
|font-import=@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
|font-family=Italianno
|font-size=2
]]

哦，这里是所有的 CSS 颜色变量，如果你想出于某种原因调整（mess 怎么译）它们的话，变量名应该无需解释。
oh also here're all the CSS color variables if you want to mess with those for some reason, the names should be self-explanatory:

[[module css]]
a.font-toggle {
  --font-toggle-background-color: var(--light-gray-monochrome);
  --font-toggle-border-color: var(--black-monochrome);
  --font-toggle-text-color: var(--white-monochrome);
  --font-toggle-hover-background-color: var(--gray-monochrome);
  --font-toggle-hover-border-color: var(--light-gray-monochrome);
  --font-toggle-hover-text-color: var(--white-monochrome);
}
[[/module]]

Have fun!