Использование шрифта @font -со шрифтом SVG, встроенным в текущую HTML-страницу

У меня есть отдельный HTML-документ, который я хочу распространять без каких-либо внешних зависимостей. В этом документе я использую нестандартный шрифт -, который установили только некоторые из моих пользователей.

Для тех пользователей, у которых шрифт не установлен, я включаю копию шрифта во встроенный документ SVG вверху . (В этом примере я использую шрифт с одним -глифом, в реальном документе используется полный шрифт.)


  
    
        
  

Шрифты SVG выглядят не так красиво, как обычные шрифты, поэтому я хочу, чтобы шрифт SVG использовался только в том случае, если он не установлен локально. Если бы шрифт был определен во внешнем документе SVG, я мог бы использовать его с более низким приоритетом, чем локально -установленный шрифт, подобный этому:(скрипка)


Alphabet

screenshot

К сожалению, ни один из очевидных вариантов не работает для шрифта в текущем документе :(. скрипка)

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

Даже без объявления @font-faceшрифт уже доступен в документе как MyFont, font-family, указанный в . Однако он будет использоваться с более высоким приоритетом, чем родной шрифт с именем MyFont, так что это не решение.

Я надеялся, что смогу сослаться на него как local("MyFont")... (. скрипка)

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

... но это тоже не работает.

Я мог бы дать встроенному шрифту другое имя и использовать его с более низким приоритетом, style="font-family: LocalFont, EmbeddedFont", но я разрешаю пользователям импортировать фрагменты из локальных файлов в документ, и эти локальные файлы будут ссылаться на шрифт только по стандартному имени.. Можно было бы переписать эти ссылки при их импорте, но мне это решение не нравится.

Как обратиться к шрифту SVG, встроенному в текущий документ, из объявления @font-face?

5
задан Jeremy Banks 11 July 2012 в 17:44
поделиться