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 진수 
표기법으로 표시됩니다.
상승, 하강 및 기준선
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>
상승 및 하강은 선 높이를 결정하는 데 사용됩니다. 단위 당 기준 및 기준은 사용 된 다른 글꼴과 관련하여 위치와 크기를 결정하는 데 사용됩니다.