Название неоднозначно; Позвольте мне уточнить: у меня есть изображение svg, которое включает текст, который я хочу отобразить с помощью специального шрифта.
Тем не менее, по-видимому, появляются новые проблемы, которые не появляются при встраивании шрифтов на страницу html. Кроме того, некоторые браузеры (а именно, Firefox), похоже, обрабатывают in-page svg ("в теге img ") иначе, чем при рендеринге svg напрямую.
<defs>
<style>
@font-face {
font-family: "Open Sans";
src: local("Open Sans"),
local("OpenSans"),
url('https://example.com/OpenSans-Regular.eot') format('eot'),
url('https://example.com/OpenSans-Regular.woff') format('woff'),
url('https://example.com/OpenSans-Regular.ttf') format('truetype');
}
/* ...
Насколько я знаю, если бы это была веб-страница, она бы успешно выполнялась практически во всем мире. Однако, как svg, я не могу заставить его работать. Текущий формат работает практически везде, кроме IE10 (и, предположительно, более старых версий): иногда шрифт загружается, а в другое время его нет. Буквально каждое второе обновление использует системный резервный шрифт. Включая файл woff inline в качестве файла с кодировкой base64, но это нарушает его для Safari (и изменение порядка его не исправляет).
Есть ли встроенный шрифт с перекрестным браузером в svg-изображении? (Опять же, я не имею в виду вложение шрифта svg на веб-страницу, но визуализацию встроенного шрифта внутри изображения svg.)
В Firefox, по крайней мере, изображения должны быть полностью автономными, т.е. все в одном файле по соображениям конфиденциальности.
Если вы хотите, чтобы шрифты работали, вам нужно будет закодировать их base64 и внедрить их как URL-адреса данных в SVG файле, т.е.
@font-face {
font-family: 'Open Sans';
src: url("data:application/x-font-ttf;base64,[base-encoded font here]");
}
В итоге я использовал это:
<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 | | | |
+------------+--------+-------+-------+-----------+
По http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-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';
}
}
В любом случае, вложение шрифта просто неправильно, поскольку файлы огромны.