么是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

总结

可以根据项目实际情况，选择适当的方法。