Example:字体调用：修订间差异
来自ANACHRONISM
更多操作
字体替换收尾：模板参数键名改为字体名（seldom→tesla、script→ballet、rogue→college、yahei→noto、milton→chrontor、narrow→cinzel），不保留旧键兼容；清除旧字体名与历史字样 |
字体目录调整同步：文件路径更新为新的分类目录（cjk/latin/display），中文改为 unicode-range 切片说明 |
||
| 第6行： | 第6行： | ||
! 字体 !! 工具类 !! 来源文件 !! 说明 | ! 字体 !! 工具类 !! 来源文件 !! 说明 | ||
|- | |- | ||
| 霞鹜文楷 Medium || 无（全站默认） || <code>/fonts/ | | 霞鹜文楷 Medium || 无（全站默认） || <code>/fonts/cjk/wenkai/regular/</code> || 全站默认字体，无需调用 | ||
|- | |- | ||
| TESLA || <code>font-tesla</code> || <code>/fonts/Tesla-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷 | | TESLA || <code>font-tesla</code> || <code>/fonts/display/Tesla-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷 | ||
|- | |- | ||
| Ballet || <code>font-ballet</code> || <code>/fonts/Ballet-Variable.woff2</code> || 西文字体，中文回落到霞鹜文楷 | | Ballet || <code>font-ballet</code> || <code>/fonts/display/Ballet-Variable.woff2</code> || 西文字体，中文回落到霞鹜文楷 | ||
|- | |- | ||
| College || <code>font-college</code> || <code>/fonts/College-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷 | | College || <code>font-college</code> || <code>/fonts/display/College-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷 | ||
|- | |- | ||
| 思源黑体 Noto Sans SC || <code>font-noto</code> || <code>/fonts/ | | 思源黑体 Noto Sans SC || <code>font-noto</code> || <code>/fonts/cjk/noto-sans-sc/</code> || 中文字体，含中文字形，可直接用于中文 | ||
|- | |- | ||
| Chrontor || <code>font-chrontor</code> || <code>/fonts/Chrontor-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷 | | Chrontor || <code>font-chrontor</code> || <code>/fonts/display/Chrontor-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷 | ||
|- | |- | ||
| Cinzel Decorative || <code>font-cinzel</code> || <code>/fonts/CinzelDecorative-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷 | | Cinzel Decorative || <code>font-cinzel</code> || <code>/fonts/display/CinzelDecorative-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷 | ||
|- | |- | ||
| JetBrains Mono Bold || <code>font-mono</code> || <code>/fonts/JetBrainsMono-Variable.woff2</code> || 等宽西文字体，中文回落到霞鹜文楷 | | JetBrains Mono Bold || <code>font-mono</code> || <code>/fonts/latin/JetBrainsMono-Variable.woff2</code> || 等宽西文字体，中文回落到霞鹜文楷 | ||
|- | |- | ||
| Rubik Medium || <code>font-rubik</code> || <code>/fonts/Rubik-Variable.woff2</code> || 西文字体，中文回落到霞鹜文楷 | | Rubik Medium || <code>font-rubik</code> || <code>/fonts/latin/Rubik-Variable.woff2</code> || 西文字体，中文回落到霞鹜文楷 | ||
|} | |} | ||
| 第155行： | 第155行： | ||
* 新增字体时，先在 <code>MediaWiki:Citizen.css</code> 里加 <code>@font-face</code>，再加变量和工具类。 | * 新增字体时，先在 <code>MediaWiki:Citizen.css</code> 里加 <code>@font-face</code>，再加变量和工具类。 | ||
* 调用时只需加类名，不要在行内写 <code>font-family</code>。 | * 调用时只需加类名，不要在行内写 <code>font-family</code>。 | ||
== 关于中文切片 == | |||
中文正文字体（霞鹜文楷、霞鹜臻楷、思源黑体）已改为按 '''unicode-range''' 切分为多片，浏览器只下载页面实际用到的那几片，因此上表中的中文条目是'''目录'''而非单个文件。 | |||
2026年10月6日 (二) 01:33的最新版本
本页展示 wiki 中已加载的自定义字体及其调用方式。字体通过 CSS 工具类调用，不依赖模板。
已加载字体
| 字体 | 工具类 | 来源文件 | 说明 |
|---|---|---|---|
| 霞鹜文楷 Medium | 无（全站默认） | /fonts/cjk/wenkai/regular/ |
全站默认字体，无需调用 |
| TESLA | font-tesla |
/fonts/display/Tesla-Regular.woff2 |
西文字体，中文回落到霞鹜文楷 |
| Ballet | font-ballet |
/fonts/display/Ballet-Variable.woff2 |
西文字体，中文回落到霞鹜文楷 |
| College | font-college |
/fonts/display/College-Regular.woff2 |
西文字体，中文回落到霞鹜文楷 |
| 思源黑体 Noto Sans SC | font-noto |
/fonts/cjk/noto-sans-sc/ |
中文字体，含中文字形，可直接用于中文 |
| Chrontor | font-chrontor |
/fonts/display/Chrontor-Regular.woff2 |
西文字体，中文回落到霞鹜文楷 |
| Cinzel Decorative | font-cinzel |
/fonts/display/CinzelDecorative-Regular.woff2 |
西文字体，中文回落到霞鹜文楷 |
| JetBrains Mono Bold | font-mono |
/fonts/latin/JetBrainsMono-Variable.woff2 |
等宽西文字体，中文回落到霞鹜文楷 |
| Rubik Medium | font-rubik |
/fonts/latin/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
Anachronism 万类天宥 000800
Anachronism 万类天宥 000800
Anachronism 万类天宥 000800
Anachronism 万类天宥 000800
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。
关于中文切片
中文正文字体（霞鹜文楷、霞鹜臻楷、思源黑体）已改为按 unicode-range 切分为多片，浏览器只下载页面实际用到的那几片，因此上表中的中文条目是目录而非单个文件。