Web 安全字体和网络字体 (Web Fonts)

网络安全字体是由许多操作系统预先安装的字体。虽然不是所有的系统都安装了相同的字体，但你可以使用网络安全字体堆栈来选择几种看起来类似的字体，并且安装在你想支持的各种系统上。如果你想使用预装字体以外的字体，从CSS3开始，你可以使用网络字体Webfonts-Learnwebdevelopment|MDN。

英文Web安全字体合集CSSFontStack:WebSafeandWebFontFamilywithHTMLandCSScode.

相比通常只有几十KB的英文字体，网页加载一个GB2312的中文字体至少要增加2MB以上加载量，而大部分中文字体都在5MB以上。所以网络字体在国内没有流行起来，还是要像英文网页好多年前一样，用网页安全字体。

下表可以看到各系统预置的中文字体——各系统根本没有相同的字体，即没有网页安全中文字体！

系统

预置中文字体

MacOSX

华康苹方Pingfang（10.11开始）冬青黑体:HiraginoSansGB（10.6开始）华文细黑：STHeitiLight（又名STXihei）华文黑体：STHeiti华文楷体：STKaiti华文宋体：STSong华文仿宋：STFangsong

Windows

微软雅黑:MicrosoftYaHei（Windows7开始）黑体:SimHei宋体:SimSun新宋体:NSimSun仿宋:FangSong楷体:KaiTi仿宋GB2312:FangSong_GB2312楷体GB2312:KaiTi_GB2312

Android

DroidSansFallback

iOS

苹方（iOS9开始）黑体：HeitiSC(iOS8)华文黑体：STHeiti（及以下）

与网络安全字体不同，网络字体没有预先安装在用户的系统中。这些字体是由用户的浏览器在渲染网页时下载的，然后应用于你的文本。使用网络字体的主要缺点是它会减慢你网站的加载时间。在旧的浏览器中，对CSS3的支持也很有限，而使用网络字体是需要CSS3的。后面的限制可以通过使用字体堆栈来弥补，类似于网络安全字体堆栈，但包括一个网络字体作为堆栈的第一个字体。如果浏览器无法使用网络字体，它就会退回到堆栈中的网络安全字体。

Web字体是一种CSS特性，允许我们指定在访问时随您的网站一起下载的字体文件，这意味着任何支持Web字体的浏览器都可以使用指定的字体。所需的语法如下所示：

首先，在CSS的开始处有一个@font-face块，它指定要下载的字体文件：

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

在这个下面，你可以使用@font-face中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说：

html{font-family:"myFont","BitstreamVeraSerif",serif;}

关于网页字体有两件重要的事情要注意：

浏览器支持不同的字体格式，因此需要多种字体格式以获得良好的跨浏览器支持。例如，大多数现代浏览器都支持WOFF/WOFF2(WebOpenFontFormatversions1and2，Web开放字体格式版本1和2)，它是最有效的格式，但是旧版本IE只支持EOT(EmbeddedOpenType，嵌入式开放类型)的字体，你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器。

字体一般都不能自由使用。我们必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在站点上)提供字体创建者标识。你不应该在没有适当的授权的情况下偷窃字体。

serif是一种具有装饰性小横线的字体族，这些小横线被称为“衬线”。Serif字体通常被用于印刷材料中，如书籍、杂志、报纸等，因为它们的衬线可以增强字体的可读性和易读性。常见的Serif字体包括TimesNewRoman、Georgia、和Garamond。

sans-serif是一种不带装饰性小横线的字体族。这种字体通常被用于数字屏幕上，如电脑、手机和电视。与Serif字体相比，Sans-serif字体看起来更现代、更简洁。常见的Sans-serif字体包括Arial、Helvetica和Verdana。

monospace是一种字母宽度相等的字体族，每个字符都占据相同的宽度。Monospace字体通常用于计算机编程、打印机输出和其他需要对齐文本的应用程序。常见的Monospace字体包括Courier、Consolas和Monaco。

cursive是一种仿效手写的字体族，具有曲线、流畅的线条。这种字体通常被用于设计师、艺术家和文具爱好者等需要体现个性和艺术感的场合。常见的Cursive字体包括BrushScript、LucidaCalligraphy和ComicSans。

fantasy是一种具有艺术性和独特性的字体族，经常用于海报、书籍封面和广告等场合。这种字体的外形往往是有趣、古怪、奇特或装饰性的，常常包含有装饰性的花纹或图案。常见的Fantasy字体包括Harrington、VinerHandITC和Zapfino。

Script字体族是一类字体，通常被设计用于模拟手写或手绘效果，以及营造一种自然、随意的艺术氛围。这类字体通常具有不规则的笔画、流畅的曲线和变化多端的字母间距，使得文本看起来像是手写而非打印。Script字体族的应用领域非常广泛，例如印刷品设计、标志设计、广告设计等。常见的Script字体有BrushScript、Lobster、Pacifico、Vibur等。

为了确保中文字符在不同计算机和浏览器上的正确显示，网页设计or开发者可以考虑：

使用Web服务商提供的字体库：像GoogleFonts、AdobeFonts等服务商提供了很多中英文字体库，这些字体可以被网页直接引用，无需用户安装字体即可正常显示。

使用图像或矢量图形：将中文字符转换为图像或矢量图形，并将其嵌入到网页中。虽然这种方法可以确保字符在不同浏览器和计算机上的正确显示，但其缺点是无法进行文本搜索和复制粘贴等操作。

引用多个字体：如果设计者希望在网页中使用多种中文字体，可以在CSS样式表中指定多个备选字体。例如：font-family:"宋体","SimSun","MicrosoftYaHei","微软雅黑",sans-serif;

需要注意的是，尽管某些字体在设计中看起来很不错，但并不一定适合用作Web安全字体。设计or开发者需要权衡字体的外观和可用性，选择最适合自己需求的中文Web安全字体。

Webfonts-Learnwebdevelopment|MDN

CSSFontStack:WebSafeandWebFontFamilywithHTMLandCSScode.

中文网页字体设置|

serif，sans-serif，monospace，cursive和fantasy-腾讯云开发者社区-腾讯云