Example:字体调用：修订间差异

2026年10月5日 (一) 23:50的最新版本

本页展示 wiki 中已加载的自定义字体及其调用方式。字体通过 CSS 工具类调用，不依赖模板。

已加载字体

字体	工具类	来源文件	说明
霞鹜文楷 Medium	无（全站默认）	`/fonts/LXGWWenKai-Regular.woff2`	全站默认字体，无需调用
TESLA	`font-tesla`	`/fonts/Tesla-Regular.woff2`	西文字体，中文回落到霞鹜文楷
Ballet	`font-ballet`	`/fonts/Ballet-Variable.woff2`	西文字体，中文回落到霞鹜文楷
College	`font-college`	`/fonts/College-Regular.woff2`	西文字体，中文回落到霞鹜文楷
思源黑体 Noto Sans SC	`font-noto`	`/fonts/NotoSansSC-Variable.woff2`	中文字体，含中文字形，可直接用于中文
Chrontor	`font-chrontor`	`/fonts/Chrontor-Regular.woff2`	西文字体，中文回落到霞鹜文楷
Cinzel Decorative	`font-cinzel`	`/fonts/CinzelDecorative-Regular.woff2`	西文字体，中文回落到霞鹜文楷
JetBrains Mono Bold	`font-mono`	`/fonts/JetBrainsMono-Variable.woff2`	等宽西文字体，中文回落到霞鹜文楷
Rubik Medium	`font-rubik`	`/fonts/Rubik-Variable.woff2`	西文字体，中文回落到霞鹜文楷

完整调用示例

给任意元素加上对应的类名即可：

<span class="font-tesla">TESLA 效果</span>
<span class="font-ballet">Ballet 效果</span>
<span class="font-college">College 效果</span>
<span class="font-noto">思源黑体效果</span>
<span class="font-chrontor">Chrontor 效果</span>
<span class="font-cinzel">Cinzel 效果</span>
<span class="font-mono">JetBrains Mono 效果 0123</span>
<span class="font-rubik">Rubik 效果</span>

效果：

TESLA 效果

Ballet 效果

College 效果

思源黑体效果

Chrontor 效果

Cinzel 效果

JetBrains Mono 效果 0123

Rubik 效果

默认字体对比

不写任何类名时，使用的是全站默认字体：

<span>默认字体效果 Default 123</span>

效果：

默认字体效果 Default 123

中英混排

西文字体不含中文字形，中文字符会自动回落到霞鹜文楷；思源黑体含中文字形，中英文都生效：

<span class="font-college">Anachronism 万类天宥 000800</span>
<span class="font-noto">Anachronism 万类天宥 000800</span>
<span class="font-chrontor">Anachronism 万类天宥 000800</span>
<span class="font-cinzel">Anachronism 万类天宥 000800</span>
<span class="font-mono">Anachronism 万类天宥 000800</span>
<span class="font-rubik">Anachronism 万类天宥 000800</span>

效果：

Anachronism 万类天宥 000800

在模板中调用

内容展示类模板可以通过参数切换字体。例如：

<div class="{{#switch:{{{字体|}}}
    |tesla=font-tesla
    |ballet=font-ballet
    |college=font-college
    |noto=font-noto
    |chrontor=font-chrontor
    |cinzel=font-cinzel
    |mono=font-mono
    |rubik=font-rubik
    |#default=
}}">{{{标题|}}}</div>

调用：

{{模板名字
|标题=万类天宥
|字体=noto
}}

参数说明

工具类	对应字体	用途
`font-tesla`	TESLA	英文标题、装饰文字
`font-ballet`	Ballet	英文标题、装饰文字
`font-college`	College	英文标题、装饰文字
`font-noto`	思源黑体 Noto Sans SC	中文正文、需要更硬朗风格的标题
`font-chrontor`	Chrontor	英文标题、装饰文字
`font-cinzel`	Cinzel Decorative	英文标题、装饰文字
`font-mono`	JetBrains Mono Bold	代码、编号、等宽数字
`font-rubik`	Rubik Medium	英文标题、装饰文字

注意事项

西文字体均不含中文字形，中文字符会回落到霞鹜文楷。
思源黑体含中文字形，中英文都生效。
字体文件路径统一为 /fonts/，文件名区分大小写。
新增字体时，先在 MediaWiki:Citizen.css 里加 @font-face，再加变量和工具类。
调用时只需加类名，不要在行内写 font-family。

@@ 第6行： / 第6行： @@
 ! 字体 !! 工具类 !! 来源文件 !! 说明
 |-
-| 霞鹜文楷 Medium || 无（全站默认） || <code>/fonts/LXGWWenKai-Medium.woff2</code> || 全站默认字体，无需调用
+| 霞鹜文楷 Medium || 无（全站默认） || <code>/fonts/LXGWWenKai-Regular.woff2</code> || 全站默认字体，无需调用
 |-
-| Seldom Scene || <code>font-tesla</code> || <code>/fonts/SeldomScene.woff2</code> || 西文字体，中文回落到霞鹜文楷
+| TESLA || <code>font-tesla</code> || <code>/fonts/Tesla-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷
 |-
-| ScriptSERIF || <code>font-ballet</code> || <code>/fonts/ScriptSERIF-ripTRASH.woff2</code> || 西文字体，中文回落到霞鹜文楷
+| Ballet || <code>font-ballet</code> || <code>/fonts/Ballet-Variable.woff2</code> || 西文字体，中文回落到霞鹜文楷
 |-
-| Roguedash Solid || <code>font-college</code> || <code>/fonts/Roguedash-Solid.woff2</code> || 西文字体，中文回落到霞鹜文楷
+| College || <code>font-college</code> || <code>/fonts/College-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷
 |-
-| 微软雅黑 Bold || <code>font-noto</code> || <code>/fonts/MicYahei-Bold.woff2</code> || 中文字体，含中文字形，可直接用于中文
+| 思源黑体 Noto Sans SC || <code>font-noto</code> || <code>/fonts/NotoSansSC-Variable.woff2</code> || 中文字体，含中文字形，可直接用于中文
 |-
-| Anurati || <code>font-anurati</code> || <code>/fonts/Anurati-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷
+| Chrontor || <code>font-chrontor</code> || <code>/fonts/Chrontor-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷
 |-
-| Milton Grotesque || <code>font-chrontor</code> || <code>/fonts/MiltonGrotesque.woff2</code> || 西文字体，中文回落到霞鹜文楷
+| Cinzel Decorative || <code>font-cinzel</code> || <code>/fonts/CinzelDecorative-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷
 |-
-| Narrow Streets || <code>font-cinzel</code> || <code>/fonts/NARROWSTREETSRegular.woff2</code> || 西文字体，中文回落到霞鹜文楷
+| JetBrains Mono Bold || <code>font-mono</code> || <code>/fonts/JetBrainsMono-Variable.woff2</code> || 等宽西文字体，中文回落到霞鹜文楷
 |-
-| JetBrains Mono Bold || <code>font-mono</code> || <code>/fonts/JetBrainsMono-Bold.woff2</code> || 等宽西文字体，中文回落到霞鹜文楷
+| Rubik Medium || <code>font-rubik</code> || <code>/fonts/Rubik-Variable.woff2</code> || 西文字体，中文回落到霞鹜文楷
-|-
-| Rubik Medium || <code>font-rubik</code> || <code>/fonts/Rubik-Medium.woff2</code> || 西文字体，中文回落到霞鹜文楷
 |}
@@ 第32行： / 第30行： @@
 <pre>
-<span class="font-tesla">Seldom Scene 效果</span>
+<span class="font-tesla">TESLA 效果</span>
-<span class="font-ballet">ScriptSERIF 效果</span>
+<span class="font-ballet">Ballet 效果</span>
-<span class="font-college">Roguedash 效果</span>
+<span class="font-college">College 效果</span>
-<span class="font-noto">微软雅黑效果</span>
+<span class="font-noto">思源黑体效果</span>
-<span class="font-anurati">Anurati 效果</span>
+<span class="font-chrontor">Chrontor 效果</span>
-<span class="font-chrontor">Milton 效果</span>
+<span class="font-cinzel">Cinzel 效果</span>
-<span class="font-cinzel">Narrow 效果</span>
 <span class="font-mono">JetBrains Mono 效果 0123</span>
 <span class="font-rubik">Rubik 效果</span>
@@ 第45行： / 第42行： @@
 效果：
-<span class="font-tesla">Seldom Scene 效果</span>
+<span class="font-tesla">TESLA 效果</span>
-<span class="font-ballet">ScriptSERIF 效果</span>
+<span class="font-ballet">Ballet 效果</span>
-<span class="font-college">Roguedash 效果</span>
+<span class="font-college">College 效果</span>
-<span class="font-noto">微软雅黑效果</span>
+<span class="font-noto">思源黑体效果</span>
-<span class="font-anurati">Anurati 效果</span>
-<span class="font-chrontor">Milton 效果</span>
+<span class="font-chrontor">Chrontor 效果</span>
-<span class="font-cinzel">Narrow 效果</span>
+<span class="font-cinzel">Cinzel 效果</span>
 <span class="font-mono">JetBrains Mono 效果 0123</span>
@@ 第77行： / 第73行： @@
 ==== 中英混排 ====
-西文字体不含中文字形，中文字符会自动回落到霞鹜文楷；微软雅黑含中文字形，中英文都生效：
+西文字体不含中文字形，中文字符会自动回落到霞鹜文楷；思源黑体含中文字形，中英文都生效：
 <pre>
 <span class="font-college">Anachronism 万类天宥 000800</span>
 <span class="font-noto">Anachronism 万类天宥 000800</span>
-<span class="font-anurati">Anachronism 万类天宥 000800</span>
 <span class="font-chrontor">Anachronism 万类天宥 000800</span>
 <span class="font-cinzel">Anachronism 万类天宥 000800</span>
@@ 第95行： / 第90行： @@
 <span class="font-noto">Anachronism 万类天宥 000800</span>
-<span class="font-anurati">Anachronism 万类天宥 000800</span>
 <span class="font-chrontor">Anachronism 万类天宥 000800</span>
@@ 第111行： / 第105行： @@
 <pre>
 &lt;div class="{{#switch:{{{字体|}}}
-     |seldom=font-tesla
+     |tesla=font-tesla
-     |script=font-ballet
+     |ballet=font-ballet
-     |rogue=font-college
+     |college=font-college
-     |yahei=font-noto
+     |noto=font-noto
-     |anurati=font-anurati
+     |chrontor=font-chrontor
-    |milton=font-chrontor
+     |cinzel=font-cinzel
-     |narrow=font-cinzel
      |mono=font-mono
      |rubik=font-rubik
@@ 第129行： / 第122行： @@
 {{模板名字
 |标题=万类天宥
-|字体=yahei
+|字体=noto
 }}
 </pre>
@@ 第138行： / 第131行： @@
 ! 工具类 !! 对应字体 !! 用途
 |-
-| <code>font-tesla</code> || Seldom Scene || 英文标题、装饰文字
+| <code>font-tesla</code> || TESLA || 英文标题、装饰文字
-|-
-| <code>font-ballet</code> || ScriptSERIF || 英文标题、装饰文字
 |-
-| <code>font-college</code> || Roguedash Solid || 英文标题、装饰文字
+| <code>font-ballet</code> || Ballet || 英文标题、装饰文字
 |-
-| <code>font-noto</code> || 微软雅黑 Bold || 中文正文、需要更硬朗风格的标题
+| <code>font-college</code> || College || 英文标题、装饰文字
 |-
-| <code>font-anurati</code> || Anurati || 英文标题、装饰文字
+| <code>font-noto</code> || 思源黑体 Noto Sans SC || 中文正文、需要更硬朗风格的标题
 |-
-| <code>font-chrontor</code> || Milton Grotesque || 英文标题、装饰文字
+| <code>font-chrontor</code> || Chrontor || 英文标题、装饰文字
 |-
-| <code>font-cinzel</code> || Narrow Streets || 英文标题、装饰文字
+| <code>font-cinzel</code> || Cinzel Decorative || 英文标题、装饰文字
 |-
 | <code>font-mono</code> || JetBrains Mono Bold || 代码、编号、等宽数字
@@ 第160行： / 第151行： @@
 * 西文字体均不含中文字形，中文字符会回落到霞鹜文楷。
-* 微软雅黑含中文字形，中英文都生效。
+* 思源黑体含中文字形，中英文都生效。
 * 字体文件路径统一为 <code>/fonts/</code>，文件名区分大小写。
 * 新增字体时，先在 <code>MediaWiki:Citizen.css</code> 里加 <code>@font-face</code>，再加变量和工具类。
 * 调用时只需加类名，不要在行内写 <code>font-family</code>。