จากการเยาะเย้ยที่โง่เขลาของการออกแบบประเภท "สวิส" ที่เกินความจริงไปจนถึงการทำงานกึ่งจริงจัง grotesk ที่ใช้มากเกินไปกลายเป็นเลียนแบบโดยเลียนแบบคุณสมบัติที่โดดเด่นที่สุดของ helvetica ที่แพร่หลาย อย่างไรก็ตามแบบอักษรไม่ได้หยุดที่การเลียนแบบอย่างหมดจด มันต้องการที่จะเป็นอเนกประสงค์และหลายภาษาแม้ว่าจะเล่นโวหารและไม่น่าสนใจ
แบบอักษรนี้เดิมใช้เป็นรูปแบบของ "นิทรรศการ" สำหรับผู้ใช้ Fontforge ที่หลงลืม น่าเสียดายที่เนื่องจากการพัฒนาที่รวดเร็วอย่างยอดเยี่ยมพร้อมกับเวิร์กโฟลว์ที่ไม่ดีและการจัดการที่ไม่ดีโครงการจึงกลายเป็นสิ่งที่เข้าใจยากอย่างรวดเร็วสำหรับผู้เริ่มต้นอย่างแน่นอน โอ๊ะโอ
แบบอักษรฟรีและโอเพนซอร์ซและการมีส่วนร่วมใด ๆ จะได้รับการชื่นชมอย่างมาก หากคุณวางแผนที่จะแสดงแบบอักษรนี้ให้กับใครบางคนหรือส่งไปยังคอลเลกชันแบบอักษรโปรดอย่าลืม เชื่อมโยงที่เก็บนี้ มันไม่ได้บังคับ แต่ช่วยให้ปวดหัวได้มาก (เชื่อใจฉัน)


| ชื่อสไตล์ | wght | wdth | SLNT | - | ชื่อสไตล์ | wght | wdth | SLNT |
|---|---|---|---|---|---|---|---|---|
| แสงสว่าง | 300 | 100 | 0 | - | สว่างตัวเอียง | 300 | 100 | -10 |
| หนังสือ | 350 | 100 | 0 | - | จองตัวเอียง | 350 | 100 | -10 |
| โรมัน | 400 | 100 | 0 | - | ตัวเอียง | 400 | 100 | -10 |
| ปานกลาง | 500 | 100 | 0 | - | ตัวเอียงขนาดกลาง | 500 | 100 | -10 |
| กึ่ง | 600 | 100 | 0 | - | Semibold italic | 600 | 100 | -10 |
| ตัวหนา | 700 | 100 | 0 | - | ตัวเอียงหนา | 700 | 100 | -10 |
| extrabold | 800 | 100 | 0 | - | ตัวเอียง extrabold | 800 | 100 | -10 |
| สีดำ | 900 | 100 | 0 | - | ตัวเอียงสีดำ | 900 | 100 | -10 |
หลังจาก 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 ;
}เพื่อลด การเปลี่ยนเลย์เอาต์แบบสะสม คุณสามารถโหลดแบบอักษรล่วงหน้าและใช้ Font Face Observer เพื่อแสดงแบบอักษรอย่างรวดเร็ว
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 > โครงการนี้อยู่ภายใต้ใบอนุญาต SIL Open Font 1.1 หากจำเป็นโปรดบันทึกหรือพิมพ์เอกสารนี้สำหรับการอ้างอิงในอนาคต
คุณสามารถมีส่วนร่วมในโครงการนี้โดยการเปิดปัญหาการสร้างคำขอดึงหรือโดยการแก้ไขแหล่งข้อมูลโดยตรง
สำหรับข้อมูลเพิ่มเติมดูที่ MD