使用@ font-face和当前HTML页面中嵌入的SVG字体
我有一个我想要分发的独立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文档中定义的,我可以使用它的优先级低于本地安装的字体,如下所示:( 小提琴)
<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声明,该字体在文档中已经可用MyFont,在中font-family指定<font-face />.但是,这将以比命名的本机字体更高的优先级使用MyFont,因此它不是解决方案.
我希望我可以把它称为local("MyFont")......(小提琴)
src: local("My Font"), /* local */
local("MyFont"); /* embedded */
......但这也不起作用.
我可以给嵌入字体一个不同的名称并以较低的优先级使用它style="font-family: LocalFont, EmbeddedFont",但我允许用户将本地文件的片段导入到文档中,那些本地文件将仅通过标准名称引用该字体.可以在导入时重写这些引用,但我不喜欢这种解决方案.
如何从@font-face声明中引用当前文档中嵌入的SVG字体？
将字体转换为数据URI并将其嵌入CSS声明中:( 小提琴)
<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一起使用.因此,您只能在编码文件中使用单个字体,而不是具有多个字体并单独引用它们.(不是你想要的;在每个字体的声明中复制多个嵌入字体的数据将是一个巨大的空间浪费.)