我有一个想要分发的独立 HTML 文档，没有任何外部依赖项。我在本文档中使用了非标准字体，只有我的部分用户会安装该字体。
对于那些没有安装该字体的用户，我在顶部的嵌入 SVG 文档中包含了该字体的副本<body>。 （在此示例中我使用的是单字形字体，真实文档使用的是完整字体。）
<svg style="display: none;"><defs>
<font id="MyFontElement">
<font-face font-family="MyFont" />
<glyph unicode="A" horiz-adv-x="950" d="M0,0L0,100L100,100L100,200L0,200L0,300L100,300L100,400L200,400L200,500L300,500L300,600L400,600L600,600L600,500L700,500L700,400L800,400L800,300L900,300L900,200L800,200L800,100L900,100L900,0L600,0L600,100L700,100L700,200L800,200L800,300L100,300L100,200L200,200L200,100L300,100L300,0L0,0M300,400L600,400L600,500L300,500L300,400Z" />
</font>
</defs></svg>
SVG字体看起来不如普通字体好看，所以我只想在本地未安装该字体的情况下使用SVG字体。如果字体是在外部 SVG 文档中定义的，我可以以比本地安装的字体更低的优先级使用它，如下所示：(fiddle)
<style>
@font-face {
font-family: "My Font";
src: local("My Font"), url("fonts.svg#MyFontElement") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
Alphabet
</p>
不幸的是，所有明显的变体似乎都不适用于当前文档中的字体：(fiddle)
src: local("My Font"),
url("./#MyFontElement") format("svg"),
url("./#MyFontElement"),
url("#MyFontElement") format("svg"),
url("#MyFontElement");
即使没有@font-face声明，该字体已经在文档中可用，如下所示MyFont, the font-family中指定的<font-face />。然而，这将用于higher优先于名为的本机字体MyFont，所以它不是一个解决方案。
我希望我可以将其称为local("MyFont")... (fiddle)
src: local("My Font"), /* local */
local("MyFont"); /* embedded */
...但这也行不通。
我可以给嵌入字体一个不同的名称并以较低的优先级使用它，style="font-family: LocalFont, EmbeddedFont"，但我允许用户将本地文件中的片段导入到文档中，并且这些本地文件将仅通过标准名称引用字体。导入这些引用时可以重写它们，但我不喜欢这种解决方案。
如何从当前文档中引用嵌入的 SVG 字体@font-face宣言？
将字体转换为数据 URI 并将其嵌入到 CSS 声明中：(fiddle)
<style>
@font-face {
font-family: "My Font";
src: url("data:application/octet-stream;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+CiAgPGZvbnQgaWQ9Ik15Rm9udEVsZW1lbnQiPgogICAgPGZvbnQtZmFjZSBmb250LWZhbWlseT0iTXlGb250IiAvPgogICAgPGdseXBoIHVuaWNvZGU9IkEiIGhvcml6LWFkdi14PSI5NTAiIGQ9Ik0wLDBMMCwxMDBMMTAwLDEwMEwxMDAsMjAwTDAsMjAwTDAsMzAwTDEwMCwzMDBMMTAwLDQwMEwyMDAsNDAwTDIwMCw1MDBMMzAwLDUwMEwzMDAsNjAwTDQwMCw2MDBMNjAwLDYwMEw2MDAsNTAwTDcwMCw1MDBMNzAwLDQwMEw4MDAsNDAwTDgwMCwzMDBMOTAwLDMwMEw5MDAsMjAwTDgwMCwyMDBMODAwLDEwMEw5MDAsMTAwTDkwMCwwTDYwMCwwTDYwMCwxMDBMNzAwLDEwMEw3MDAsMjAwTDgwMCwyMDBMODAwLDMwMEwxMDAsMzAwTDEwMCwyMDBMMjAwLDIwMEwyMDAsMTAwTDMwMCwxMDBMMzAwLDBMMCwwTTMwMCw0MDBMNjAwLDQwMEw2MDAsNTAwTDMwMCw1MDBMMzAwLDQwMFoiIC8+ICAgIAogIDwvZm9udD4KPC9kZWZzPjwvc3ZnPgo=") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
Alphabet
</p>
有一个警告：您不能使用 ID 说明符 (#MyFont) 具有这样的数据 URI。因此，编码文件中只能有一种字体，而不是有多种字体并单独引用它们。 （这并不是您想要的；在每种字体的声明中复制多种嵌入字体的数据会浪费大量空间。）