Używanie @ font-face z czcionką SVG osadzoną na bieżącej stronie HTML

Question

Jul 11, 2012, 07:29 PM

Używanie @ font-face z czcionką SVG osadzoną na bieżącej stronie HTML

Mam samodzielny dokument HTML, który chcę rozpowszechniać, bez żadnych zewnętrznych zależności. W tym dokumencie używam niestandardowej czcionki, którą zainstalowali tylko niektórzy moi użytkownicy.

Dla użytkowników, którzy nie mają zainstalowanej czcionki, dołączam kopię czcionki do osadzonego dokumentu SVG na górze<body>. (W tym przykładzie używam czcionki z jednym glifem, prawdziwy dokument używa pełnej czcionki).

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

Czcionki SVG nie wyglądają tak ładnie jak zwykłe czcionki, więc chcę, aby czcionka SVG była używana, jeśli czcionka nie jest zainstalowana lokalnie. Jeśli czcionka została zdefiniowana w zewnętrznym dokumencie SVG, mógłbym użyć go z niższym priorytetem niż czcionka zainstalowana lokalnie, taka jak ta: (skrzypce)

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

Niestety, żadna z oczywistych odmian wydaje się nie działać dla czcionki w bieżącym dokumencie: (skrzypce)

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

Nawet bez@font-face deklaracja, czcionka jest już dostępna w dokumencie jakoMyFont, thefont-family określony w<font-face />. Będzie to jednak używane w awyższy priorytet niż natywna czcionka o nazwieMyFont, więc to nie jest rozwiązanie.

Miałem nadzieję, że będę mógł się do tego odnieśćlocal("MyFont")... (skrzypce)

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

... ale to też nie działa.

Mogłem nadać czcionce wbudowanej inną nazwę i używać jej w niższym priorytecie,style="font-family: LocalFont, EmbeddedFont", ale pozwalam użytkownikom na importowanie fragmentów z lokalnych plików do dokumentu, a te lokalne pliki będą odnosić się do czcionki tylko według standardowej nazwy. Możliwe byłoby przepisanie tych odniesień, gdy zostaną zaimportowane, ale nie podoba mi się to rozwiązanie.

Jak odwołać się do czcionki SVG osadzonej w bieżącym dokumencie z a@font-face deklaracja?