Как правильно отображать нестандартные шрифты в SVG? [Дубликат]

В итоге я использовал это:

<defs>
<style type="text/css">
<![CDATA[
    @font-face {
        font-family: "Open Sans";
        src: local("Open Sans"), /* IE */
            local("OpenSans"),
            url("data:application/vnd.ms-fontobject;charset=utf-8;base64,{$fontEot}") format('embedded-opentype'),
            url("data:application/x-font-woff;charset=utf-8;base64,{$fontWoff}") format('woff'),
            url('https://example.com/OpenSans-Regular.ttf') format('truetype');
    }
]]>
</style>

Поддержка:

+------------+--------+-------+-------+-----------+
|            | Win XP | Win 7 | iOS 6 | OS X 10.9 |
+------------+--------+-------+-------+-----------+
| IE  8      |     no |    no |       |           |
| IE  9      |        |   yes |       |           |
| IE 10      |        |   yes |       |           |
| IE 11      |        |   yes |       |           |
| Safari 4   |        |   yes |       |           |
| Safari 5.0 |        |   yes |       |           |
| Safari 5.1 |        |    no |       |           |
| Safari 7   |        |    no |       |       yes |
| Safari iOS |        |       |   yes |           |
| FF  3.6    |     no |    no |       |           |
| FF  4      |    yes |   yes |       |           |
| FF 27      |    yes |   yes |       |       yes |
| Chrome 14  |    yes |   yes |       |           |
| Chrome 33  |    yes |   yes |       |       yes |
| Opera 10.6 |    yes |   yes |       |           |
| Opera 19   |    yes |       |       |           |
+------------+--------+-------+-------+-----------+

Per http://gs.statcounter.com/#browser_version_partially_combined-ww- ежемесячно-201310-201312-бар это составляет общую поддержку где-то около 85%.

Единственное, что действительно беспокоит, - это то, что Safari 5.1 вообще не отображает текст. Я должен был сделать Safari только резерв в объявлении css:

/* Win Safari fallback */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari only */
    ::i-block-chrome,text {
        font-family: 'Verdana';
    }
}

В любом случае, вложение шрифта просто кажется неправильным, поскольку файлы огромны.

В Firefox, по крайней мере, изображения должны быть полностью автономными, т.е. все в одном файле для соображений неприкосновенности .

Если вы хотите, чтобы шрифты работали, вам придется base64 закодирует их и вставляет их как URL-адреса данных в файл SVG, т. е.

@font-face {
    font-family: 'Open Sans';
    src: url("data:application/x-font-ttf;base64,[base-encoded font here]");
}