我有一个独立的HTML文档需要分发,没有任何外部依赖。我在此文档中使用了一种非标准字体,只有一些用户已安装。
对于那些未安装该字体的用户,我在<body>
顶部嵌入了一个包含字体副本的SVG文档。(这个例子中我使用了一个单字符字体,真实的文档则使用了完整的字体。)
<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文档中定义的,我可以按低于本地安装字体的优先级使用它,如下所示:(参见演示)
<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>
很遗憾,当前文档中没有任何明显的变化可以适用于字体: (样例)
src: local("My Font"),
url("./#MyFontElement") format("svg"),
url("./#MyFontElement"),
url("#MyFontElement") format("svg"),
url("#MyFontElement");
即使没有
@font-face
声明,字体已经作为<font-face />
中指定的font-family
在文档中可用,其名称为MyFont
。然而,这将比名为MyFont
的本地字体具有更高的优先级,因此不是解决方案。我希望能够将其称为
local("MyFont")
...(fiddle) src: local("My Font"), /* local */
local("MyFont"); /* embedded */
...但这也行不通。
我可以给嵌入式字体取一个不同的名称并使用较低的优先级style="font-family: LocalFont, EmbeddedFont"
,但我允许用户将代码片段从本地文件导入到文档中,并且这些本地文件将仅通过标准名称引用字体。虽然当它们被导入时可以重写这些引用,但我不喜欢那个解决方案。
如何在@font-face
声明中引用当前文档中嵌入的SVG字体?