Шрифт Google не отображается в коде SVG

На этой странице у меня есть код SVG. Файл SVG показывает только основной тип шрифта ОБЫЧНЫЙ. Хотя я использовал все варианты шрифта (курсив, полужирный, полужирный, полужирный, темный).

Я пробовал как метод @import, так и ссылку rel, как внутри файла, так и во внешнем CSS. Те были бы соответственно.

@import url ('https://fonts.googleapis.com/css?family=Vollkorn:400,400i,600,600i,700,700i,900,900i ');

I have also looked into this solution, where it is set within the SVG file with @font-face method (tried bold, regular, etc., to no avail):

Фрагмент кода:

<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 5390.3 959.3" style="enable-background:new 0 0 5390.3 959.3;" xml:space="preserve">
<style type="text/css">
	@import {font-family: 'Vollkorn', serif; src: url('Vollkorn/Vollkorn-Bold.ttf')}
    svg{font-family: 'Vollkorn', serif;}
    .....


svg fonts google-fonts font-face
person Andrejs Zavaruhins    schedule 03.09.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваша проблема в том, что, даже если вы устанавливаете

svg{font-family: 'Vollkorn', serif;}

классы для вашего текста переоценивают семейство шрифтов со следующими правилами.

.st22{font-family:'Vollkorn-SemiBold';}

«Волкорн-Полуболд» нигде не определяется. Измените свои классы так, чтобы они использовали только "Волкорн"

.st22{font-family:'Vollkorn';}

или удалите их совсем, так как теперь они ничего не делают.

person Paul LeBeau    schedule 03.09.2018
comment
Если вы используете предложение @import с таблицей стилей googleapi, различные варианты шрифтов импортируются, но вы должны настроить таргетинг на них, установив font-family:Vollkorn;font-weight:600 и т. Д. - person ccprog; 03.09.2018
comment
Это работает. Спасибо. Я хочу, чтобы Google автоматизировал это для SVG, отлавливая шрифты по их соответствующим именам. Illustrator просто выводит имя шрифта при экспорте кода SVG или сохранении файла SVG. - person Andrejs Zavaruhins; 03.09.2018
comment
Дополнительный вопрос, если можно. Код SVG некорректно отображается в некоторых местах, где стили текста меняются на подчеркивание. Таким образом, я получаю знак +, перекрывающий слово. Думаю, мне нужно изменить координаты матрицы, чтобы исправить это, или есть лучший способ сделать это? - person Andrejs Zavaruhins; 03.09.2018
comment
Кажется, что Illustrator напрямую позиционирует различные фрагменты текста при каждом изменении стиля. Я не уверен, есть ли способ остановить это в Illustrator. Вам не нужно начинать новую позицию <text> элемент только для того, чтобы сделать слово подчеркнутым. См. до и после. Однако обратите внимание, что длина текста, очевидно, будет другой. Но вы можете использовать атрибут textLength, чтобы исправить это (см. Пример после). - person Paul LeBeau; 04.09.2018