SVG
Создание шрифтов

Вступление

замечания

простой шрифт

Простой пример шрифта svg. Несколько вещей, чтобы отметить здесь:

• система координат глифов находится в противоречии с обычной системой координат в svg. ось y указывает вверх . Точка 0,0 находится в нижнем правом углу.
• Все дорожки в шрифте должны быть нарисованы против часовой стрелки.
• В большинстве инструментов поддерживается только атрибут d элемента глифа. Элементы ребенка не будут работать, хотя они технически разрешены.

<svg xmlns="http://www.w3.org/2000/svg">
  <font id = "myFont"
        horiz-adv-x   = "1000"
        vert-origin-x = "0"
        vert-origin-y = "0" >
    <font-face font-family  = "myFont"
               font-weight  = "normal"
               units-per-em = "1000">
      <font-face-src>
        <font-face-name name="myFont"/>
      </font-face-src>
    </font-face>`
    <glyph unicode="a" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />
    <glyph unicode="b" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />
  </font>
</svg>

Если у вас более широкие или более узкие глифы, просто измените horiz-adv-x на сам элемент глифа.

<glyph unicode="a" horiz-adv-x="512" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />

подбор шрифтов

свойство unicode используется для последующего выбора глифов. Вы можете использовать простые буквы или кодовые страницы unicode, а также лигатуры (сочетание букв или кодов Unicode)

• unicode="abc"
• unicode="ab"
• unicode="abab"
• unicode="a"
• unicode="b"

глифы всегда выбираются с помощью первого совпадения, поэтому имеют все лигатуры перед любым символом.

unicode codepoints могут быть записаны в decimal { или в шестнадцатеричном &#x1f .

восхождение, спуск и базовый уровень

свойство units-per-em является одним из самых важных свойств шрифта. Он используется, чтобы придавать любому значению любого другого свойства какое-либо значение.

спецификация шрифта CSS2 имеет хорошее определение em sqare :

Определенные значения, такие как метрики ширины, выражаются в единицах, которые относятся к абстрактному квадрату, высота которого представляет собой предполагаемое расстояние между строками типа одного размера

базовая линия по умолчанию равна 0 в em-квадрате. для расчета высоты линии и выравнивания цели восхождения и спуска двух первостепенной важны.

Восхождение - это максимальное расстояние от базовой линии до самой высокой точки вашего самого большого глифа. Обычно это 1em, поэтому значение, которое вы дали для единиц по-em.

Спуск - это максимальное расстояние от базовой линии до самой низкой точки в любом знаке вашего шрифта.

Вот шрифт с глифами, отображающий линию на самой низкой и самой высокой точке, а также на базовой линии.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <font id = "myFont"
        horiz-adv-x   = "1000"
        vert-origin-x = "0"
        vert-origin-y = "0" >
    <font-face font-family  = "myFont"
               font-weight  = "normal"
               units-per-em = "1000"
               descent="500"
               ascent="1000">
      <font-face-src>
        <font-face-name name="myFont"/>
      </font-face-src>
    </font-face>`
    <glyph unicode = "a" d = "M0 900h1000v100h-1000z" />
    <glyph unicode = "b" d = "M0 0h1000v100h-1000z" />
    <glyph unicode = "c" d = "M0 -500h1000v100h-1000z" />
  </font>
</svg>

Подъем и спуск используются для определения высоты линии. Единицы по умолчанию и базовая линия используются для определения местоположения и размера по сравнению с другими используемыми шрифтами.