Verwendung von @ font-face mit einer SVG-Schriftart, die in die aktuelle HTML-Seite eingebettet ist

Question

Jul 11, 2012, 07:29 PM

Verwendung von @ font-face mit einer SVG-Schriftart, die in die aktuelle HTML-Seite eingebettet ist

Ich habe ein eigenständiges HTML-Dokument, das ich verteilen möchte, ohne externe Abhängigkeiten. In diesem Dokument verwende ich eine nicht standardmäßige Schriftart, die nur einige meiner Benutzer installiert haben.

Für Benutzer, auf denen die Schriftart nicht installiert ist, füge ich eine Kopie der Schriftart in ein eingebettetes SVG-Dokument am oberen Rand des Fensters ein<body>. (In diesem Beispiel verwende ich eine Ein-Glyphen-Schriftart. Das eigentliche Dokument verwendet eine vollständige Schriftart.)

<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-Schriftarten sehen nicht so gut aus wie normale Schriftarten. Daher möchte ich, dass die SVG-Schrift nur verwendet wird, wenn sie nicht lokal installiert ist. Wenn die Schriftart in einem externen SVG-Dokument definiert wurde, könnte ich sie mit einer niedrigeren Priorität als die lokal installierte Schriftart wie folgt verwenden: (Geige)

<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>

Leider scheint keine der offensichtlichen Variationen für eine Schriftart im aktuellen Dokument zu funktionieren: (Geige)

  src: local("My Font"),
       url("./#MyFontElement") format("svg"),
       url("./#MyFontElement"),
       url("#MyFontElement") format("svg"),
       url("#MyFontElement");

Auch ohne@font-face Deklaration ist die Schriftart bereits im Dokument als verfügbarMyFont, dasfont-family angegeben in der<font-face />. Dies wird jedoch bei a verwendethöher Priorität als eine native Schriftart namensMyFontEs ist also keine Lösung.

Ich hoffte, dass ich mich darauf beziehen könntelocal("MyFont")... (Geige)

  src: local("My Font"), /* local */
       local("MyFont"); /* embedded */

... aber das geht auch nicht.

Ich könnte der eingebetteten Schriftart einen anderen Namen geben und sie mit einer niedrigeren Priorität verwenden.style="font-family: LocalFont, EmbeddedFont"Ich erlaube Benutzern jedoch, Snippets aus lokalen Dateien in das Dokument zu importieren, und diese lokalen Dateien verweisen nur mit dem Standardnamen auf die Schriftart. Es wäre möglich, diese Referenzen beim Import neu zu schreiben, aber mir gefällt diese Lösung nicht.

Wie beziehe ich mich auf eine SVG-Schriftart, die in das aktuelle Dokument eingebettet ist?@font-face Erklärung?