使用嵌入当前HTML页面的带有SVG字体的@ font-face [英] Using @font-face with an SVG font embedded in the current HTML page
问题描述
我有一个独立的HTML文档我想分发，没有任何外部依赖。我在本文档中使用了非标准字体，只有一些用户已经安装。
对于没有安装字体的用户，我是包括< body> 顶部的嵌入式SVG文档中字体的副本。 （在这个例子中，我使用的是单字形字体，真正的文档是使用完整的字体。） b
< svg style =display：none;>< defs>
< font id =MyFontElement>
< font-face font-family =MyFont/>
< glyph unicode =Ahoriz-adv-x =950d =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文档中定义的，那么我可以使用它的优先级低于本地安装的字体，如下所示：（）
src：local（My Font），
url（./# MyFontElement）format（svg），
url（./# MyFontElement），
url（＃MyFontElement）格式（svg），
url（＃MyFontElement）;
即使没有 @ font-face 声明，该字体在 MyFont ， font-family 文档中已经可以在< font-face /> 。然而，这将被用于比原始字体 MyFont 更高的优先级，所以它不是解决方案。
我希望我可以将它称为 local（MyFont） ...（小提琴）
src：local（My Font），/ * local * /
local（MyFont）; / *嵌入式* /
...但这也行不通。
我可以给嵌入字体一个不同的名称，并以较低的优先级使用它， style =font-family：LocalFont，EmbeddedFont，但我允许用户从本地文件导入片段到文档中，并且这些本地文件将仅以标准名称引用字体。在导入时可以重写这些引用，但我不喜欢该解决方案。
如何引用当前嵌入的SVG字体文件来自 @ font-face 声明？
到一个数据URI并嵌入到CSS声明中：（小提琴）
< style>
@ font-face {
font-family：我的字体;
的src：URL（ 数据：应用/八位字节流;的base64，PD94bWwgdmVyc2lvbj0iMS4wIj8 + CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI + PGRlZnM + CiAgPGZvbnQgaWQ9Ik15Rm9udEVsZW1lbnQiPgogICAgPGZvbnQtZmFjZSBmb250LWZhbWlseT0iTXlGb250IiAvPgogICAgPGdseXBoIHVuaWNvZGU9IkEiIGhvcml6LWFkdi14PSI5NTAiIGQ9Ik0wLDBMMCwxMDBMMTAwLDEwMEwxMDAsMjAwTDAsMjAwTDAsMzAwTDEwMCwzMDBMMTAwLDQwMEwyMDAsNDAwTDIwMCw1MDBMMzAwLDUwMEwzMDAsNjAwTDQwMCw2MDBMNjAwLDYwMEw2MDAsNTAwTDcwMCw1MDBMNzAwLDQwMEw4MDAsNDAwTDgwMCwzMDBMOTAwLDMwMEw5MDAsMjAwTDgwMCwyMDBMODAwLDEwMEw5MDAsMTAwTDkwMCwwTDYwMCwwTDYwMCwxMDBMNzAwLDEwMEw3MDAsMjAwTDgwMCwyMDBMODAwLDMwMEwxMDAsMzAwTDEwMCwyMDBMMjAwLDIwMEwyMDAsMTAwTDMwMCwxMDBMMzAwLDBMMCwwTTMwMCw0MDBMNjAwLDQwMEw2MDAsNTAwTDMwMCw1MDBMMzAwLDQwMFoiIC8 + ICAgIAogIDwvZm9udD4KPC9kZWZzPjwvc3ZnPgo =）格式（ SVG）;
}
< / style>
< p style =font：3em'我的字体';>
Alphabet
< / p>
有一点需要注意：不能使用ID说明符（ #MyFont ）与这样的数据URI。因此，您只能在编码文件中使用单个字体，而不是单独使用多个字体并引用它们。 （不是你想要的;在声明中为每种字体复制多个嵌入字体的数据将是一个巨大的空间浪费。）
I have a standalone HTML document I want to distribute, without any external dependencies. I'm using a non-standard font in this document that only some of my users will have installed.
For those users that do not have the font installed, I am including a copy of the font in an embedded SVG document at the top of the <body>. (I'm using a one-glyph font for this example, the real document is using a complete font.)
<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 fonts do not look as nice as ordinary fonts, so I only want the SVG font to be used if the font is not installed locally. If the font was defined in an external SVG document, I could use it at a lower priority than the locally-installed font like this: (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>
Unfortunately, none of the obvious variations seem to work for a font in the current document: (fiddle)
src: local("My Font"),
url("./#MyFontElement") format("svg"),
url("./#MyFontElement"),
url("#MyFontElement") format("svg"),
url("#MyFontElement");
Even without a @font-face declaration, the font is already available in the document as MyFont, the font-family specified in the <font-face />. However, this will be used at a higher priority than a native font named MyFont, so it is not an solution.
I hoped that I might be able to refer to it as local("MyFont")... (fiddle)
src: local("My Font"), /* local */
local("MyFont"); /* embedded */
...but that doesn't work either.
I could give the embedded font a different name and use it at a lower priority, style="font-family: LocalFont, EmbeddedFont", but I'm allowing users to import snippets from local files into the document and those local files will refer to the font only by the standard name. It would be possible to rewrite these references when they're imported, but I don't like that solution.
How do I refer to an SVG font embedded in the current document from a @font-face declaration?
Convert the font to a data URI and embedded it in the CSS declaration: (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>
There's one caveat: you can't use an ID specifier (#MyFont) with a data URI like this. Therefore you can only have a single font in the encoded file, rather than having multiple and referring to them individually. (Not that you'd want to; duplicating the data for multiple embedded fonts in the declaration for each font would be a huge waste of space.)
这篇关于使用嵌入当前HTML页面的带有SVG字体的@ font-face的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
