Example:字体调用
来自ANACHRONISM
更多操作
本页展示 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 |
西文字体,中文回落到霞鹜文楷 |
完整调用示例
给任意元素加上对应的类名即可:
<span class="font-seldom">Seldom Scene 效果</span> <span class="font-script">ScriptSERIF 效果</span> <span class="font-rogue">Roguedash 效果</span>
效果:
Seldom Scene 效果 ScriptSERIF 效果 Roguedash 效果
默认字体对比
不写任何类名时,使用的是全站默认字体:
<span>默认字体效果 Default 123</span>
效果:
默认字体效果 Default 123
中英混排
三款新字体均为西文字体,中文字符会自动回落到霞鹜文楷:
<span class="font-rogue">Anachronism 壅塞时代 411</span>
效果:
Anachronism 壅塞时代 411
在模板中调用
内容展示类模板可以通过参数切换字体。例如:
<div class="{{#switch:{{{字体|}}}
|seldom=font-seldom
|script=font-script
|rogue=font-rogue
|#default=
}}">{{{标题|}}}</div>
调用:
{{历史
|标题=壅塞时代
|字体=rogue
}}
参数说明
| 工具类 | 对应字体 | 用途 |
|---|---|---|
font-seldom |
Seldom Scene | 英文标题、装饰文字 |
font-script |
ScriptSERIF | 英文标题、装饰文字 |
font-rogue |
Roguedash Solid | 英文标题、装饰文字 |
注意事项
- 三款新字体均不含中文字形,中文字符会回落到霞鹜文楷。
- 字体文件路径统一为
/fonts/,文件名区分大小写。 - 新增字体时,先在
MediaWiki:Common.css里加@font-face,再加变量和工具类。 - 调用时只需加类名,不要在行内写
font-family。