SVG + встроенный шрифт: как отобразить текст курсивом? - PullRequest
Новая
       32

SVG + встроенный шрифт: как отобразить текст курсивом?

1 голос
/ 14 мая 2011

Моя цель - создать самосодержащий векторный логотип в SVG = я хочу объединить все глифы шрифтов в этом файле SVG.

Для одной части моего текста мне нужен специальный шрифт курсивом. Шрифт, который я хочу (Desyrel), существует только в одном файле .ttf. Затем я преобразовал этот шрифт в SVG (пробовал разные онлайн-инструменты и FontForge).

Затем я создал файл SVG с текстом, который я хочу отобразить, и встроенными определениями шрифта svg (только для выбранных глифов). Это выглядит так: 

<?xml version="1.0" encoding="UTF-8"?>
<svg width="800px" height="300px" version="1.1" xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
     <font id="font1" horiz-adv-x="614" >
        <font-face font-family="Desyrel" units-per-em="2048" />
        <glyph unicode="-" d="M109 301v166h376v-166h-376z" />
...
     </font>
  </defs>

   <text x="230" y="100" font-family="Desyrel" font-size="110px" font-style="italic">myText</text>
</svg>

Когда я делаю это, мой шрифт не отображается курсивом. Я попытался изменить стиль шрифта в определении font-face на «обычный» или даже «курсив».

Проблема в том, что я знаю, что этот шрифт может отображаться курсивом. Если я включу в свой SVG: 

<style type="text/css">
   <![CDATA[
     @font-face {
       font-family: 'Desyrel2'; 
       font-weight: normal;
       font-style: normal;
       src: url("Desyrel.ttf")
     }
   ]]>
</style>

и используйте это семейство шрифтов для текста, текст действительно отображается курсивом. Но это решение противоречит моей первоначальной цели иметь автономный SVG ...

Я не знаю много о шрифтах или SVG, но я много искал в Интернете, чтобы найти решения или подсказки для моей проблемы ... вот почему мне нужна ваша помощь!

1 Ответ

6 голосов
/ 14 мая 2011

Ваш шрифт не курсив, в случае TTF происходит то, что браузер синтезирует курсив, добавляя небольшое перекосное преобразование.Кажется, что это не сделано для SVG-шрифтов (вероятно, недосмотр).

Решение состоит в том, чтобы использовать fontforge для наклона глифов (если это все, что вам нужно), в меню это «Элемент> Стиль> Курсив»... "(подробнее здесь ).

Затем сгенерируйте шрифт svg.

...