SVG에 Google 웹 글꼴을 포함 시키려면 어떻게합니까?

나는 새로운 웹 기술의 장점, 특히 HTML5, CSS3 및 SVG의 장점에 대한 기사를 내 사이트에 작성하고 있는데, 후자는 다른 방법으로 효과적으로 이미지에서 텍스트를 선택할 수 있다는 장점이 있습니다.

SVG를 처음 사용하고 Illustrator에서 처음으로 알맞은 그래픽을 만들었습니다. 태그에 Ubuntu 글꼴에 대한 GWF 스크립트가있는 페이지에 포함 시켰습니다. 우분투 글꼴은 일반 텍스트로 올바르게 표시되지만 SVG 에서이 트릭이 작동하려면 Google 스크립트가 SVG 자체에 포함되어 있어야합니다. 어떻게해야합니까?

base64 인코딩을 사용하여 CSS에 글꼴을 포함시킵니다. <style />요소 를 사용하여 CSS와 유사한 SVG 문서에 스타일을 적용 할 수 있습니다 . 따라서 WOFF 글꼴이 있으면 다음과 같이 포함하십시오.

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

...base64로 인코딩 된 글꼴 데이터는 어디에 있습니까 ?

Typekit의 스타일 시트를 보면 이에 대한 예제를 찾을 수 있습니다. 나는 font/woff사람들이 그것을해야한다고 주장하는 것을 보았 기 때문에 MIME 유형 이 올바른지 확실하지 않습니다 application/font-woff. 비록 font/woff, font/truetype, font/opentype, 등이 더 인기가있을 것으로 보인다.

또는 실제로 SVG 버전의 웹 글꼴을 사용 하여 SVG 글꼴의 설명 마크 업을 문서에 포함시킬 수 있습니다 (브라우저 지원은 여전히 ​​주석에서 주석으로 매우 제한적 임).

그러나 SVG 사양에 따라 외부 글꼴 에 연결할 수도 있습니다 . 해당 글꼴을 참조하는 여러 SVG 문서를 사용하려는 경우 최상의 솔루션 인 것 같습니다.

<defs>같은 섹션

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

공장.

Nano를 사용하여 Google 웹 글꼴을 SVG에 직접 포함시킬 수 있습니다 . SVG를 자동으로 스캔하고 필요한 글꼴 만 선택적으로 포함하여 우분투 글꼴이 모든 최신 브라우저에서 동일하게 표시되도록합니다. 필자의 경우 SVG에 Roboto를 포함시켜야했습니다.

면책 조항 : 저는 Nano 팀과 함께 있고, 우리도 이전과 같은 문제에 직면 해 있었으므로 Nano를 구축하여 가려움증을 긁기로 결정했습니다. 도움이 되길 바랍니다.

편집 : 다음은 장면 뒤에서 일어나는 일에 대한 간단한 설명입니다.

SVG에 글꼴을 포함하려면 먼저 어떤 글꼴 패밀리가 사용되는지 알아야합니다. 그런 다음이 글꼴 파일을 찾아서 다운로드해야합니다. 다운로드 한 후에는 일반, 굵게, 기울임 꼴 및 굵은 기울임 꼴을 기본 64 인코딩으로 변환해야합니다. 수동으로 수행하는 경우 많은 파일에 대해 굵은 체를 사용하는 파일과 그렇지 않은 파일을 확인하는 작업은 막대한 양의 작업입니다. 그런 다음 4 개의 기본 64 인코딩 문자열을 모두 SVG로 복사해야합니다.

그렇기 때문에 Nano를 빌드하고 SVG를 자동으로 스캔하고 사용중인 글꼴 만 삽입해야합니다. 예를 들어, 굵게 표시되지 않거나 텍스트가 없으면 글꼴이 포함되지 않습니다. SVG를 Nano로 드래그 앤 드롭하면됩니다. 매력처럼 작동합니다! 자세한 내용은 https://vecta.io/blog/making-svg-easier-to-use 에서 확인할 수 있습니다.

이것은 단순화 된 것일 수도 있지만 Google에서 글꼴을 zip 파일로 다운로드 한 다음 Illustrator가 필요에 따라 SVG 파일 출력으로 변환하도록 고려 했습니까?

이것은 아직 시도하지 않았으므로 이론적이지만 이론 상으로는 효과가있는 것 같습니다.

<desc>태그 뒤에 다음을 추가하십시오

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

내 답변을 업데이트하십시오. 나는이 페이지에서 Nano를 사용하는 다른 대답을 선호합니다 : https://graphicdesign.stackexchange.com/a/121950/45239

시스템에 웹 글꼴을 다운로드하여 설치하고 SVG를 생성했다고 가정하면 (아래 설명과 같은 단계를 많이 사용하지만 "Font : Convert To Outlines"를 선택하지 않은 경우) SVG를 Nano에 업로드 할 수 있습니다 "내장 글꼴 : 예"옵션을 확인하고 다운로드를 클릭하십시오.

내 이전 답변 :

선택 가능한 텍스트와 SEO를 사용하여 기꺼이 희생하려는 경우 :

1. 웹 글꼴을 다운로드하십시오.
2. 로컬로 설치하십시오.
3. Adobe Illustrator 열기
4. 텍스트를 입력하십시오.
5. 파일> 내보내기> 다른 이름으로 내보내기…
6. ".SVG"를 선택하십시오

7. 다음 설정을 선택하십시오.

   • 스타일링 : 인라인 스타일
   • 글꼴 : 윤곽선으로 변환
   • 이미지 : 보존
   • 객체 ID : 레이어 이름
   • 십진수 : 2
   • (활성화) 축소
   • (활성화) 응답

8. 선택적으로 결과 svg를 https://vecta.io/nano에 업로드 하십시오 (파일 크기를 8.2 % 줄일 수있었습니다)