什么是Web安全字體

網(wǎng)絡(luò)安全字體是由許多操作系統(tǒng)預(yù)先安裝的字體。雖然不是所有的系統(tǒng)都安裝了相同的字體，但你可以使用網(wǎng)絡(luò)安全字體堆棧來選擇幾種看起來類似的字體，并且安裝在你想支持的各種系統(tǒng)上。如果你想使用預(yù)裝字體以外的字體，從CSS3開始，你可以使用網(wǎng)絡(luò)字體Web fonts - Learn web development | MDN。

Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use Web Fonts.

• 英文Web安全字體合集 CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

沒有網(wǎng)頁安全中文字體

相比通常只有幾十 KB 的英文字體，網(wǎng)頁加載一個(gè) GB2312 的中文字體至少要增加 2 MB 以上加載量，而大部分中文字體都在 5 MB 以上。所以網(wǎng)絡(luò)字體在國(guó)內(nèi)沒有流行起來，還是要像英文網(wǎng)頁好多年前一樣，用網(wǎng)頁安全字體。

下表可以看到各系統(tǒng)預(yù)置的中文字體——各系統(tǒng)根本沒有相同的字體，即沒有網(wǎng)頁安全中文字體！

什么是網(wǎng)絡(luò)字體

與網(wǎng)絡(luò)安全字體不同，網(wǎng)絡(luò)字體沒有預(yù)先安裝在用戶的系統(tǒng)中。這些字體是由用戶的瀏覽器在渲染網(wǎng)頁時(shí)下載的，然后應(yīng)用于你的文本。使用網(wǎng)絡(luò)字體的主要缺點(diǎn)是它會(huì)減慢你網(wǎng)站的加載時(shí)間。在舊的瀏覽器中，對(duì)CSS3的支持也很有限，而使用網(wǎng)絡(luò)字體是需要CSS3的。后面的限制可以通過使用字體堆棧來彌補(bǔ)，類似于網(wǎng)絡(luò)安全字體堆棧，但包括一個(gè)網(wǎng)絡(luò)字體作為堆棧的第一個(gè)字體。如果瀏覽器無法使用網(wǎng)絡(luò)字體，它就會(huì)退回到堆棧中的網(wǎng)絡(luò)安全字體。

Unlike web safe fonts, web fonts are not pre-installed on the user's system. The fonts are downloaded by the user's browser while rendering the webpage, and then applied to your text. The main drawbacks of using web fonts is it will slow your site's load time. There is also limited support for CSS3 in older browsers which is required to use web fonts. The later limitation can be remedied by using a font stack, similar to the web safe font stacks, but including a web font as the first font of the stack. If a browser is unable to use the web font it will fall back on the web safe fonts in the stack.

Web 字體是一種 CSS 特性，允許我們指定在訪問時(shí)隨您的網(wǎng)站一起下載的字體文件，這意味著任何支持 Web 字體的瀏覽器都可以使用指定的字體。所需的語法如下所示：

首先，在 CSS 的開始處有一個(gè)@font-face塊，它指定要下載的字體文件：

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

在這個(gè)下面，你可以使用 @font-face 中指定的字體種類名稱來將你的定制字體應(yīng)用到你喜歡的任何東西上，比如說：

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

關(guān)于網(wǎng)頁字體有兩件重要的事情要注意：

1. 瀏覽器支持不同的字體格式，因此需要多種字體格式以獲得良好的跨瀏覽器支持。例如，大多數(shù)現(xiàn)代瀏覽器都支持 WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web 開放字體格式版本 1 和 2)，它是最有效的格式，但是舊版本 IE 只支持 EOT (Embedded Open Type，嵌入式開放類型) 的字體，你可能需要包括一個(gè) SVG 版本的字體支持舊版本的 iPhone 和 Android 瀏覽器。
2. 字體一般都不能自由使用。我們必須為他們付費(fèi)，或者遵循其他許可條件，比如在代碼中 (或者在站點(diǎn)上) 提供字體創(chuàng)建者標(biāo)識(shí)。你不應(yīng)該在沒有適當(dāng)?shù)氖跈?quán)的情況下偷竊字體。

字體類型 - 常見字體族

serif 襯線字體族

serif 是一種具有裝飾性小橫線的字體族，這些小橫線被稱為“襯線”。Serif 字體通常被用于印刷材料中，如書籍、雜志、報(bào)紙等，因?yàn)樗鼈兊囊r線可以增強(qiáng)字體的可讀性和易讀性。常見的 Serif 字體包括 Times New Roman、Georgia、和 Garamond。

sans-serif 無襯線字體族

sans-serif 是一種不帶裝飾性小橫線的字體族。這種字體通常被用于數(shù)字屏幕上，如電腦、手機(jī)和電視。與 Serif 字體相比，Sans-serif 字體看起來更現(xiàn)代、更簡(jiǎn)潔。常見的 Sans-serif 字體包括 Arial、Helvetica 和 Verdana。

monospace 等寬字體族

monospace 是一種字母寬度相等的字體族，每個(gè)字符都占據(jù)相同的寬度。Monospace 字體通常用于計(jì)算機(jī)編程、打印機(jī)輸出和其他需要對(duì)齊文本的應(yīng)用程序。常見的 Monospace 字體包括 Courier、Consolas 和 Monaco。

cursive 手寫字體族

cursive 是一種仿效手寫的字體族，具有曲線、流暢的線條。這種字體通常被用于設(shè)計(jì)師、藝術(shù)家和文具愛好者等需要體現(xiàn)個(gè)性和藝術(shù)感的場(chǎng)合。常見的 Cursive 字體包括 Brush Script、Lucida Calligraphy 和 Comic Sans。

fantasy 夢(mèng)幻字體族

fantasy 是一種具有藝術(shù)性和獨(dú)特性的字體族，經(jīng)常用于海報(bào)、書籍封面和廣告等場(chǎng)合。這種字體的外形往往是有趣、古怪、奇特或裝飾性的，常常包含有裝飾性的花紋或圖案。常見的 Fantasy 字體包括 Harrington、Viner Hand ITC 和 Zapfino。

Script 手寫字體族

Script 字體族是一類字體，通常被設(shè)計(jì)用于模擬手寫或手繪效果，以及營(yíng)造一種自然、隨意的藝術(shù)氛圍。這類字體通常具有不規(guī)則的筆畫、流暢的曲線和變化多端的字母間距，使得文本看起來像是手寫而非打印。Script 字體族的應(yīng)用領(lǐng)域非常廣泛，例如印刷品設(shè)計(jì)、標(biāo)志設(shè)計(jì)、廣告設(shè)計(jì)等。常見的 Script 字體有 Brush Script、Lobster、Pacifico、Vibur 等。

總結(jié)

為了確保中文字符在不同計(jì)算機(jī)和瀏覽器上的正確顯示，網(wǎng)頁設(shè)計(jì)or開發(fā)者可以考慮：

1. 使用 Web 服務(wù)商提供的字體庫：像 Google Fonts、Adobe Fonts 等服務(wù)商提供了很多中英文字體庫，這些字體可以被網(wǎng)頁直接引用，無需用戶安裝字體即可正常顯示。
2. 使用圖像或矢量圖形：將中文字符轉(zhuǎn)換為圖像或矢量圖形，并將其嵌入到網(wǎng)頁中。雖然這種方法可以確保字符在不同瀏覽器和計(jì)算機(jī)上的正確顯示，但其缺點(diǎn)是無法進(jìn)行文本搜索和復(fù)制粘貼等操作。
3. 引用多個(gè)字體：如果設(shè)計(jì)者希望在網(wǎng)頁中使用多種中文字體，可以在 CSS 樣式表中指定多個(gè)備選字體。例如：font-family: "宋體", "SimSun", "Microsoft YaHei", "微軟雅黑", sans-serif;

需要注意的是，盡管某些字體在設(shè)計(jì)中看起來很不錯(cuò)，但并不一定適合用作 Web 安全字體。設(shè)計(jì)or開發(fā)者需要權(quán)衡字體的外觀和可用性，選擇最適合自己需求的中文 Web 安全字體。

參考

• Web fonts - Learn web development | MDN
• CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.
• 中文網(wǎng)頁字體設(shè)置 | inDev. Journal
• serif，sans-serif，monospace，cursive和fantasy - 騰訊云開發(fā)者社區(qū)-騰訊云

前言

這是一個(gè)簡(jiǎn)單教程，雖然網(wǎng)上很多，我的方法也不過是其中一種，但我依然想說一下坑點(diǎn)

第一種方法

先下載一個(gè)你需要的字體，可以試試多下載幾個(gè)，測(cè)試到滿意為止

下載的字體打開后，點(diǎn)擊安裝

當(dāng)然如果下載下來的不是英文名稱，我建議先修改成英文

Windows鍵+R鍵，打開運(yùn)行窗口，輸入regedit

打開注冊(cè)表編輯器，找到路徑

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsNT\CurrentVersion\Fonts

這里儲(chǔ)存的是字體名稱和文件的對(duì)應(yīng)

雙擊Microsoft YaHei & Microsoft YaHei UI (TrueType)修改一下，改成你安裝的字體的文件名稱，還有Microsoft YaHei Bold & Microsoft YaHei UI Bold(TrueType)也同樣修改一下

在重啟后就會(huì)發(fā)現(xiàn)系統(tǒng)字體的名稱發(fā)生了變化

而瀏覽器的字體也會(huì)一同變化

當(dāng)然，有時(shí)候文字看起來并不能讓人滿意，可以按先前步驟改回去，原先的兩個(gè)字體文件的名稱是msyh.ttc和msyhbd.ttc。這里需要注意的一點(diǎn)是，一些網(wǎng)頁會(huì)依照系統(tǒng)中存在的字體優(yōu)先選擇字體，如果不滿意建議刪掉剛剛安裝的，沒用的字體

第二種方法

右鍵，點(diǎn)擊屬性，看一下你需要的字體的文件名稱，復(fù)制它

然后新建一個(gè)文本文件，復(fù)制以下內(nèi)容進(jìn)去，其中在""中的內(nèi)容填入你要替換的字體

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts]

"Segoe UI (TrueType)"=""

"Segoe UI Bold (TrueType)"=""

"Segoe UI Bold Italic (TrueType)"=""

"Segoe UI Italic (TrueType)"=""

"Segoe UI Light (TrueType)"=""

"Segoe UI Semibold (TrueType)"=""

"Segoe UI Symbol (TrueType)"=""

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes]

"Segoe UI"="NewFont"

上面的這一個(gè)注冊(cè)表文件適用于英文系統(tǒng)，如果你是中文系統(tǒng)，只需要復(fù)制以下內(nèi)容，舉個(gè)例子，我如果要替換成華文楷體，就把文件編輯成這樣

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts]

" Microsoft YaHei Bold & Microsoft YaHei UI Bold (TrueType) "="STKAITI.ttf"

"Segoe UI Bold (TrueType)"="STKAITI.ttf"

之后再重命名為.reg后綴

此時(shí)，你就可以得到一個(gè)一鍵修改默認(rèn)字體的文件了，雙擊并執(zhí)行

如果不滿意要恢復(fù)成原樣，那就新建文本，再把以下內(nèi)容復(fù)制進(jìn)去然后重命名并執(zhí)行

英文系統(tǒng)是這樣的

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts]

"Segoe UI (TrueType)"="segoeui.ttf"

"Segoe UI Bold (TrueType)"="segoeuib.ttf"

"Segoe UI Bold Italic (TrueType)"="segoeuiz.ttf"

"Segoe UI Italic (TrueType)"="segoeuii.ttf"

"Segoe UI Light (TrueType)"="segoeuil.ttf"

"Segoe UI Semibold (TrueType)"="seguisb.ttf"

"Segoe UI Symbol (TrueType)"="seguisym.ttf"

中文系統(tǒng)是這樣的

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts]

" Microsoft YaHei Bold & Microsoft YaHei UI Bold (TrueType) "=" msyh.ttc"

"Segoe UI Bold (TrueType)"=" msyhbd.ttc"

祝折騰愉快