изменить имя шрифта шрифтов Google, чтобы оно соответствовало определению в svg

У меня есть этот svg, который я использую в своем html:

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
    <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
        <circle cx="15" cy="15" r="15" stroke="#BBD1DD" stroke-width="2"/>
        <text fill="#F83A32" font-family="FiraSans-Medium, Fira Sans" font-size="14" font-weight="400">
            <tspan x="12" y="19">1</tspan>
        </text>
    </g>
</svg>

обратите внимание, у меня, наверное, около 100 таких svg, я получаю их от дизайнера, и постоянно что-то меняется, и я получаю новые и заменяю старые

теперь проблема:

Семейство/имя шрифта FiraSans-Medium с таким названием не существует.

Таким образом, значок отображает неправильный шрифт.

Вероятно, правильным шрифтом будет Fira Sans с весом 500.

Я включаю свои шрифты следующим образом:

  <link href="https://fonts.googleapis.com/css?family=Exo+2:200,500|Fira+Sans:300,300i,400,400i,500" rel="stylesheet">

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


svg fonts css google-fonts font-family
person Toskan    schedule 23.10.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Файл, на который вы ссылаетесь, представляет собой не более чем таблицу стилей. Вы можете скачать этот файл и включить его со своего сервера, переписав используемое имя:

/* ...more @font-face rules... */
@font-face {
  font-family: 'Fira Sans'; /* replace with 'FiraSans-Medium' */
  font-style: normal;
  font-weight: 500;
  src: local('Fira Sans Medium'), local('FiraSans-Medium'), url(https://fonts.gstatic.com/s/firasans/v8/zM2u8V3CuPVwAAXFQcDi4Ogdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

В качестве отступления: в то время как FiraSans-Medium указано в таблице стилей как локальное имя для font-weight="500", font-weight="400", определенное в svg, указано там как FiraSans-Regular. Но это вам придется обсудить с вашим дизайнером.

person ccprog    schedule 23.10.2017
comment
какой облом, похоже, он не работает даже с этим ... кажется, что svgs не может подобрать такие пользовательские шрифты. см. здесь: codepen.io/anon/pen/ZXNrmX - person Toskan; 23.10.2017
comment
следующий вопрос здесь: aka-font-family" title="img src x svg make svg выбирает начертание шрифта, определенное мной, ака семейство шрифтов"> stackoverflow.com/questions/46897973/ - person Toskan; 23.10.2017
comment
В этом ручке вы загружаете svg с тегом <img>, что означает в отдельном контексте, который не имеет доступа к таблице стилей родительского контекста. Это не сработает. - person ccprog; 23.10.2017