关于javascript:Web-安全字体和网络字体-Web-Fonts

什么是 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 – 腾讯云开发者社区 - 腾讯云