这是一个复杂的问题。我创建了一个 Chrome 扩展，它将通过 WebSocket 从客户端接收 JSON-RPC 请求，使用 HTML 修饰渲染文本，并使用 PNG 图像响应客户端。我使用 Canvas 和 SVG 元素来使用包含我正在渲染的 HTML 的foreignObject 标签来渲染文本。除了当我需要使用外部字体时，这一切都非常有效。这里发生了三个间接级别，所以也许我对浏览器的要求太多了；但我希望不会。
您可能认为将文本直接渲染到 SVG 是一种选择，但这意味着我将失去 HTML 提供的一些丰富功能，例如自动换行。有一些针对 SVG 自动换行的技巧，但我不想走这条路。这可能只是我遇到的许多问题中的第一个。
我需要的是 SVG 标签内部的 HTML 能够识别我希望它使用的外部字体。这只需要在 Chromium 中工作，因此特定于 Chromium 的解决方案对我来说是一个可行的选择。
<link rel='preload' href='https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1MmgVxIIzI.woff2' as='font' crossorigin='anonymous' />
<style>@font-face { font-family: Roboto; src: url('https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1MmgVxIIzI.woff2'); } body { font-family: Roboto; font-size: 28px; }</style>
<canvas style='position:absolute; top:90px; left:394px;' id='canvas'></canvas>
<div><span style="font-family:courier; font-size:20px">External straight-HTML (works): </span>Hello World!</div><br/>
<span style='font-family:courier; font-size:20px'>HTML within SVG (doesn't work): </span><br/><br/>
<span style='font-family:courier; font-size:20px'> Text directly to SVG …