Web|Web Fonts 学习之解决Docker环境网页中文渲染吃字问题 WebFonts学习之解决Docker环境网页

背景信息
之前项目中遇到了使用ActiveReportsJS 前端报表控件生成PDF的功能，在IIS 或者Tomcat服务器上部署前端项目，生成PDF 超链接（为英文）均能正常显示，但是在Docker中部署，生成PDF时候总是出现超链接吃字。

文章图片

正常

文章图片

通过与公司内部的资深前端大神沟通后，会发现还是因为缺字体导致的，因为虽然在生成PDF 时注册了字体但这个字体是避免了乱码，并未保证能够被正确的画出来，所以研究后发现，还是需要使用 Web-Fonts
Web Fonts 介绍
Web Fonts 表示可以随着网页的加载下载自定义字体实现以更多不同的、自定义的文本样式。
CSS 中允许为HTML 标签指定 font-family 属性，浏览器会尝试下载font-family 中指定的字体列表直到在运行的客户端系统中找到可用的字体。
如：

p { font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; }

以上会保证在系统中运行良好，但传统Web开发者的字体选择是有限的。只有少数几种字体，可以保证在所有常见的系统中都可以使用，称为 Web-safe fonts，我们就可以通过 web-safe提供的字体，在字体栈中指定可选的字体文件，但这增加了测试方面的开销，以确保你的设计在每一种字体下看起来都很好。
Web fonts是一个好的选择，可以保证网页运行良好， Web-Font 是 CSS 的特点，允许指定字体文件随着网站一起下载，也就意味着，任何支持 Web fonts的浏览器都可以精准的指定需要加载的字体。
语法如下：
首先需要在CSS 中定义@font-fce 块，指定下载字体的文件，注意 src里面就是字体文件的地址：
@font-face {
font-family: "myFont";
src: url("myFont.woff2");
}
可以使用@font-face里面指定的字体名称，在任何需要的标签中，像普通的font-family引用一样应用到需要的标签中：

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

语法确实稍微复杂一些
关于 Web-Font 我们需要注意以下事项：

注意字体版权
所有主流浏览器主要支持的字体格式为 WOFF或WOFF2(Web Open Font Format versions 1 and 2),即使老的浏览器如IE9也是支持WOFF格式的。
WOFF2 支持TrueType 和OpenType 规格说明的全部，包含variable fonts, chromatic fonts, 及font collections.
列出字体文件的顺序很重要。如果提供了浏览器的字体列表，浏览器将选择首个字体文件来使用。

示例：

@font-face { font-family: 'zantrokeregular'; src: url('fonts/zantroke-webfont.woff2') format('woff2'), url('fonts/zantroke-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

【Web|Web Fonts 学习之解决Docker环境网页中文渲染吃字问题】font-family: 'zantrokeregular', serif;