跳转到内容
打开/关闭搜索
打开/关闭菜单
  • 1 条目
  • 2 文件
  • 8 用户
  • 639 编辑
ANACHRONISM
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

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

来自ANACHRONISM
更多操作
←上一编辑
可视化wikitext
Ancimen​（留言 | 贡献）
行政员、​织界者、​策展人
635次编辑
无编辑摘要
Ancimen​（留言 | 贡献）
行政员、​织界者、​策展人
635次编辑
字体目录调整同步：文件路径更新为新的分类目录（cjk/latin/display），中文改为 unicode-range 切片说明
 
（未显示同一用户的3个中间版本）
第6行： 第6行：
! 字体 !! 工具类 !! 来源文件 !! 说明
! 字体 !! 工具类 !! 来源文件 !! 说明
|-
|-
| 霞鹜文楷 Medium || 无（全站默认） || <code>/fonts/LXGWWenKai-Medium.woff2</code> || 全站默认字体，无需调用
| 霞鹜文楷 Medium || 无（全站默认） || <code>/fonts/cjk/wenkai/regular/</code> || 全站默认字体，无需调用
|-
|-
| Seldom Scene || <code>font-seldom</code> || <code>/fonts/SeldomScene.woff2</code> || 西文字体，中文回落到霞鹜文楷
| TESLA || <code>font-tesla</code> || <code>/fonts/display/Tesla-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷
|-
|-
| ScriptSERIF || <code>font-script</code> || <code>/fonts/ScriptSERIF-ripTRASH.woff2</code> || 西文字体，中文回落到霞鹜文楷
| Ballet || <code>font-ballet</code> || <code>/fonts/display/Ballet-Variable.woff2</code> || 西文字体，中文回落到霞鹜文楷
|-
|-
| Roguedash Solid || <code>font-rogue</code> || <code>/fonts/Roguedash-Solid.woff2</code> || 西文字体，中文回落到霞鹜文楷
| College || <code>font-college</code> || <code>/fonts/display/College-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷
|-
|-
| 微软雅黑 Bold || <code>font-yahei</code> || <code>/fonts/MicYahei-Bold.woff2</code> || 中文字体，含中文字形，可直接用于中文
| 思源黑体 Noto Sans SC || <code>font-noto</code> || <code>/fonts/cjk/noto-sans-sc/</code> || 中文字体，含中文字形，可直接用于中文
|-
|-
| Anurati || <code>font-anurati</code> || <code>/fonts/Anurati-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷
| Chrontor || <code>font-chrontor</code> || <code>/fonts/display/Chrontor-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷
|-
|-
| Milton Grotesque || <code>font-milton</code> || <code>/fonts/MiltonGrotesque.woff2</code> || 西文字体，中文回落到霞鹜文楷
| Cinzel Decorative || <code>font-cinzel</code> || <code>/fonts/display/CinzelDecorative-Regular.woff2</code> || 西文字体，中文回落到霞鹜文楷
|-
|-
| Narrow Streets || <code>font-narrow</code> || <code>/fonts/NARROWSTREETSRegular.woff2</code> || 西文字体，中文回落到霞鹜文楷
| JetBrains Mono Bold || <code>font-mono</code> || <code>/fonts/latin/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/latin/Rubik-Variable.woff2</code> || 西文字体，中文回落到霞鹜文楷
|-
| Rubik Medium || <code>font-rubik</code> || <code>/fonts/Rubik-Medium.woff2</code> || 西文字体，中文回落到霞鹜文楷
|}
|}


第32行： 第30行：


<pre>
<pre>
<span class="font-seldom">Seldom Scene 效果</span>
<span class="font-tesla">TESLA 效果</span>
<span class="font-script">ScriptSERIF 效果</span>
<span class="font-ballet">Ballet 效果</span>
<span class="font-rogue">Roguedash 效果</span>
<span class="font-college">College 效果</span>
<span class="font-yahei">微软雅黑效果</span>
<span class="font-noto">思源黑体效果</span>
<span class="font-anurati">Anurati 效果</span>
<span class="font-chrontor">Chrontor 效果</span>
<span class="font-milton">Milton 效果</span>
<span class="font-cinzel">Cinzel 效果</span>
<span class="font-narrow">Narrow 效果</span>
<span class="font-mono">JetBrains Mono 效果 0123</span>
<span class="font-mono">JetBrains Mono 效果 0123</span>
<span class="font-rubik">Rubik 效果</span>
<span class="font-rubik">Rubik 效果</span>
第45行： 第42行：
效果：
效果：


<span class="font-seldom">Seldom Scene 效果</span>
<span class="font-tesla">TESLA 效果</span>


<span class="font-script">ScriptSERIF 效果</span>
<span class="font-ballet">Ballet 效果</span>


<span class="font-rogue">Roguedash 效果</span>
<span class="font-college">College 效果</span>


<span class="font-yahei">微软雅黑效果</span>
<span class="font-noto">思源黑体效果</span>


<span class="font-anurati">Anurati 效果</span>


<span class="font-milton">Milton 效果</span>
<span class="font-chrontor">Chrontor 效果</span>


<span class="font-narrow">Narrow 效果</span>
<span class="font-cinzel">Cinzel 效果</span>


<span class="font-mono">JetBrains Mono 效果 0123</span>
<span class="font-mono">JetBrains Mono 效果 0123</span>
第77行： 第73行：
==== 中英混排 ====
==== 中英混排 ====


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


<pre>
<pre>
<span class="font-rogue">Anachronism 万类天宥 000800</span>
<span class="font-college">Anachronism 万类天宥 000800</span>
<span class="font-yahei">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-milton">Anachronism 万类天宥 000800</span>
<span class="font-cinzel">Anachronism 万类天宥 000800</span>
<span class="font-narrow">Anachronism 万类天宥 000800</span>
<span class="font-mono">Anachronism 万类天宥 000800</span>
<span class="font-mono">Anachronism 万类天宥 000800</span>
<span class="font-rubik">Anachronism 万类天宥 000800</span>
<span class="font-rubik">Anachronism 万类天宥 000800</span>
第91行： 第86行：
效果：
效果：


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


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


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


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


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


<span class="font-mono">Anachronism 万类天宥 000800</span>
<span class="font-mono">Anachronism 万类天宥 000800</span>
第111行： 第105行：
<pre>
<pre>
&lt;div class="{{#switch:{{{字体|}}}
&lt;div class="{{#switch:{{{字体|}}}
     |seldom=font-seldom
     |tesla=font-tesla
     |script=font-script
     |ballet=font-ballet
     |rogue=font-rogue
     |college=font-college
     |yahei=font-yahei
     |noto=font-noto
     |anurati=font-anurati
     |chrontor=font-chrontor
     |milton=font-milton
     |cinzel=font-cinzel
    |narrow=font-narrow
     |mono=font-mono
     |mono=font-mono
     |rubik=font-rubik
     |rubik=font-rubik
第129行： 第122行：
{{模板名字
{{模板名字
|标题=万类天宥
|标题=万类天宥
|字体=yahei
|字体=noto
}}
}}
</pre>
</pre>
第138行： 第131行：
! 工具类 !! 对应字体 !! 用途
! 工具类 !! 对应字体 !! 用途
|-
|-
| <code>font-seldom</code> || Seldom Scene || 英文标题、装饰文字
| <code>font-tesla</code> || TESLA || 英文标题、装饰文字
|-
| <code>font-script</code> || ScriptSERIF || 英文标题、装饰文字
|-
|-
| <code>font-rogue</code> || Roguedash Solid || 英文标题、装饰文字
| <code>font-ballet</code> || Ballet || 英文标题、装饰文字
|-
|-
| <code>font-yahei</code> || 微软雅黑 Bold || 中文正文、需要更硬朗风格的标题
| <code>font-college</code> || College || 英文标题、装饰文字
|-
|-
| <code>font-anurati</code> || Anurati || 英文标题、装饰文字
| <code>font-noto</code> || 思源黑体 Noto Sans SC || 中文正文、需要更硬朗风格的标题
|-
|-
| <code>font-milton</code> || Milton Grotesque || 英文标题、装饰文字
| <code>font-chrontor</code> || Chrontor || 英文标题、装饰文字
|-
|-
| <code>font-narrow</code> || Narrow Streets || 英文标题、装饰文字
| <code>font-cinzel</code> || Cinzel Decorative || 英文标题、装饰文字
|-
|-
| <code>font-mono</code> || JetBrains Mono Bold || 代码、编号、等宽数字
| <code>font-mono</code> || JetBrains Mono Bold || 代码、编号、等宽数字
第160行： 第151行：


* 西文字体均不含中文字形，中文字符会回落到霞鹜文楷。
* 西文字体均不含中文字形，中文字符会回落到霞鹜文楷。
* 微软雅黑含中文字形，中英文都生效。
* 思源黑体含中文字形，中英文都生效。
* 字体文件路径统一为 <code>/fonts/</code>，文件名区分大小写。
* 字体文件路径统一为 <code>/fonts/</code>，文件名区分大小写。
* 新增字体时，先在 <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 切分为多片，浏览器只下载页面实际用到的那几片，因此上表中的中文条目是目录而非单个文件。

检索自“https://anachronism.top/index.php?title=Example:字体调用&oldid=637”
最后修改时间
此页面最后编辑于2026年10月6日 (星期二) 01:33。