Web 浏览器可以从 webfonts 渲染嵌入的位图吗？

Question

在尝试获取使用嵌入式位图通过 @font-face 呈现它们的自定义字体时，我一直在参考调查结果 in this thread and ，并且在我对字体的实验中，我知道这些字体配置正确，我发现以下结果显示 日本語 使用 Windows 10 和 Vivaldi（Chrome 等），启用并配置了 ClearType（不确定这是否重要）：

span {
  font-family: "SimSun"; // or just omitted, since this is a fallback font
}

@font-face { font-family: "font"; font-weight: normal; src: url('simsun_0.ttc'); }
span {
  font-family: "font";
}

simsum_0.ttc 是我从 C:/Windows/Fonts/ 中提取并放置在 css 所在文件夹中的字体。我还验证了这个文件确实有嵌入的位图并且配置正确。

我刚刚安装了我正在使用的字体并通过其系统名称引用了它，然后正确加载了位图。有没有办法让浏览器从通过 @font-face 加载的字体加载位图？是否有关于此限制的任何文档或规范，或者可能 work-arounds?

更多示例

这对 custom-built 字体也同样适用 - 这是 Chrome 中 .otf 字体的示例。在系统上安装时通过其名称加载的字体：

和通过 @font-face 的 url:

加载的相同字体

Answer 1

一个可靠且简单的选择是使用像 FontSquirrel 这样的服务。 https://www.fontsquirrel.com/tools/webfont-generator

上传字体，它将生成您需要的所有内容，以便您可以下载、复制并粘贴到您的项目中。

祝你好运！

Answer 2

问题是 @font-face 不支持 TrueType Collections (.ttc) 文件，因此加载失败。控制台是否会向您显示类似这样的错误？

如果许可证允许，您可以使用工具从 .ttc 文件中提取所需的 .ttf。或者，您可以要求获得字体的铸造厂为您提供 .ttf（或 .woff2，无论您需要什么）。

Answer 3

Chrome 和 Firefox（可能还有其他）运行对系统中不可用的字体进行 OTS，从字体中删除 EBDT 和 EBLC 表（存储位图的位置）。

来自OTS readme：

The OpenType Sanitizer (OTS) parses and serializes OpenType files (OTF, TTF) and WOFF and WOFF2 font files, validating them and sanitizing them as it goes.

The C library is integrated into Chromium and Firefox, and also simple command line tools to check files offline in a Terminal.

The CSS font-face property is great for web typography. Having to use images in order to get the correct typeface is a great sadness; one should be able to use vectors.

However, on many platforms the system-level TrueType font renderers have never been part of the attack surface before, and putting them on the front line is a scary proposition... Especially on platforms like Windows, where it's a closed-source blob running with high privilege.

2014 年有 interest in adding color bitmap tables to Chromium, and support was added to pass-through the color bitmap (CBDT & CBLC) tables to OTS，因此如果浏览器请求，似乎也可以添加对这些的支持。

我认为实现这一目标的步骤是：

添加将 EBDT 和 EBLC 表传递到 OTS 的功能。 This is the current location of the code that passes the color tables through.
请求每个项目（Chromium、Firefox 等）允许传递。
等待所有更新的代码被推送到下游。

这种支持可能有更复杂的实现（@font-face 中的选项等），但这似乎是最简单的，因为已经以相同的方式（某种程度上）支持了颜色表。

Web 浏览器可以从 webfonts 渲染嵌入的位图吗？

Can web browsers render embedded bitmaps from webfonts?

css

google-chrome

browser

fonts

webfonts