하나의 글꼴이 들어가면 모든 웹 글꼴이 나옵니다.
이 도구의 목적은 웹 서비스에 의존하거나 네트워크 연결을 요구하지 않고 임의의 글꼴 파일에서 웹 친화적 인 글꼴 형식의 생성 및 @font-face css 규칙을 자동화하는 것입니다. 이 도구는 필요한 경우 인라인 데이터 URL을 생성 할 수 있습니다.
임베디드 글꼴 호환성을 극대화하는 방법에 대한 자세한 내용은 CSS-tricks.com의 사용 @Font-Face 기사를 참조하십시오.
./setup # Fetch and build third-party libraries
./bin/generate-webfonts MyFont.ttf -o assets/ # Convert a font 드라이버 스크립트는 generate-webfonts . 가장 기본적으로 글꼴 파일을 인수로 받아들이고 변환 된 모든 글꼴을 디렉토리로 뱉어냅니다. 또한 적절한 @font-face 규칙에 대한 CSS도 생성 할 수 있습니다.
./bin/generate-webfonts -o assets MyFont.ttf --css MyFont.css
기본 출력 형식을 사용하는 위의 명령은 다음 파일을 생성합니다.
MyFont.cssassets/MyFont.woffassets/MyFont.woff2assets/MyFont.ttfassets/MyFont.eotassets/MyFont.svg MyFont.css 파일에는 다음이 포함됩니다.
@font-face {
font-family : 'MyFont' ;
src : url ( 'assets/MyFont.eot' );
src : url ( 'assets/MyFont.eot?#iefix' ) format ( 'embedded-opentype' ) ,
url ( 'assets/MyFont.woff2' ) format ( 'woff2' ) ,
url ( 'assets/MyFont.woff' ) format ( 'woff' ) ,
url ( 'assets/MyFont.ttf' ) format ( 'truetype' ) ,
url ( 'assets/MyFont.svg#MyFont' ) format ( 'svg' );
}개념적으로 입력 파일 목록과 출력 형식 목록이 주어지면 변환기는 일치하는 입력 파일을 복사하고 파일을 변환하여 간격을 채우기 위해 모든 출력 형식 요구 사항을 충족 시키려고 시도합니다. 기본 글꼴 변환기의 제한으로 인해 요청되지 않은 일부 중간 형식이 생성 될 수 있습니다.
그 형식 일치하는 파일이 이미 입력 중 하나로 나열된 경우 명령은 특정 출력 형식의 파일을 생성하지 않습니다. 이 경우 입력 파일은 단순히 대상 디렉토리에 복사됩니다 (또는 이미 출력 디렉토리에있는 경우 혼자 남겨집니다). 해당 파일이 인수에 나열되지 않은 경우, 출력 디렉토리에 이미 존재하더라도 새로 변환 된 파일로 덮어 씁니다.
보다 고급 사용량은 아래 옵션을 참조하십시오.
스크립트 bin/generate-webfonts 글꼴 파일 목록을 입력 및 여러 옵션으로 허용합니다.
-o --output변환 된 파일의 대상 디렉토리. 인라인 글꼴 만 생성 되더라도 중간 파일을 유지하려면 대상 디렉토리가 필요합니다.
-f --format쉼표로 구분 된 출력 형식 목록. 가능한 형식은 다음과 같습니다.
:inline 으로 접미사가있는 모든 형식은 FONT가 CSS 파일에 파일에 대한 URL이 아닌 Base64- 인코딩 된 데이터 URL로 인쇄됩니다.
기본 형식 목록은 eot,woff2,woff,ttf,svg 입니다.
-c --css 생성 된 CSS 파일의 경로. 사용 - stdout에 사용하십시오. 생략하면 CSS가 생성되지 않습니다.
-p --prefix 생성 된 CSS에 사용 된 글꼴 경로의 접두사. 예를 들어, 스타일 시트가 css/ 에서 제공되고 글꼴에서 fonts/ 로 제공되는 경우 접두사를 ../fonts/ 로 설정해야합니다. 기본 접두사는 출력 디렉토리의 이름입니다.
--font-familyCSS 파일에 사용 된 글꼴 패밀리의 이름. 기본값은 첫 번째 입력 파일의 기본 이름입니다.
--verbose실행 중에 장황한 출력을 보여주십시오.
-v --version디스플레이 버전.
generate-webfonts 다음 글꼴 형식을 지원합니다.
한 가지 예외로 위에 나열된 형식으로 전환 할 수 있습니다. EOT를 다른 형식으로 변환 할 수 없습니다.
발전기는 글꼴 변환을위한 3 개의 타사 라이브러리/도구를 활용합니다. 단일 도구가 모든 글꼴 형식을 지원하지 않기 때문에 생성기의 작업은 두 글꼴 형식으로 변환하는 데 사용할 수있는 좋은 변환기 체인을 파악하는 것입니다. 후드에서는 실제로 종속성 그래프에서 가장 짧은 경로 문제로 구현됩니다.
사용 된 타사 도구는 다음과 같습니다.
Fontforge는 EOT 또는 WOFF2 형식을 지원하지 않지만 많은 수의 글꼴 형식을 읽고 생성하는 것을 지원합니다. 멍청하게 빠르게 sfntly 라이브러리는 TTF 글꼴을 EOT 또는 WOFF로 변환하여 이러한 격차 중 하나를 다룰 수 있습니다. Google의 Woff2 변환기는 Woff2와 TTF 형식을 변환하는 데 사용됩니다.
위에서 언급 한 바와 같이, run ./setup 통해 타사 라이브러리를 다운로드하여 구축하십시오. running ./setup 은 generate-webfonts 찾을 수있는 Sfntly 및 Woff2 컨버터 저장소를 로컬로 확인합니다. 패키지 관리자를 사용하여 또는 웹 사이트에서 직접 Fontforge를 설치하십시오.
설정 프로세스는 *닉스 환경을 가정합니다. 현재 Windows 에서이 도구를 설정하는 데 도움이되지 않습니다.
설정 스크립트를 실행하려면 다음 명령이 필요합니다.
gitjava 와 javacmvn (Maven) generate-webfonts 스크립트 자체에는 Python 3이 필요합니다.
책임감있게 변환하십시오! 글꼴 제작자의 저작권을 존중하십시오.