么是Web安全字體

網絡安全字體是由許多操作系統預先安裝的字體。雖然不是所有的系統都安裝了相同的字體，但你可以使用網絡安全字體堆棧來選擇幾種看起來類似的字體，并且安裝在你想支持的各種系統上。如果你想使用預裝字體以外的字體，從CSS3開始，你可以使用網絡字體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.

沒有網頁安全中文字體

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

下表可以看到各系統預置的中文字體——各系統根本沒有相同的字體，即沒有網頁安全中文字體！

什么是網絡字體

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

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 特性，允許我們指定在訪問時隨您的網站一起下載的字體文件，這意味著任何支持 Web 字體的瀏覽器都可以使用指定的字體。所需的語法如下所示：

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

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

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

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

關于網頁字體有兩件重要的事情要注意：

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

字體類型 - 常見字體族

serif 襯線字體族

serif 是一種具有裝飾性小橫線的字體族，這些小橫線被稱為“襯線”。Serif 字體通常被用于印刷材料中，如書籍、雜志、報紙等，因為它們的襯線可以增強字體的可讀性和易讀性。常見的 Serif 字體包括 Times New Roman、Georgia、和 Garamond。

sans-serif 無襯線字體族

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

monospace 等寬字體族

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

cursive 手寫字體族

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

fantasy 夢幻字體族

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

Script 手寫字體族

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

總結

為了確保中文字符在不同計算機和瀏覽器上的正確顯示，網頁設計or開發者可以考慮：

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

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

參考

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

人人都是產品經理【起點學院】，BAT實戰派產品總監手把手系統帶你學產品、學運營。

產品設計時細節是產品經理最頭疼的問題，一個button，一個鏈接都要考慮太多的細節問題。作者整理了常見的一些功能設計問題，一篇文章看懂這些功能設計。來學習吧。

定義

鏈接也稱為超鏈接，所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后，鏈接目標將顯示在瀏覽器上，并且根據目標的類型來打開或運行。

樣式

鏈接可以是一個字或是一段字這樣的文本，也可以是一個按鈕，一張圖片，當你點擊后跳轉到另一個目標，當你把鼠標指針移到某個鏈接時會變成一個小手，當然在手機上沒有這一特點。

1. 文本樣式的鏈接

文本樣式的鏈接一般在搜索引擎的網站呈現藍色字樣，大多會在下面加上下劃線以便識別，不過現如今考慮到不影響文本的可讀性與用戶體驗，逐漸取消了下劃線。而在一些別的網站考慮到界面設計風格各方面的因素而不用藍色。

谷歌的文本鏈接是藍色，沒有下劃線

百度的文本鏈接也是藍色，關鍵詞是紅色，有下劃線

而京東的文本鏈接有灰色，有白色，有黑色

2. 按鈕樣式的鏈接

按鈕樣式的鏈接比文本樣式的更容易識別，每一個按鈕都是一樣鏈接。

按鈕樣式鏈接

3. 圖片樣式的鏈接

圖片樣式的鏈接可以是單獨的一張圖片，也可以是文字與按鈕一起組成一張圖片，只是鼠標指針掃過圖片的任何一個部位都會變成小手。

如桌面彈出這種游戲小窗口的圖片式鏈接

由文字/圖/按鈕樣式一起構成的一張圖片式按鈕，鼠標可以點擊圖中任何一部位

打開方式

鏈接打開的方式有三種：第一種是在當前頁面刷新跳轉，國外的網站大多是這樣的打開式；第二種是在新標簽頁面打開鏈接，國內大多采用這種；第三種是提示用APP打開。當然現在出現了一種新的打開方式，那就是二維碼掃描。

提示用美拍APP打開

類型

按照連接路徑的不同，網頁中超鏈接一般分為以下3種類型：內部鏈接，錨點鏈接和外部鏈接。

鏈接還可以分為動態鏈接和靜態鏈接。動態超鏈接指的是可以通過改變HTML代碼來實現動態變化的鏈接，例如我們可以實現將鼠標移動到某個文字鏈接上，文字就會象動畫一樣動起來或改變顏色的效果，也可以實現鼠標移到圖片上圖片就產生反色或朦朧等等的效果。而靜態鏈接，顧名思義，就是沒有動態效果的鏈接。

1. 內部鏈接

與外部鏈接（即反向鏈接）相反，內部鏈接是指同一網站域名下的內容頁面之間互相鏈接。如頻道、欄目、終極內容頁之間的鏈接，乃至站內關鍵詞之間的Tag鏈接都可以歸類為內部鏈接，因此內部鏈接我們也可以稱之為站內鏈接，對內部鏈接的優化其實就是對網站的站內鏈接的優化。

2. 錨點鏈接

HTML中的鏈接，正確的說法應該稱作"錨點"，它命名錨點鏈接（也叫書簽鏈接）常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，不僅讓我們能指向文檔，還能指向頁面里的特定段落，更能當作"精準鏈接"的便利工具，讓鏈接對象接近焦點。便于瀏覽者查看網頁內容。類似于我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時，標記錨點是最佳的方法。

3. 外部鏈接

外部鏈接，又常被稱為：“反向鏈接”或“導入鏈接”，是指通過其他網站鏈接到你的網站的鏈接。

外部鏈接指的是針對搜索引擎，與其它站點所做的友情鏈接。高質量的外部鏈接指：和你的網站建立鏈接的網站知名度高，訪問量大，同時相對的外部鏈接較少，有助于快速提升你的網站知名度和排名的其他網站的友情鏈接。

如果按照使用對象的不同，網頁中的鏈接又可以分為：文本超鏈接，圖像超鏈接，E-mail鏈接，錨點鏈接，多媒體文件鏈接，空鏈接等。

鏈接是一種對象，它以特殊編碼的文本或圖形的形式來實現鏈接，如果單擊該鏈接，則相當于指示瀏覽器移至同一網頁內的某個位置，或打開一個新的網頁，或打開某一個新的WWW網站中的網頁。

鏈接狀態

鏈接在交互上一般會呈現4種狀態，即默認狀態/懸停時狀態/點擊時狀態/點擊后狀態。比如谷哥網站的交互體驗。如下圖：

點擊前

懸停時，下面浮現半透明線條

點擊時，有波紋暈開的動態效果

點擊后，下面線條粗

有時候是3種狀態，比如百度網和知乎應用：

默認狀態

點擊時鏈接變紅

點擊后鏈接變成紫色

IOS系統知乎應用的3種狀態，而在Android系統沒有用力點擊這一狀態。

默認狀態

點擊狀態

用力點擊會彈出預覽小窗口

有些時候只有2種狀態，如下圖谷歌網：

默認和點擊后狀態一樣

鼠標懸停時出現下劃線

默認狀態

點擊時

而有時候比如在APP里有時候就一直只有一種狀態，也可以稱靜態鏈接，之前的可以稱之為動態鏈接。在不同的使用場景會因為當時的情況選擇最合適的交互體驗設計。有的情況下還會加上點擊的音效，使用戶體驗更暢快，這在移動端用的使用情況多一些。

總之鏈接是網頁不可缺少的構成部分，每一個鏈接的呈現都是經過深思熟慮的。

作者：潘瑤瓊（簡書作者）

本文由 @潘瑤瓊 授權發布于人人都是產品經理，未經作者許可，禁止轉載。

例簡介

有些網站為了凸顯某部分字體，而引入自定義字體，但由于自定義字體相對都比較大（幾M），導致頁面加載緩慢；所以本文介紹三種壓縮字體的方法，可根據項目情況自行選擇。

壓縮方法

1、利用Fontmin程序（效果如下圖）

1）運行Fontmin程序后，1位置輸入需要生成的文字內容，2位置拖入ttf文件（源文件7947KB）;

2)點擊“生成”按鈕，生成成功后，彈出生成文件（ttf文件變成11KB），根據瀏覽器兼容性引入文件。

Tips：當需要增加新的文字時，需要重新生成文件。

2、利用Node.js+Fontmin組件（效果如下圖）

1）配置好Node.js框架（本文使用Express）；

2）在index.js文件增加代碼，用來自動讀取“views”下面的所有*.ejs文件的文字，然后根據“src”的ttf源文件，使用Fontmin組件生成壓縮文件（生成目錄“dest”）。

Tips：適用于多文件情況下，自動匯總生成。

// 遍歷所有文件提取里面的所有文字
const fs = require("fs");
const Fontmin = require('fontmin');
let set = new Set();


//get all possible characters
const scanFolder = (dir, done) => {
    let results = [];
    fs.readdir(dir, (err, list) => {
        if (err) {
            return done(err);
        }
        let i = 0;
        (function iter() {
            let file = list[i++];
            if (!file) {
                return done(null, results);
            }
            file = dir + '/' + file;
            console.log(file)
            fs.stat(file, (err, stat) => {
                if (stat && stat.isDirectory()) {
                    scanFolder(file, (err, res) => {
                        results = results.concat(res);
                        iter();
                    });
                } else {
                    results.push(file);
                    iter();
                }
            });
        })();
    });
};
//get all possible characters
const generateFinalHTML = finalString => {
    const fontmin = new Fontmin()
        .src('public/fonts/SourceHanSansCN-Medium.ttf')
        .dest('public/fonts/build/')
        .use(Fontmin.glyph({
            text: finalString,
            hinting: false
        }))
        .use(Fontmin.ttf2woff({
            deflate: true
        }));




    fontmin.run((err) => {
        if (err) {
            throw err;
        }
    });
}
//get all possible characters
scanFolder("views", (n, results) => {
    results.forEach(file => {
        const result = fs.readFileSync(file, 'utf8');
        const currentSet = new Set(result)
        set = new Set([...set, ...currentSet]);
    });
    generateFinalHTML(Array.from(set).join(""))
})

3、利用font-spider組件（效果如下圖）

1）安裝font-spider組件；

npm install font-spider -g

2）新建index.html文件；

3）執行下面命令生成壓縮文件。

font-spider ./*.html

總結

可以根據項目實際情況，選擇適當的方法。