У меня есть отдельный HTML-документ, который я хочу распространять без каких-либо внешних зависимостей. В этом документе я использую нестандартный шрифт -, который установили только некоторые из моих пользователей.
Для тех пользователей, у которых шрифт не установлен, я включаю копию шрифта во встроенный документ SVG вверху . (В этом примере я использую шрифт с одним -глифом, в реальном документе используется полный шрифт.)
Шрифты SVG выглядят не так красиво, как обычные шрифты, поэтому я хочу, чтобы шрифт SVG использовался только в том случае, если он не установлен локально. Если бы шрифт был определен во внешнем документе SVG, я мог бы использовать его с более низким приоритетом, чем локально -установленный шрифт, подобный этому:(скрипка)
Alphabet
К сожалению, ни один из очевидных вариантов не работает для шрифта в текущем документе :(. скрипка)
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
?