幫助:字體

這個頁面「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，再添加一些別的需要的功能。之後在條目中使用該模板即可。