为什么在使用 WebFonts 时有时会得到不同的结果？答案

【问题标题】：Why sometimes get different results when using WebFonts?为什么在使用 WebFonts 时有时会得到不同的结果？
【发布时间】：2022-03-30 19:25:12
【问题描述】：

我正在使用 PuppeteerSharp，它通过使用以下 WebFonts 部署到 Azure Linux Functions。我不能保证打印出所有不同语言字符的 PDF 输出。

$font-family: Arial-Unicode-MS,myanmar3,Noto-Sans-Khmer;


@font-face{
  font-family:"Arial-Unicode-MS";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url('fonts/Arial-Unicode-MS.woff2') format("woff2");
}
@font-face{
  font-family:"myanmar3";
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src:url('fonts/myanmar3.woff2') format("woff2");
}
@font-face {
  font-family: 'Noto-Sans-Khmer';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url('fonts/noto-sans-khmer-v9-khmer-regular.woff2') format('woff2');
}

但是，打印出来的 PDF 有不同的输出：

案例 1：大多数情况下打印的 PDF 仅包含拉丁字符：

案例 2：缺少高棉字符：

案例3：打印所有语言字符：

【问题讨论】：

如果您从 html 打印到 pdf，应该没问题，但是在这里打印高棉文本的解决方案是什么？
嗨@Osify，我的解决方案是使用带有客户映像的 Azure Linux 功能（在 docker 映像中安装字体）。

标签： fonts webfonts charset

【解决方案1】：

您能否指定每种字体的 Unicode 范围作为高棉文本的示例，请使用此范围unicode-range: U+1780-17FF, U+200C, U+25CC;

@font-face {
  font-family: 'Noto-Sans-Khmer';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url('fonts/noto-sans-khmer-v9-khmer-regular.woff2') format('woff2');
  unicode-range: U+1780-17FF, U+200C, U+25CC;
}

并且对 CSS 中的其他语言执行相同的操作。

对于 linux 的情况，你应该已经在你的系统中安装了字体。

【讨论】：

感谢@Osify。我改为使用 docker image 在 dockerfile 中安装所需的字体。