SVG
글꼴 만들기

소개

비고

간단한 글꼴

svg 폰트의 간단한 예제. 여기서 주목할 몇 가지 사항은 다음과 같습니다.

• 글리프의 좌표계는 svg의 일반적인 좌표계와 반대입니다. y 축은 위쪽을 가리 킵니다 . 0,0 점은 오른쪽 아래 모서리에 있습니다.
• 글꼴의 모든 경로는 시계 반대 방향으로 그려야합니다.
• 대부분의 도구에서 glyph 요소의 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="abc"
• unicode="ab"
• unicode="abab"
• unicode="a"
• unicode="b"

글리프는 항상 첫 번째 일치로 선택되므로 모든 문자가 하나의 문자 앞에 있어야합니다.

유니 코드 코드 포인트는 십진수로 쓸 수 있습니다 { 또는 16 진수 &#x1f 표기법으로 표시됩니다.

상승, 하강 및 기준선

units-per-em 속성은 가장 중요한 글꼴 속성 중 하나입니다. 다른 속성의 모든 값에 의미를 부여하는 데 사용됩니다.

CSS2 글꼴 사양에는 em sqare 라는 멋진 정의가 있습니다 .

폭 메트릭스와 같은 특정 값은 동일한 유형 크기의 유형 라인 사이의 거리가 높이 인 추상 사각형과 관련된 단위로 표현됩니다

기본 기준선은 em 사각형 에서 0 입니다. 선 높이 계산 및 정렬 목적으로 두 개의 특성이 상승 및 하강이 가장 중요합니다.

상승은 기준선에서 가장 큰 글리프의 가장 높은 점까지의 최대 거리입니다. 일반적으로 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>

상승 및 하강은 선 높이를 결정하는 데 사용됩니다. 단위 당 기준 및 기준은 사용 된 다른 글꼴과 관련하여 위치와 크기를 결정하는 데 사용됩니다.