2023年政策修订增补工作正在进行中,欢迎参与!
  • Moegirl.ICU:萌娘百科流亡社群 581077156(QQ),欢迎对萌娘百科运营感到失望的编辑者加入
  • Moegirl.ICU:账号认领正在试运行,有意者请参照账号认领流程

帮助:字体

萌娘百科,万物皆可萌的百科全书!转载请标注来源页面的网页链接,并声明引自萌娘百科。内容不可商用。
跳转到导航 跳转到搜索
Commons-emblem-notice.svg
这个页面“Help:字体”是萌娘百科的帮助文档
  • 本文用于介绍萌娘百科中一些特定功能的操作方法;
  • 本文仅是一篇论述,不属于方针或指引。如果本指南与相关方针或指引发生冲突或存在不一致的情况,请以方针或指引的条文为准。

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

指定字体

在CSS中,通过font-family[1]指定一段文字的字体。

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

第二步:在模板中调用

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

参见