SVG
Lettertypen maken

Invoering

Opmerkingen

een eenvoudig lettertype

Een eenvoudig voorbeeld van een svg-lettertype. Een paar dingen om op te merken:

• het coördinatensysteem van de glyphs is in tegenstelling tot het gebruikelijke coördinatensysteem in svg. de y-as wijst naar boven . Het punt 0,0 bevindt zich in de rechter benedenhoek.
• Alle paden in een lettertype moeten tegen de klok in worden getekend.
• In de meeste tools wordt alleen het d-kenmerk van het glyph-element ondersteund. Onderliggende elementen werken niet, hoewel ze technisch zijn toegestaan.

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

Als u bredere of smallere glyphs hebt, wijzigt u gewoon de horiz-adv-x op het glyph-element zelf.

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

lettertype kiezen

de eigenschap unicode wordt gebruikt voor latere glyph-selectie. U kunt eenvoudige letters of Unicode-codepunten gebruiken, evenals ligaturen (combinatie van letters of Unicode-codepunten)

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

glyphs worden altijd geselecteerd bij de eerste match, dus zorg ervoor dat alle ligaturen vóór een enkel karakter staan.

Unicode-codepunten kunnen in decimalen worden geschreven { of in hexadecimale &#x1f notatie.

stijgen, dalen en basislijn

de eigenschap units-per-em is een van de belangrijkste lettertype-eigenschappen. Het wordt gebruikt om elke waarde van een andere eigenschap een betekenis te geven.

de CSS2-lettertypespec heeft een mooie definitie van de em sqare :

Bepaalde waarden, zoals breedtemetingen, worden uitgedrukt in eenheden die relatief zijn aan een abstract vierkant waarvan de hoogte de beoogde afstand is tussen lijnen van het type in dezelfde typegrootte

de standaardbasislijn is 0 in het em-vierkant. voor de berekening van de lijnhoogte en uitlijning zijn de twee stijgingen en dalingen van het grootste belang.

Stijgen is de maximale afstand van de basislijn tot het hoogste punt van uw grootste glyph. Meestal is dat 1em, dus de waarde die je hebt gegeven voor eenheden per em.

Afdaling is de maximale afstand van de basislijn tot het laagste punt in een glyph van uw lettertype.

Hier is een lettertype met glyphs die een lijn weergeven op het laagste en hoogste punt en op de basislijn.

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

Stijgen en dalen worden gebruikt om de lijnhoogte te bepalen. Eenheden per em en basislijn worden gebruikt om de positie en grootte ten opzichte van andere gebruikte lettertypen te bepalen.