Использование @ font-face со шрифтом SVG, встроенным в текущую HTML-страницу
У меня есть отдельный HTML-документ, который я хочу распространять, без каких-либо внешних зависимостей. Я использую в этом документе нестандартный шрифт, который будет установлен только некоторыми моими пользователями.
Для тех пользователей, у которых не установлен шрифт, я включаю копию шрифта во встроенный документ SVG в верхней части<body>, (Я использую шрифт с одним глифом для этого примера, настоящий документ использует полный шрифт.)
<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 выглядят не так хорошо, как обычные шрифты, поэтому я хочу, чтобы шрифт SVG использовался только в том случае, если шрифт не установлен локально. Если шрифт был определен во внешнем документе SVG, я мог бы использовать его с более низким приоритетом, чем локально установленный шрифт, например: (играть на скрипке)
<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>
К сожалению, ни один из очевидных вариантов, кажется, не работает для шрифта в текущем документе :(играть на скрипке)
src: local("My Font"),
url("./#MyFontElement") format("svg"),
url("./#MyFontElement"),
url("#MyFontElement") format("svg"),
url("#MyFontElement");
Даже без@font-face декларации, шрифт уже доступен в документе какMyFont,font-family указано в<font-face />, Тем не менее, это будет использоваться наhigher приоритет, чем собственный шрифт с именемMyFontтак что это не решение проблемы.
Я надеялся, что смогу сослаться на это какlocal("MyFont")... (играть на скрипке)
src: local("My Font"), /* local */
local("MyFont"); /* embedded */
... но это тоже не работает.
Я мог бы дать встроенному шрифту другое имя и использовать его с более низким приоритетом,style="font-family: LocalFont, EmbeddedFont", но я разрешаю пользователям импортировать фрагменты из локальных файлов в документ, и эти локальные файлы будут ссылаться на шрифт только по стандартному имени. Было бы возможно переписать эти ссылки, когда они импортированы, но мне не нравится это решение.
Как обратиться к шрифту SVG, встроенному в текущий документ из@font-face декларация?