- 本文用于介绍萌娘百科中一些特定功能的操作方法；
- 本文仅是一篇论述，不属于方针或指引。如果本指南与相关方针或指引发生冲突或存在不一致的情况，请以方针或指引的条文为准。
这篇帮助讲述了如何指定字体。不应滥用皮肤默认字体以外的字体，因为它们会打破一致性，一个例子是强迫症#简介。
指定字体
在CSS中，通过font-family[1]指定一段文字的字体。
font-family指定一个优先级从高到低的可选字体列表，每个值是字体族名或通用字体族名之一，用逗号隔开。浏览器从列表中选择最靠前的可用字体显示。包含空格的字体族名通常用引号包围，双引号或单引号皆可，但需成对。在内联样式（{{Font}}也是）中，为了避免和style="……"的引号冲突，使用单引号。
示例：
#example {
/* 字体列表 */
font-family: "Source Han Serif VF", "Source Han Serif", serif;
/* 仅有通用字体族名 */
font-family: serif;
font-family: sans-serif;
font-family: monospace, monospace; /* monospace若只写一遍在某些浏览器上字号会变小 */
}
{{Font}}模板使用了font-family，可以快速指定字体，如{{Font|font='Times New Roman',Times,serif|Test}}：Test。
CSS属性font[2]是包括font-family在内的多个属性的简写，如果不设置其中某个属性，它们会变为初始值，可能影响排版。因此缺乏判断时不建议使用此属性。
通用字体族名
通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体。这些是关键字，外面不能加引号。为了兼容性，在列表中应该至少有一个通用字体族名。
serif- 衬线体。对于中文是宋体。
- 中文示例 / English Sample
sans-serif- 无衬线体。对于中文是黑体。
- 中文示例 / English Sample
monospace[3]- 等宽字体
- 中文示例 / English Sample
cursive- 草书字体/手写字体。对于中文，常作为楷体的后备字体，但一些浏览器不将其显示为楷体。
- 中文示例 / English Sample
fangsong- 仿宋。
- 中文示例 / English Sample
fantasy- Fantasy字体主要是那些具有特殊艺术效果的字体。
- 中文示例 / English Sample
另有system-ui、math、emoji，不赘述，详见font-family的文档[1]。
Web安全字体
这些字体组合具有较好的兼容性，推荐使用或作为备选列表的一部分。[4]
| 字体 | 示例 |
|---|---|
| 衬线体 | |
| Georgia, serif | Example |
| 'Palatino Linotype', 'Book Antiqua', Palatino, serif | Example |
| 'Times New Roman', Times, serif | Example |
| 无衬线体 | |
| Arial, Helvetica, sans-serif | Example |
| 'Arial Black', Gadget, sans-serif | Example |
| 'Comic Sans MS', cursive, sans-serif | Example |
| Impact, Charcoal, sans-serif | Example |
| 'Lucida Sans Unicode', 'Lucida Grande', sans-serif | Example |
| Tahoma, Geneva, sans-serif | Example |
| 'Trebuchet MS', Helvetica, sans-serif | Example |
| Verdana, Geneva, sans-serif | Example |
| 等宽字体 | |
| 'Courier New', Courier, monospace | Example |
| 'Lucida Console', Monaco, monospace | Example |
嵌入字体
在网页嵌入字体需要使用@font-face[5]。模板样式表不支持@font-face规则，需要用到使用小部件（Widget）。
不建议随意嵌入字体，会加大服务器开销并且增加版权风险。这里建议嵌入的字体满足以下两点：
- 许可证允许其被嵌入萌娘百科网页；
- 该字体无法被各设备上的字体取代。
第一步：上传字体并创建Widget
首先将字体上传到传入共享站，目前只支持ttf格式的字体，加入分类:字体。
在对应Widget的讨论页申请创建Widget。
常用的格式为：
<style>
@font-face {
font-family: "Example Font";
src: url("https://img.moegirl.org.cn/common/…") format("truetype");
unicode-range: U+XXXX-U+YYYY;
}
</style>
font-family：指定字体名，用于font或font-family。src[6]：文件路径。- 可在
url()后面跟一个format()，浏览器不支持此格式的字体时，不会下载字体，有助于节约流量。由于共享站只能上传TTF格式的字体，所以这里填truetype。 - 可以指定一个fallback列表，某个资源不可用时按照次序尝试调用下一个，详见
src的文档。
- 可在
unicode-range[7]（可选）: Unicode范围，当网页不含在此范围的字符时，不会下载字体，有助于节约流量。- 其他参数见
@font-face的文档[5]。
第二步：在模板中调用
导入字体后，即可通过font-family调用该字体。在模板中通过{{#Widget:}}调用创建好的Widget，再添加一些别的需要的功能。之后在条目中使用该模板即可。
| |||||||||||||||||||||||||||||||||||
参见
- ↑ 1.0 1.1 font-family - CSS（层叠样式表） | MDN
- ↑ font - CSS（层叠样式表） | MDN
- ↑ 部分浏览器在指定页面
lang属性时monospace由于不合理的fallback序列可能不是等宽字体。 - ↑ CSS Web安全字体 | 菜鸟教程
- ↑ 5.0 5.1 @font-face - CSS（层叠样式表） | MDN
- ↑ src - CSS（层叠样式表） | MDN
- ↑ unicode-range - CSS: Cascading Style Sheets | MDN