GoogleWebFonts FontFamilyPreviewImages

Google 웹 글꼴 - 글꼴 패밀리 미리보기 이미지

이 repo에는 모든 Google 글꼴의 표현이 포함 된 이미지가 포함되어 있습니다. 우리는 사용자가 API를 통해 Google Fonts를 통해 검색 할 수 있도록 앱 스텐실을 위해 필요했습니다. 그러나 우리는 (분명히) 글꼴이 어떻게 생겼는지 미리보기를 제공하기를 원했습니다.

우리는 글꼴을 메모리에로드 한 다음 그 사실을 보여줄 수 있었지만 이상적이지 않은 것 같습니다.

메모

호스팅 된 스크린 샷 버전에 관심이 있으시면 아래에 나와 있습니다 (사용자가 모달을 트리거 할 수 있도록 허용하고 해당 woff2 파일의 URL이 포함 된 이벤트를 버튼 클릭하는 버튼 클릭 버블 링) : [email protected]으로 알려주십시오.

이 앱에서 우리 앱이 이미지를 사용하는 방법에 대한 스크린 샷 :

파일이 왜 그렇게 많은가?

Google Fonts는 현재 수천 가지의 다른 글꼴 변형을 제공하지만 실제 이미지가 많이 있습니다. Google 글꼴은 일상적으로 한 버전에서 다른 버전으로 글꼴을 업데이트하기 때문입니다 (예 : V5 ~ V6). 그런 다음 이미지를 다시 렌더링하여 사용자가 표시하는 미리보기가 정확한지 확인합니다.

나는 후손을 위해 그 파일을 Repo에 남겨두기로 결정했습니다.

크기

현재 font-size 값이 48px 인 미리보기 이미지 만 제공합니다. 너비는 글꼴의 기본 너비를 존중합니다. 날카로운 디스플레이를 보장하기 위해 최대 높이 24px 의 미리보기 엄지를 하드 코드하는 것이 좋습니다.

파일의 이름 지정 협약 :

두 가지 예 : ABeeZee-400.v10.png 및 Cabin-400italic.v10.png
형식은 매우 간단합니다.

• 글꼴 이름 (비 히핀, 비 alphabetic 및 비 언어 문자가 제거됨)
• 대시 ( - )
• 글꼴 체중
• 글꼴이 이탤릭체로 된 버전 인 경우 글꼴 이후 italic 단어가 추가됩니다.
• 문자 v 에 앞서 버전 번호

이름-문자를 제거하는 데 사용하는 정규 표현은 다음과 같습니다. /[^A-Za-z0-9-]/