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

[[MediaWiki:Common.css]]

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

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

{| class="wikitable"
! 字体 !! 工具类 !! 来源文件 !! 说明
|-
| 霞鹜文楷 Medium || 无（全站默认） || <code>/fonts/LXGWWenKai-Medium.woff2</code> || 全站默认字体，无需调用
|-
| Seldom Scene || <code>font-seldom</code> || <code>/fonts/SeldomScene.woff2</code> || 西文字体，中文回落到霞鹜文楷
|-
| ScriptSERIF || <code>font-script</code> || <code>/fonts/ScriptSERIF-ripTRASH.woff2</code> || 西文字体，中文回落到霞鹜文楷
|-
| Roguedash Solid || <code>font-rogue</code> || <code>/fonts/Roguedash-Solid.woff2</code> || 西文字体，中文回落到霞鹜文楷
|}

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

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

<pre>
<span class="font-seldom">Seldom Scene 效果</span>
<span class="font-script">ScriptSERIF 效果</span>
<span class="font-rogue">Roguedash 效果</span>
</pre>

效果：

<span class="font-seldom">Seldom Scene 效果</span>
<span class="font-script">ScriptSERIF 效果</span>
<span class="font-rogue">Roguedash 效果</span>

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

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

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

效果：

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

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

三款新字体均为西文字体，中文字符会自动回落到霞鹜文楷：

<pre>
<span class="font-rogue">Anachronism 万类天宥 000800</span>
</pre>

效果：

<span class="font-rogue">Anachronism 万类天宥 000800</span>

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

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

<pre>
&lt;div class="{{#switch:{{{字体|}}}
    |seldom=font-seldom
    |script=font-script
    |rogue=font-rogue
    |#default=
}}">{{{标题|}}}</div>
</pre>

调用：

<pre>
{{历史
|标题=壅塞时代
|字体=rogue
}}
</pre>

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

{| class="wikitable"
! 工具类 !! 对应字体 !! 用途
|-
| <code>font-seldom</code> || Seldom Scene || 英文标题、装饰文字
|-
| <code>font-script</code> || ScriptSERIF || 英文标题、装饰文字
|-
| <code>font-rogue</code> || Roguedash Solid || 英文标题、装饰文字
|}

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

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