الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل

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 chars مخصصة للإدخال اليدوي المبسط مع الخطوة 10 (ارتفاع الشريط = الرقم).
  • A-ZA-Z للدخل اليدوي مع الخطوة 2 ، خففت في الحواف A و Z (ارتفاع شريط = عدد الحروف).
  • u + 0100-017f لـ 0..127 قيم مع الخطوة 1 ( char = String.fromCharCode(0x100 + value) ).

محاور متغيرة

علامة يتراوح تقصير معنى
wght 1 - 1000 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 فئة ، أي. يتم التعرف عليه ككلمة بواسطة regexp ويمكن تحديدها باستخدام Ctrl + → أو انقر نقرًا مزدوجًا. على سبيل المثال. مقاطع الموجة مفصولة أو - يمكن اختيارها بالنقر المزدوج.
  • يتم قطع الشخصيات خارج النطاقات المرئية إلى 0 ، على سبيل المثال. ، t إلخ
  • -–._* خريطة إلى 1 قيمة ، | خرائط لقيمة الحد الأقصى ، ▁▂▃▄▅▆▇█ خريطة إلى أشرطة المقابلة.
  • لهجة الحادة ́ (U+0301) تحولات شريط 1 خطوة لأعلى ، لهجة محيط ̂ (U+0302) 10 خطوات لأعلى. على سبيل المثال. u0101u0302u0302u0301u0301u0301 تحولات 23 خطوة لأعلى.
  • Accent Grave ̀ (U+0300) تحولات شريط 1-Step لأسفل ، 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.
  • موحد كائن الخط الموحد-تنسيق قابل للقراءة الإنسان الموحد لتخزين بيانات الخط.
  • ميزة SPEC - تحديد ميزات خط Opentype.
  • Adobe-vontible-font-prototype-خط متغير مثال.
  • DesignSpace XML Spec-تنسيق قابل للقراءة البشرية لوصف الخطوط المتغيرة.
  • Adobe فارغ - خط الأحرف فارغة الخط المتغير.
  • الشرر - الخط البديل مع غرض مماثل.

؟

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل