Использование @ 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>

screenshot

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

  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 декларация?

 Jeremy Banks04 мар. 2016 г., 23:33
Читатели должны знать, что поддержка шрифтов SVG была удалена из Google Chrome и никогда не была реализована в Mozilla Firefox. Однако Apple по-прежнему поддерживает его в Safari.
 Jeremy Banks13 апр. 2016 г., 02:26
Очевидно, что в настоящее время Firefox поддерживает глифы на основе SVG ... встроенные в файлы OpenType! Оу ...

Ответы на вопрос(2)

а затем имя встроенного шрифта:

p {
    font-family: MyFontLocalName, MyFontEmbeddedName;
}

http://jsfiddle.net/gilly3/xX6Bv/5/

ЕслиMyFontLocalName установлен на компьютере пользователя, этот шрифт будет использоваться, в противном случаеMyFontEmbeddedName будет использоваться.

 23 апр. 2014 г., 02:15
jsfiddle не работает в FF :(
 11 июл. 2012 г., 20:02
@ Джереми - Хитрый. Я действительно думал об этом раньше. Лучшее, что я придумаю, - это уродливый хак с использованием JavaScript: поместите фрагмент текста в диапазон с нужным шрифтом и резервным шрифтом очень большого размера, напримерfont-size: 200px; font-family: MyEmbeddableFont, Arial, Проверьте ширину интервала относительно ожидаемой ширины тестового шрифта. Если ширина отключена, динамически загружайте шрифт.
 Jeremy Banks11 июл. 2012 г., 19:46
Это хорошее предложение, но оно не сработает для меня. Я извиняюсь за то, что не упомянул об этом изначально в своем посте: я разрешаю пользователям импортировать фрагменты из локальных документов, которые ссылаются на шрифт по его стандартному имени, так что это не будет работать для них. :( (я имел в виду шрифты с разными именами раньше, «X» и «X Embedded».)

играть на скрипке)

<style>
@font-face {
  font-family: "My Font";
  src: url("data:application/octet-stream;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+CiAgPGZvbnQgaWQ9Ik15Rm9udEVsZW1lbnQiPgogICAgPGZvbnQtZmFjZSBmb250LWZhbWlseT0iTXlGb250IiAvPgogICAgPGdseXBoIHVuaWNvZGU9IkEiIGhvcml6LWFkdi14PSI5NTAiIGQ9Ik0wLDBMMCwxMDBMMTAwLDEwMEwxMDAsMjAwTDAsMjAwTDAsMzAwTDEwMCwzMDBMMTAwLDQwMEwyMDAsNDAwTDIwMCw1MDBMMzAwLDUwMEwzMDAsNjAwTDQwMCw2MDBMNjAwLDYwMEw2MDAsNTAwTDcwMCw1MDBMNzAwLDQwMEw4MDAsNDAwTDgwMCwzMDBMOTAwLDMwMEw5MDAsMjAwTDgwMCwyMDBMODAwLDEwMEw5MDAsMTAwTDkwMCwwTDYwMCwwTDYwMCwxMDBMNzAwLDEwMEw3MDAsMjAwTDgwMCwyMDBMODAwLDMwMEwxMDAsMzAwTDEwMCwyMDBMMjAwLDIwMEwyMDAsMTAwTDMwMCwxMDBMMzAwLDBMMCwwTTMwMCw0MDBMNjAwLDQwMEw2MDAsNTAwTDMwMCw1MDBMMzAwLDQwMFoiIC8+ICAgIAogIDwvZm9udD4KPC9kZWZzPjwvc3ZnPgo=") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
    Alphabet
</p>

Есть одно предостережение: вы не можете использовать идентификатор идентификатора (#MyFont) с URI данных, как это. Поэтому вы можете иметь только один шрифт в закодированном файле, а не иметь несколько и ссылаться на них по отдельности. (Не то, чтобы вы хотели; дублирование данных для нескольких встроенных шрифтов в объявлении для каждого шрифта было бы огромной тратой пространства.)

 Jeremy Banks11 июл. 2012 г., 22:18
Да, это то, что я собираюсь сделать. Было бы плохим решением использовать фрагменты, но если бы это сработало, я мог бы сделать это, если бы мне было ужасно лень. Я хотел предупредить других ленивых читателей, что это не сработает; это не было очевидно для меня.
 Jeremy Banks11 июл. 2012 г., 19:56
Хорошая идея, спасибо, это хорошо работает! Я отредактировал ваше сообщение, включив в него пример и замечание, которое я отметил. Однако я пока не собираюсь принимать этот ответ, еслиis решение, которое позволяет мне ссылаться на шрифт в обычном внедренном документе SVG.
 11 июл. 2012 г., 22:12
Вместо того, чтобы использовать фрагменты, вы просто объявите другой блок font-face с другим шрифтом?
 12 июл. 2012 г., 10:53
Вы не должны использовать «application / octet-stream» если это svgfont, это должно быть "image / svg + xml". AFAIK тыcan использовать идентификатор идентификатора, по крайней мере, я уверен, что он работал в Opera последний раз, когда я пробовал. И вы всегда должны использовать спецификатор идентификатора с svgfonts, если вы не привыкли зависеть от неопределенного поведения. Вот фиксированная скрипка, показывающая, как она должна выглядеть:jsfiddle.net/fPg3z
 Jeremy Banks19 июл. 2012 г., 00:32
@ ErikDahlstr & # xF6; m Рабочий проект WC3 для шрифтов CSS3 сказал мне, что & quot;in the case of SVG fonts, the URL points to an element within a document containing SVG font definitions. If the element reference is omitted, a reference to the first defined font is implied& Quot ;. Когда я пытаюсь указать фрагмент в URL-адресе данных, он разрывается в Chrome. О, Боже...

Ваш ответ на вопрос