Uso de @ font-face con una fuente SVG incrustada en la página HTML actual
Tengo un documento HTML independiente que quiero distribuir, sin dependencias externas. Estoy usando una fuente no estándar en este documento que solo algunos de mis usuarios habrán instalado.
Para aquellos usuarios que no tienen la fuente instalada, estoy incluyendo una copia de la fuente en un documento SVG incrustado en la parte superior de la fuente.<body>. (Estoy usando una fuente de un glifo para este ejemplo, el documento real está usando una fuente completa).
<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>
Las fuentes SVG no se ven tan bien como las fuentes comunes, así que solo quiero que se use la fuente SVG si la fuente no está instalada localmente. Si la fuente se definió en un documento SVG externo, podría usarla con una prioridad más baja que la fuente instalada localmente como esta: (violín)
<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>
Desafortunadamente, ninguna de las variaciones obvias parece funcionar para una fuente en el documento actual: (violín)
src: local("My Font"),
url("./#MyFontElement") format("svg"),
url("./#MyFontElement"),
url("#MyFontElement") format("svg"),
url("#MyFontElement");
Incluso sin un@font-face declaración, la fuente ya está disponible en el documento comoMyFont, lafont-family especificado en el<font-face />. Sin embargo, esto será utilizado en unamayor prioridad que una fuente nativa nombradaMyFont, por lo que no es una solución.
Esperaba poder referirme a él comolocal("MyFont")... (violín)
src: local("My Font"), /* local */
local("MyFont"); /* embedded */
... pero eso tampoco funciona.
Podría darle un nombre diferente a la fuente incrustada y usarla con una prioridad más baja,style="font-family: LocalFont, EmbeddedFont", pero les estoy permitiendo a los usuarios importar fragmentos de archivos locales al documento y esos archivos locales se referirán a la fuente solo por el nombre estándar. Sería posible volver a escribir estas referencias cuando se importan, pero no me gusta esa solución.
¿Cómo me refiero a una fuente SVG incrustada en el documento actual desde un@font-face ¿declaración?