SVG
Skapa teckensnitt

Introduktion

Anmärkningar

ett enkelt teckensnitt

Ett enkelt exempel på ett svg-teckensnitt. Några saker att notera här:

• koordinatsystemet för glyferna står i motsats till det vanliga koordinatsystemet i svg. y-axeln pekar uppåt . Punkten 0,0 är i det nedre högra hörnet.
• Alla banor i ett teckensnitt måste ritas moturs.
• I de flesta verktyg stöds endast attributet d för glyph-elementet. Barnelement fungerar inte, även om de är tekniskt tillåtna.

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

Om du har bredare eller smalare glyfer, ändra bara horizon-adv-x på själva glyph-elementet.

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

typsnitt plockning

unicode-egenskapen används för senare val av glyph. Du kan använda enkla bokstäver eller unicode-kodpunkter samt ligaturer (kombination av bokstäver eller unicode-kodpunkter)

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

glyfer väljs alltid vid första matchen, så har alla ligaturer innan någon enskild karaktär.

unicode-kodpunkter kan skrivas i decimal { eller i hexadecimal &#x1f notation.

upp-, ned- och baslinje

Egenskaperna per-em är en av de viktigaste teckensnittsegenskaperna. Det används för att ge något värde på någon annan egendom någon mening.

CSS2-teckensnittspecifikationen har en fin definition av em sqare :

Vissa värden, såsom breddemetrik, uttrycks i enheter som är relativt en abstrakt kvadrat vars höjd är det avsedda avståndet mellan linjer av typ i samma typstorlek

standardbaslinjen är 0 på em-fyrkanten. För beräkning och justering av linjens höjd är de två egenskaperna upp- och nedstigningar av största vikt.

Uppstigning är det maximala avståndet från baslinjen till den högsta punkten för din största glyph. Vanligtvis är det 1em, så det värde du gav för enheter per person.

Nedstigning är det maximala avståndet från baslinjen till den lägsta punkten i någon glyph i ditt teckensnitt.

Här är ett teckensnitt med glyfer som ger en linje på den lägsta och högsta punkten samt vid baslinjen.

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

Upp- och nedstigning används för att bestämma linjens höjd. Enheter per em och baslinje används för att bestämma position och storlek i förhållande till andra använda teckensnitt.