查看“︁Example:字体调用”︁的源代码

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

==== 已加载字体 ====

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

==== 完整调用示例 ====

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

<pre>
<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>
</pre>

效果：

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

==== 默认字体对比 ====

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

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

效果：

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

==== 中英混排 ====

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

<pre>
<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>
</pre>

效果：

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

==== 在模板中调用 ====

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

<pre>
&lt;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>
</pre>

调用：

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

==== 参数说明 ====

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

==== 注意事项 ====

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