关于docker:Web-Fonts-学习之解决Docker环境网页中文渲染吃字问题

5次阅读

共计 1348 个字符，预计需要花费 4 分钟才能阅读完成。

背景信息
之前我的项目中遇到了应用 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;
}

font-family: ‘zantrokeregular’, serif;

正文完