Вставить шрифт SVG в автономный HTML-файл

Я хочу использовать один глиф из Font Awesome в файле HTML. Я хочу создать файл HTML без внешних зависимостей, поэтому мне хотелось бы, чтобы объявление style@font-face и определение символа SVG были неотъемлемыми частями HTML-файла.Вставить шрифт SVG в автономный HTML-файл

Вот что я пытался (jsfiddle), но глифы не появляются:

<!DOCTYPE html> 
<head> 
    <style> 
    @font-face { 
     font-family: "Custom"; 
     src: local("Custom"), url("fonts.svg#font") format("svg"); 
    } 
    a { 
     text-decoration: none; 
     font-family: Custom; 
    } 
    </style> 
</head> 

<body> 
<svg 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    display="none"> 

    <defs> 
    <font id="font"> 
     <font-face font-family="Custom" /> 
     <glyph 
     glyph-name="undo" 
     unicode="@" 
     d="m857 350q0-87-34-166t-91-137-137-92-166-34q-96 0-183 41t-147 114q-4 6-4 13t5 11l76 77q6 5 14 5 9-1 13-7 41-53 100-82t126-29q58 0 110 23t92 61 61 91 22 111-22 111-61 91-92 61-110 23q-55 0-105-20t-90-57l77-77q17-16 8-38-10-23-33-23h-250q-15 0-25 11t-11 25v250q0 24 22 33 22 10 39-8l72-72q60 57 137 88t159 31q87 0 166-34t137-92 91-137 34-166z" horiz-adv-x="857.1" /> 
    </font> 
    </defs> 
</svg> 

<a href="#undo">@</a> 
</body> 
</html>

Что я пропустил или ошибался? Или я пытаюсь сделать что-то, что не поддерживается?

источник

2015-10-29 James Newton

Какой браузер вы используете для этого? Ваша скрипка отлично работает в Safari.

Заканчивать это от MDN хотя https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts

SVG Fonts в настоящее время поддерживаются только в Safari и Android Browser. Internet Explorer не рассмотрел реализацию этого, функция была удалена из Chrome 38 (и Opera 25) и . Firefox отложил ее реализацию на неопределенное время, чтобы сконцентрировать на WOFF. Другие инструменты, как и плагин Adobe SVG Viewer, Batik и части поддержки Inkscape. Встраивание шрифтов SVG.

источник

2015-10-29 21:53:09

Ah. ОК. Приятно знать, что я получил синтаксис правильно:) –

@JamesNewton Попробуйте загрузить шрифт Awesome code и просто вытащить его, которые вам не нужны. Он использует css для добавления контента в ': before', поэтому он работает в нескольких браузерах, а затем вы можете просто реализовать свой значок в соответствии с инструкциями Font Awesome. –

Вставить шрифт SVG в автономный HTML-файл

ответ

Смежные вопросы