Overused Grotesk 다운로드 - Overused Grotesk 소스 코드 다운로드

Overused Grotesk

글꼴 다운로드

v0.5-alpha.1

다운로드

과도한 그로테스크

과도한 "스위스"유형 디자인의 멍청한 조롱에서 반쯤 시끄럽게 사용되는 Grotesk는 유비쿼터스 Helvetica의 가장 구별되는 특징을 모방함으로써 카피 캣으로 바뀝니다. 그러나 서체는 순전히 카피 캣이 멈추지 않습니다. 기발하고 무의미한 다용도와 다국어가되기를 원합니다.

이 서체는 원래 Fontforge 사용자를위한 "전시회"형태로 사용되었습니다. 불행히도, 불량 워크 플로 및 열악한 경영진과 함께 매우 빠른 개발로 인해이 프로젝트는 절대 초보자에게는 빠르게 이해할 수 없었습니다. sooo ooopsies

글꼴은 무료 및 오픈 소스이며 모든 기여는 크게 높이 평가 될 것입니다. 이 서체를 누군가에게 보여 주거나 글꼴 컬렉션에 제출할 계획이라면 이 저장소를 연결 해야합니다. 필수는 아니지만 많은 두통을 절약합니다 (나를 믿으십시오).

과도한 그로테스크

스타일

스타일 이름	wght	wdth	-	스타일 이름	wght	wdth	SLNT
빛	300	100	-	가벼운 이탤릭체	300	100	-10
책	350	100	-	책 이탈리아	350	100	-10
로마 인	400	100	-	이탤릭체	400	100	-10
중간	500	100	-	중간 이탤릭체	500	100	-10
Semibold	600	100	-	semibold 이탈리아	600	100	-10
용감한	700	100	-	대담한 이탤릭체	700	100	-10
엑스트라 폴드	800	100	-	외부의 이탤릭체	800	100	-10
검은색	900	100	-	검은 색 이탤릭체	900	100	-10

주목할만한 기능 및 추가

베트남 및 키릴 문자 포함 (현지화 된 형태)
12 스타일 세트 + 5 문자 변형
서브 & 슈퍼 스크립트, 분모 및 분자, 슬래시 0, 표 형수, 수학 표기법, 분수
.ttf, .otf, .woff, .woff2 및 변수 .ttf fonts
IPA 문자 (반 유적 인 명성 및 톤 문자, 여전히 매우 기본)
통화 기호 : $ ¢ £ ¤ ¥ ֏฿₠₡₢₣₤₥₦₧₨₩₪₫ € ₭₮₯₰₱₲₳₴₵₶₷₸ ₹ ₺₻₼₽₾₿
화살표 (너무 많은 방법, 84 정확히)
스크립트와 같은 재량 인대 (FI, FF, FL, FFI, FFL)

계획

v1.0 -v2.0 이전

더 많은 폭
그리스 사람
작은 캡
더 많은 악센트 편지 구축 (라틴-특이 적)

⏳ 진행 중

미세 조정
이탤릭체 마무리

웹의 변수 글꼴

소스와 릴리스 폴더에는 .woff2 변수 글꼴이 포함되어 있으며 웹 사이트에 포함시킬 수 있으며 다음의 라인에 무언가를 포함하여 CSS 사용을 참조하십시오.

base.css

 : root {
    --font-sans : "Overused Grotesk" , -apple-system , BlinkMacSystemFont , "Segoe UI" , "Roboto" , "Oxygen" , "Ubuntu" , "Cantarell" , "Fira Sans" , "Droid Sans" , "Helvetica Neue" , sans-serif;
    --font-serif : Georgia , Times , serif;
    --font-mono : Menlo , Courier , monospace;
}

@font-face {
  font-family : "Overused Grotesk" ;
  src :
    url ( "../fonts/OverusedGrotesk-VF.woff2" ) format ( "woff2 supports variations" ) ,
    url ( "../fonts/OverusedGrotesk-VF.woff2" ) format ( "woff2-variations" );
  font-weight : 300 900 ;
}

누적 레이아웃 시프트를 줄이려면 글꼴을 사전로드하고 글꼴면 옵저버를 사용하여 글꼴을 빠르게 표시 할 수 있습니다.

base.html

 <!DOCTYPE html >
< html lang =" en " >
  < head >
    < title > Static HTML is King ? </ title >
    < meta charset =" UTF-8 " >
    < meta name =" viewport " content =" width=device-width " >
    < link rel =" stylesheet " href =" /css/base.css " >
    < link rel =" preload " href =" /fonts/OverusedGrotesk-VF.woff2 " as =" font " type =" font/woff2 " crossorigin >
  </ head >
  < body >

    < main >
      < h1 > Static HTML is King ? </ h1 >
    </ main >
 
    <!--
    https://fontfaceobserver.com/
    To load a font, call the load method on a FontFaceObserver instance.
    It’ll return a promise that resolves when the font loads, or rejected when the font fails to load.
    -->
   < script src =" /js/fontfaceobserver.js " > </ script >
   < script >
   var font = new FontFaceObserver ( 'Overused Grotesk' ) ;

   font . load ( ) . then ( function ( ) {
     console . log ( 'Overused Grotesk has loaded.' ) ;
   } ) . catch ( function ( ) {
     console . log ( 'Overused Grotesk failed to load.' ) ;
   } ) ;
   </ script >

  </ body >
</ html >