帮助:字体

这个页面“Help:字体”是萌娘百科的帮助文档

• 本文用于介绍萌娘百科中一些特定功能的操作方法；
• 本文仅是一篇论述，不属于方针或指引。如果本指南与相关方针或指引发生冲突或存在不一致的情况，请以方针或指引的条文为准。

这篇帮助讲述了如何指定字体。不应滥用皮肤默认字体以外的字体，因为它们会打破一致性，一个例子是强迫症#简介。

指定字体

在CSS中，通过font-family指定一段文字的字体。

font-family指定一个优先级从高到低的可选字体列表，每个值是字体族名或通用字体族名之一，用逗号隔开。浏览器从列表中选择最靠前的可用字体显示。包含空格的字体族名通常用引号包围，双引号或单引号皆可，但需成对。在内联样式（{{Font}}也是）中，为了避免和style="……"的引号冲突，使用单引号。

示例：

/* 字体列表 */
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是包括font-family在内的多个属性的简写，如果不设置其中某个属性，它们会变为初始值，可能影响排版。因此缺乏判断时不建议使用此属性。

通用字体族名

通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体。这些是关键字，外面不能加引号。为了兼容性，在列表中应该至少有一个通用字体族名。

serif

衬线体。对于中文是宋体。

中文示例 / English Sample

sans-serif

无衬线体。对于中文是黑体。

中文示例 / English Sample

monospace

等宽字体

中文示例 / English Sample

cursive

草书字体/手写字体。对于中文，常作为楷体的后备字体，但一些浏览器不将其显示为楷体。

中文示例 / English Sample

fangsong

仿宋。

中文示例 / English Sample

fantasy

Fantasy字体主要是那些具有特殊艺术效果的字体。

中文示例 / English Sample

另有system-ui、math、emoji，不赘述，详见font-family的文档。

Web安全字体

这些字体组合具有较好的兼容性，推荐使用或作为备选列表的一部分。

字体	示例
衬线体
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。模板样式表不支持@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：文件路径。
  • 可在url()后面跟一个format()，浏览器不支持此格式的字体时，不会下载字体，有助于节约流量。由于共享站只能上传TTF格式的字体，所以这里填truetype。
  • 可以指定一个fallback列表，某个资源不可用时按照次序尝试调用下一个，详见src的文档。
• unicode-range（可选）: Unicode范围，当网页不含在此范围的字符时，不会下载字体，有助于节约流量。
• 其他参数见@font-face的文档。

第二步：在模板中调用

导入字体后，即可通过font-family调用该字体。在模板中通过{{#Widget:}}调用创建好的Widget，再添加一些别的需要的功能。之后在条目中使用该模板即可。