wavefont

คลื่น

ตัวอักษรสำหรับการเรนเดอร์ข้อมูลแถบแนวตั้ง: รูปคลื่น, สเปกตรัม, ไดอะแกรม, ฮิสโตแกรม, คอลัมน์ ฯลฯ

สนามเด็กเล่น • Google Fonts • V-Fonts • Wavearea

การใช้งาน

วาง wavefont [rond, yela, wght] .woff2 ลงในไดเรกทอรีโครงการของคุณและใช้รหัสนี้:

 < style >
@font-face {
	font-family: wavefont;
	font-display: block;
	src: url(./Wavefont[ROND,YELA,wght].woff2) format('woff2');
}
.wavefont {
	--wght: 400;
	font-family: wavefont;
	font-variation-settings: 'wght' var(--wght), 'ROND' 30, 'YELA' 0;
}
</ style >

<!-- Set values manually -->
< textarea id =" waveform " class =" wavefont " cols =" 100 " >
abcdefghijklmnopqrstuvwwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
</ textarea >

< script >
// Set values programmatically (more precise)
waveform . textContent = Array . from ( { length : 100 } , ( _ , i ) => String . fromCharCode ( 0x100 + i ) ) . join ( '' )
</ script > 

ช่วง

แถบ Wavefont สอดคล้องกับค่าตั้งแต่ 0 ถึง 100 ซึ่งกำหนดให้กับอักขระที่แตกต่างกัน:

• 0-9 ตัวอักษรใช้สำหรับอินพุตด้วยตนเองที่ง่ายขึ้นด้วยขั้นตอนที่ 10 (ความสูงของแท่ง = หมายเลข)
• A-Za-Z สำหรับอินพุตด้วยตนเองด้วยขั้นตอนที่ 2 อ่อนลงที่ขอบ A และ Z (ความสูงของแท่ง = จำนวนตัวอักษร)
• U + 0100-017F สำหรับ 0..127 ค่าด้วยขั้นตอนที่ 1 ( char = String.fromCharCode(0x100 + value) )

แกนผันแปร

ติดแท็ก	พิสัย	ค่าเริ่มต้น	ความหมาย
wght	1 - 1,000	400	ความกว้างของบาร์หรือความกล้าหาญ
ROND	0 - 100	100	รัศมีเส้นขอบหรือความกลม (เปอร์เซ็นต์)
YELA	-100 - 100	-100	การจัดตำแหน่ง: ด้านล่าง, กึ่งกลางหรือด้านบน

เพื่อปรับแกนผ่าน CSS:

. wavefont {
  font-variation-settings : 'wght' var ( --wght , 40 ) , 'ROND' var ( --rond , 0 ) , 'YELA' var ( --align , 0 );
  letter-spacing : 1 ch ; /* 1ch unit === 1 bar width */
}

คุณสมบัติ

• ช่วงค่าค่าและความกว้างเข้ากันได้กับ linefont ดังนั้นตัวอักษรจึงสามารถเปลี่ยนการรักษาความเชื่อมโยงของภาพได้
• charcodes ที่มองเห็นอยู่ภายใต้ การทำเครื่องหมายอักขระ หมวดหมู่ Unicode เช่น ได้รับการยอมรับว่าเป็น Word โดย Regexp และสามารถเลือกได้ด้วย Ctrl + → หรือดับเบิลคลิก เช่น ส่วนของรูปคลื่นคั่นด้วย หรือ - สามารถเลือกได้ด้วยการคลิกสองครั้ง
• อักขระที่อยู่นอกช่วงที่มองเห็นจะถูกตัดเป็น 0 เช่น , t ฯลฯ
• -–._* แผนที่เป็น 1 ค่า | แผนที่ถึงค่าสูงสุด ▁▂▃▄▅▆▇█ แผนที่ไปยังแถบที่สอดคล้องกัน
• Accent Acute ́ (U+0301) เลื่อนแถบขึ้น 1 ขั้นตอน, Accent circumflex accent ̂ (U+0302) ขึ้น 10 ขั้นตอน เช่น u0101u0302u0302u0301u0301u0301 เลื่อน 23 ขั้นตอนขึ้นไป
• Accent Grave ̀ (U+0300) เลื่อนแถบลง 1 ขั้นตอน Caron ̌ (U+030C) เลื่อนลง 10 ก้าวเช่น u0101u030cu0300u0300u0300 เลื่อนลง 13 ก้าว
• Caret Span คือ -20..120 ดังนั้นความสูงบรรทัด = 1.4 คือการเลือกที่ไม่ทับซ้อนกันน้อยที่สุด

แพ็คเกจ JS

แพ็คเกจ WaveFont เสริมแสดงฟังก์ชั่นที่คำนวณสตริงจากค่าเพื่อความสะดวกของคุณ

 import wf from 'wavefont'

// get characters for values from 0..127 range
wf ( 0 , 1 , 50 , 99 , 127 , ... ) // ĀāIJţŤ... 

อาคาร

make build

• การทดสอบ
• ร่ายมนตร์
• ข้อความ
• น้ำตก

ดูด้วย

• Linefont-font-face สำหรับการเรนเดอร์ข้อมูลเชิงเส้น

การอ้างอิง

• คู่มือ Google Fonts
• ข้อมูลจำเพาะของวัตถุแบบฟอนต์แบบครบวงจร-รูปแบบที่สามารถอ่านได้แบบมนุษย์สำหรับการจัดเก็บข้อมูลตัวอักษร
• ฟีเจอร์ไฟล์ข้อมูลจำเพาะ - การกำหนดคุณสมบัติแบบอักษร Opentype
• Adobe-variable-font-prototype-ตัวอย่างตัวแปรตัวแปร
• DesignSpace XML SPEC-รูปแบบที่มนุษย์อ่านได้สำหรับการอธิบายแบบอักษรตัวแปร
• Adobe blank - ตัวอักษรตัวแปรตัวแปรตัวแปรว่างเปล่า
• Sparks - ตัวอักษรทางเลือกที่มีวัตถุประสงค์คล้ายกัน

-