SVG
Creando fuentes

Introducción

Observaciones

una fuente simple

Un ejemplo simple de una fuente svg. Algunas cosas a tener en cuenta aquí:

• el sistema de coordenadas de los glifos está en oposición al sistema de coordenadas habitual en svg. El eje y apunta hacia arriba . El punto 0,0 está en la esquina inferior derecha.
• Todas las rutas en una fuente deben dibujarse en sentido contrario a las agujas del reloj.
• En la mayoría de las herramientas solo se admite el atributo d del elemento glifo. Los elementos secundarios no funcionarán, aunque técnicamente están permitidos.

<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>

Si tiene glifos más anchos o más estrechos, simplemente cambie el horiz-adv-x en el elemento del glifo.

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

selección de fuentes

La propiedad Unicode se utiliza para la selección posterior de glifos. Puede usar letras simples o puntos de código Unicode, así como ligaduras (combinación de letras o puntos de código Unicode)

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

Los glifos siempre se seleccionan por primera coincidencia, así que tenga todas las ligaduras antes de cualquier carácter individual.

los puntos de código de Unicode se pueden escribir en decimal { o en notación hexadecimal &#x1f .

Ascenso, descenso y línea de base.

La propiedad units-per-em es una de las propiedades de fuente más importantes. Se utiliza para dar cualquier valor de cualquier otra propiedad cualquier significado.

La especificación de fuente CSS2 tiene una buena definición del em sqare :

Ciertos valores, como las métricas de ancho, se expresan en unidades que son relativas a un cuadrado abstracto cuya altura es la distancia prevista entre líneas de tipo en el mismo tamaño de tipo

la línea base por defecto está en 0 en la casilla em. Para los cálculos de altura de línea y alineación, las dos propiedades de ascenso y descenso son de la mayor importancia.

El ascenso es la distancia máxima desde la línea de base hasta el punto más alto de tu glifo más grande. En la práctica, eso es 1em, por lo que el valor que otorgó para unidades por em.

El descenso es la distancia máxima desde la línea de base hasta el punto más bajo en cualquier glifo de su fuente.

Aquí hay una fuente con glifos que representan una línea en el punto más bajo y más alto, así como en la línea de base.

<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>

Ascenso y descenso se utilizan para determinar la altura de la línea. Las unidades por em y la línea de base se utilizan para determinar la posición y el tamaño en relación con otras fuentes utilizadas.