SVG
Tworzenie czcionek

Wprowadzenie

Uwagi

prosta czcionka

Prosty przykład czcionki SVG. Kilka rzeczy do odnotowania tutaj:

• układ współrzędnych glifów jest przeciwny do zwykłego układu współrzędnych w svg. oś y jest skierowana w górę . Punkt 0,0 znajduje się w prawym dolnym rogu.
• Wszystkie ścieżki czcionki muszą być narysowane przeciwnie do ruchu wskazówek zegara.
• W większości narzędzi obsługiwany jest tylko atrybut d elementu glifu. Elementy potomne nie będą działać, chociaż są technicznie dozwolone.

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

Jeśli masz szersze lub węższe glify, po prostu zmień horiz-adv-x na samym elemencie glifu.

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

wybieranie czcionek

właściwość Unicode służy do późniejszego wyboru glifów. Możesz używać prostych liter lub znaków kodowych Unicode, a także ligatur (kombinacji liter lub znaków kodowych Unicode)

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

glify są zawsze wybierane przy pierwszym dopasowaniu, więc mają wszystkie ligatury przed dowolnym pojedynczym znakiem.

punkty kodowe Unicode można zapisywać dziesiętnie { lub w notacji szesnastkowej &#x1f .

wejście, zejście i linia bazowa

właściwość jednostki-na-em jest jedną z najważniejszych właściwości czcionek. Służy do nadawania znaczenia dowolnej innej właściwości.

specyfikacja czcionki CSS2 ma ładną definicję em sqare :

Niektóre wartości, takie jak miary szerokości, są wyrażane w jednostkach względem kwadratu abstrakcyjnego, którego wysokość jest zamierzoną odległością między liniami tekstu o tym samym rozmiarze

domyślna linia bazowa to 0 w kwadracie em. dla obliczania wysokości linii i do celów wyrównywania najważniejsze są dwa wejścia i zejścia.

Ascent to maksymalna odległość od linii podstawowej do najwyższego punktu największego glifu. Zazwyczaj jest to 1 em, więc wartość podana dla jednostek na em.

Opadanie to maksymalna odległość od linii podstawowej do najniższego punktu w dowolnym glifie czcionki.

Oto czcionka z glifami przedstawiającymi linię w najniższym i najwyższym punkcie, a także na linii podstawowej.

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

Wejścia i zejścia służą do ustalenia wysokości linii. Jednostki na em i linię bazową służą do określania położenia i rozmiaru w stosunku do innych używanych czcionek.