置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

幫助:字體

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋
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,再添加一些別的需要的功能。之後在條目中使用該模板即可。

參見