SVG не использует шрифт внутри HTML

У меня есть SVG, который отлично отображается в Chrome, но когда я использую его на HTML-странице, он не использует правильный шрифт, а вместо него используется значение по умолчанию.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css">
      <![CDATA[
        /* latin-ext */
        @font-face {
          font-family: 'Roboto-Black';
          src: url(./Roboto-Black.ttf)
        }
      ]]>
    </style>
  </defs>
  <text style="font-family: 'Roboto-Black'; font-weight:normal;" transform="matrix(1, 0, 0, 1, 239.2, 51.394)">
    <tspan x="-101.469" y="27" font-family="Roboto-Black" font-size="72" fill="#000000">TEST</tspan>
  </text>
</svg>

SVG отлично отображается в Chrome, но при отображении на HTML-странице используется неправильный шрифт.

<html>
  <head></head>
  <body>
    <img src="test.svg" width="100%">
  </body>
</html>

Что мне не хватает?

Дополнение: хотя ниже было предложено подходящее решение, я обнаружил, что проще включить код svg непосредственно в html, вместо того, чтобы ссылаться на файл svg. Таким образом, проблемы не возникает.


svg html fonts font-face truetype
person ratlan    schedule 26.05.2015    source источник
comment
Файлы SVG, встроенные в тег img, не наследуют стили CSS, включая шрифты.   -  person Stephen Thomas    schedule 26.05.2015
comment
То же самое и здесь, в Firefox, я получаю ошибку downloadable font: download failed… CSS. Родная программа просмотра изображений отображает это нормально, поэтому путь к шрифту (также показанный в сообщении об ошибке) определенно правильный и существует.   -  person Sebastian Simon    schedule 26.05.2015
comment
Просто выстрел в темноте: вы пробовали преобразовать шрифт в woff и добавить файл в ту же папку?   -  person Martin Thoma    schedule 26.05.2015
comment
Это не сработает @moose. Изображения должны быть завершены в одном файле.   -  person Robert Longson    schedule 26.05.2015

Ответы (2)


arrow_upward
10
arrow_downward

При использовании в качестве изображения (через тег html <img>, тег SVG <image> или как фоновое изображение CSS) SVG должен состоять из одного файла, чтобы защитить конфиденциальность пользователя.

Вы можете использовать шрифт, но вам нужно будет преобразовать данные шрифта в URI данных и вставьте шрифт в файл SVG.

person Robert Longson    schedule 26.05.2015
comment
Спасибо, это сработало: @font-face { font-family: 'Roboto-Black'; src: url("data:application/font-truetype;charset=utf-8;base64,..."); } где ... - закодированный шрифт. Я использовал эту службу для кодирования файла: http://www.motobit.com/util/base64-decoder-encoder.asp?charset=utf-8&acharset= - person ratlan; 26.05.2015

arrow_upward
-1
arrow_downward

Как я это решил:

Вместо использования тега <img> я включил содержимое файла .svg:

<?php 
  $svg_file = file_get_contents(get_template_directory_uri().'/test.svg');
  echo $svg_file;
?>

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

person TheoPlatica    schedule 16.09.2020