☰

명령줄에서 글꼴 하위 설정 및 웹 글꼴로 전환

tag-icon • tag-icon command-line fonts
명령줄에서 글꼴 하위 설정 및 웹 글꼴로 전환

다양한 아이콘 글꼴(예:글꼴굉장하다그리고글리피콘). 이것들은 훌륭한 글꼴이지만 내가 결코 사용하지 않는 글리프가 많이 포함되어 있습니다. ~65KB는 4%만 사용하는 것에 비해 상대적으로 큰 다운로드입니다.

사용하는 문자만 포함하는 글꼴을 하위 집합으로 설정할 수 있습니다. 당신은 이것을 통해 이것을 할 수 있습니다글꼴 다람쥐(그리고 아마도 다른 것들도) .OTF를 웹 글꼴(다른 브라우저를 위한 EOT, WOFF2, WOFF, TTF 및 SVG 팩)로 변환하는 동안. 이것은 훌륭하게 작동합니다.

저는 보통 프로젝트가 끝날 때쯤에 그런 일을 합니다.한 번... 하지만 캐릭터 범위가 변경되면 전체 과정을 다시 거쳐야 합니다. 그리고 그것은 완전히 수동적입니다. 그리고 지루하다.

필요한 문자 목록을 생성할 수 있으므로 필요한 것은 글꼴의 하위 집합을 지정할 수 있는 것뿐입니다. 그런 다음 보너스 포인트를 얻으려면웹폰트 팩을 생성합니다). 나는 Fontforge(스크립팅 API가 있음)를 통해 모든 것이 가능하다고 생각하지만 이에 대한 경험이 없습니다.

답변1

이게 원래 생각했던 것보다 더 크네요. 모든 작업을 수행하려면 몇 가지 추가 도구가 필요하며 일부는 Ubuntu용으로 잘 패키지되어 있지 않습니다. ~/src/작업을 완료하는 데 Good Enough™가 필요하다면 시스템에 설치하는 대신 아마도 생성해야 할 사용자 정의 설치를 수행할 것입니다 .

sudo apt-get install fontforge python-scour woff-tools build-essential

git clone http://github.com/behdad/fonttools ~/src/fonttools
ln -s ~/src/fonttools/Tools/pyftsubset ~/bin/subset  # vanity symlink

git clone https://github.com/metaflop/ttf2eot.git ~/src/ttf2eot
cd ~/src/ttf2eot
make
cd -

git clone --recursive https://github.com/google/woff2.git ~/src/woff2
cd ~/src/woff2
make clean all
cd -

다음 단계는 우리에게 필요한 유니코드 문자가 무엇인지 알아내는 것입니다. 우리는 16진수 형식의 문자 목록을 작성하겠습니다 0x####. 이를 식별하는 것은 .lessFont Awesome에 사용하는 기능에 대해 내 파일을 선택하는 경우일 뿐이지 만 원시 content: "..."그룹을 찾는 것과 비슷한 작업을 수행할 수도 있습니다.

perl -n -e '/\.font-awesome..(\w+)/ && print "0xf$1\n"' less/*.less | tail -n+2 | sort -u

이제 목록이 있으므로 FontForge에 하위 집합을 지시할 수 있습니다 FontAwesome.otf.

~/src/fonttools/Tools/pyftsubset fonts/FontAwesome.otf \
--unicodes-file=<(perl -n -e '/\.font-awesome..(\w+)/ && print "0xf$1\n"' less/sbnew-*.less\
| tail -n+2 | sort -u) --output-file=fonts/fa-subset.otf --no-recommended-glyphs --no-hinting

그러면 새 .otf글꼴이 생성됩니다. 그런 다음 이를 웹 글꼴 세트로 재구성할 수 있습니다.

# generate TTF and SVG
fontforge -lang=pe -script <(echo -e 'Open($1)\nGenerate($1:r + ".ttf")\nGenerate($1:r + "big.svg")') fonts/fa-subset.otf

# Clean up SVG
scour -i fonts/fa-subset.big.svg -o fonts/fa-subset.svg --enable-id-stripping --enable-comment-stripping --shorten-ids

# Create WOFF
sfnt2woff fonts/fa-subset.otf

# Create WOFF2 for most modern browsers
~/src/woff2/woff2_compress fonts/fa-subset.ttf

# Create EOT (eotfast might be better)
~/src/ttf2eot/ttf2eot fonts/fa-subset.ttf > fonts/fa-subset.eot

그 결과 글꼴 세트가 훨씬 작아졌습니다. 나란히 비교한 내용은 다음과 같습니다.

-rw-r--r-- 1 oli oli  62K Dec 11  2013 FontAwesome.otf
-rw-rw-r-- 1 oli oli 2.0K Aug 27 15:16 fa-subset.otf

-rwxr-xr-x 1 oli oli  38K Dec 11  2013 fontawesome-webfont.eot
-rw-rw-r-- 1 oli oli 3.1K Aug 27 15:31 fa-subset.eot

-rwxr-xr-x 1 oli oli 198K Dec 11  2013 fontawesome-webfont.svg
-rw-rw-r-- 1 oli oli 4.4K Aug 27 15:37 fa-subset.svg

-rwxr-xr-x 1 oli oli  79K Dec 11  2013 fontawesome-webfont.ttf
-rw-rw-r-- 1 oli oli 2.9K Aug 27 15:22 fa-subset.ttf

-rwxr-xr-x 1 oli oli  44K Dec 11  2013 fontawesome-webfont.woff
-rw-rw-r-- 1 oli oli 1.9K Aug 27 15:25 fa-subset.woff
-rw-rw-r-- 1 oli oli 1.4K Aug 27 16:01 fa-subset.woff2

관련 정보