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

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

来自ANACHRONISM
Ancimen​(留言 | 贡献)
无编辑摘要
Ancimen​(留言 | 贡献)
无编辑摘要
第1行: 第1行:
[[MediaWiki:Common.css]]
本页展示 wiki 中已加载的自定义字体及其调用方式。字体通过 CSS 工具类调用,不依赖模板。
本页展示 wiki 中已加载的自定义字体及其调用方式。字体通过 CSS 工具类调用,不依赖模板。


第15行: 第13行:
|-
|-
| Roguedash Solid || <code>font-rogue</code> || <code>/fonts/Roguedash-Solid.woff2</code> || 西文字体,中文回落到霞鹜文楷
| Roguedash Solid || <code>font-rogue</code> || <code>/fonts/Roguedash-Solid.woff2</code> || 西文字体,中文回落到霞鹜文楷
|-
| 微软雅黑 Bold || <code>font-yahei</code> || <code>/fonts/MicYahei-Bold.woff2</code> || 中文字体,含中文字形,可直接用于中文
|}
|}


第25行: 第25行:
<span class="font-script">ScriptSERIF 效果</span>
<span class="font-script">ScriptSERIF 效果</span>
<span class="font-rogue">Roguedash 效果</span>
<span class="font-rogue">Roguedash 效果</span>
<span class="font-yahei">微软雅黑效果</span>
</pre>
</pre>


第32行: 第33行:
<span class="font-script">ScriptSERIF 效果</span>
<span class="font-script">ScriptSERIF 效果</span>
<span class="font-rogue">Roguedash 效果</span>
<span class="font-rogue">Roguedash 效果</span>
<span class="font-yahei">微软雅黑效果</span>


==== 默认字体对比 ====
==== 默认字体对比 ====
第47行: 第49行:
==== 中英混排 ====
==== 中英混排 ====


三款新字体均为西文字体,中文字符会自动回落到霞鹜文楷:
三款西文字体不含中文字形,中文字符会自动回落到霞鹜文楷;微软雅黑含中文字形,中英文都生效:


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


第56行: 第59行:


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


==== 在模板中调用 ====
==== 在模板中调用 ====
第66行: 第71行:
     |script=font-script
     |script=font-script
     |rogue=font-rogue
     |rogue=font-rogue
    |yahei=font-yahei
     |#default=
     |#default=
}}">{{{标题|}}}</div>
}}">{{{标题|}}}</div>
第74行: 第80行:
<pre>
<pre>
{{历史
{{历史
|标题=壅塞时代
|标题=万类天宥
|字体=rogue
|字体=yahei
}}
}}
</pre>
</pre>
第89行: 第95行:
|-
|-
| <code>font-rogue</code> || Roguedash Solid || 英文标题、装饰文字
| <code>font-rogue</code> || Roguedash Solid || 英文标题、装饰文字
|-
| <code>font-yahei</code> || 微软雅黑 Bold || 中文正文、需要更硬朗风格的标题
|}
|}


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


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

2026年9月30日 (三) 16:57的版本

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

已加载字体

字体 工具类 来源文件 说明
霞鹜文楷 Medium 无(全站默认) /fonts/LXGWWenKai-Medium.woff2 全站默认字体,无需调用
Seldom Scene font-seldom /fonts/SeldomScene.woff2 西文字体,中文回落到霞鹜文楷
ScriptSERIF font-script /fonts/ScriptSERIF-ripTRASH.woff2 西文字体,中文回落到霞鹜文楷
Roguedash Solid font-rogue /fonts/Roguedash-Solid.woff2 西文字体,中文回落到霞鹜文楷
微软雅黑 Bold font-yahei /fonts/MicYahei-Bold.woff2 中文字体,含中文字形,可直接用于中文

完整调用示例

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

<span class="font-seldom">Seldom Scene 效果</span>
<span class="font-script">ScriptSERIF 效果</span>
<span class="font-rogue">Roguedash 效果</span>
<span class="font-yahei">微软雅黑效果</span>

效果:

Seldom Scene 效果 ScriptSERIF 效果 Roguedash 效果 微软雅黑效果

默认字体对比

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

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

效果:

默认字体效果 Default 123

中英混排

三款西文字体不含中文字形,中文字符会自动回落到霞鹜文楷;微软雅黑含中文字形,中英文都生效:

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

效果:

Anachronism 万类天宥 000800

Anachronism 万类天宥 000800

在模板中调用

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

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

调用:

{{历史
|标题=万类天宥
|字体=yahei
}}

参数说明

工具类 对应字体 用途
font-seldom Seldom Scene 英文标题、装饰文字
font-script ScriptSERIF 英文标题、装饰文字
font-rogue Roguedash Solid 英文标题、装饰文字
font-yahei 微软雅黑 Bold 中文正文、需要更硬朗风格的标题

注意事项

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