font template
1.0.0
قوالب خطية Adobe Illustrator التي تسمح لك بتحرير الأشكال من الرسوف (أحرف) تمامًا في ملف .ai واحد (أو في ملفاتها المنفصلة .woff . .ai .ttf .otf تريد) .woff2 ثم قم بتصديرها .svg الإنتاج النهائية.
نسخة جميلة من هذا البرنامج التعليمي على موقع الويب الخاص بي
font_template.ai (تنزيل): قالب خط Font Illustrator Adobe للرموز الأساسية والممتدة والأحرف اللاتينية (تغطية CP1252 كبيرة) ، كل الرسول الرسمية لها لوحة فني منفصلة ، بحيث يمكنك بسهولة تصدير كل منها كملف Glyph SVG فردي.font_template_single.ai (تنزيل): قالب خط الرسام Adobe لـ Glyph. إذا كنت تريد ، يمكنك استخدام هذا الملف بدلاً من (أو مع) font_template.ai .batch_import_svg.py (افتح ، ثم ctrl + s / cmd + s للحفظ): البرنامج النصي python الذي يمكنه استيراد ملفات SVG الفردية متعددة إلى ملف fontforge's .sfd font (ويمكنه تحويله اختياريا إلى ملفات الإنتاج ، أي .otf ، .ttf ، .woff ، .woff2 ، إلخ.) (بدلاً من تنزيل الملفات ، يمكنك أيضًا git clone https://github.com/tomchen/font-template.git أو تنزيل المستودع بالكامل)
( تأكد من استخدام أحدث إصدار من Fontforge ، وهو إصدار الذكرى العشرين (2020-11-07) (صفحة إصدار Github أو صفحة تنزيل fontforge.org). تعطل Windows Version 20200314 القديم عند استيراد ملفات SVG. )
افتح font_template.ai ، ارسم رسوماتك في طبقة "Glyph".
(لا يهم ما إذا كانت الرسول الرمزية الخاصة بك كانت جزئيًا وقليلًا خارج لوحها.)
بعد الانتهاء من رسم الحروف الرسومية ، إخفاء طبقة "مثال Glyph". انقر فوق "ملف" -> "تصدير" -> "تصدير للشاشات".
حدد الرسوم الحرارية التي تريد تصديرها (لا تحدد تلك الفارغة) ، حدد تنسيق "SVG" ، انقر فوق "تصدير Artboard".
توجد ملفات Glyph SVG الفردية التي تم تصديرها داخل مجلد "SVG" ، ضعها في مجلد يحتوي أيضًا على ملف البرنامج النصي batch_import_svg.py .
بالنسبة لمستخدمي Windows ، قم بتشغيل C:Program Files (x86)FontForgeBuildsfontforge-console.bat ،* انتقل إلى المجلد باستخدام cd <FOLDER_PATH> وتنفيذ البرنامج النصي Python باستخدام ffpython batch_import_svg.py . سيتم إنشاء ملف خط output.sfd .
بالنسبة لمستخدمي Mac أو Linux ، cd <FOLDER_PATH> وتنفيذ fontforge -lang=py -script batch_import_svg.py .
Program Files (x86) Program Files
افتح ملف الخط output.sfd . اضبط عرض Glyphs (استخدم مفتاح Shift لتحديد جميع الحروف الرسومية التي تريد ضبط العرض ، ثم ، في القائمة ، حدد "المقاييس" -> "عرض تلقائي" ، أو ، انقر نقرًا مزدوجًا على الرسول الرسمية وسحب خط الحدود يدويًا).
في القائمة ، حدد "ملف" -> "إنشاء الخطوط ..."
اكتب اسم الخط ، حدد تنسيق خط (عادةً ما يكون Truetype أو Opentype) ، انقر فوق الزر "إنشاء". ثم لديك خط الكمبيوتر الخاص بك مصنوع ذاتيا!
يمكنك التوقف هنا ولا تحتاج إلى قراءة الأقسام التالية.
يمكن استخدام قالب الخط هذا لرسم حروب غلاف واحد وإنتاج SVG Glyph SVG.
الصورة التالية تصور أدلة الحروف الرسومية واحدة.
في FontForge ، حدد Glyph أو افتح Glyph ، ثم انقر فوق "ملف" -> "استيراد ..." ، حدد "SVG" كـ "Format" ، حدد ملف Glyph SVG الخاص بك واستيراده.
تعديل ملف batch_import_svg.py إذا كنت ترغب في فتح ملف خط .sfd موجود ، أو إنشاء .otf ، .ttf ، .woff ، .woff2 ، بدلاً من القيام بذلك مع Fontforge GUI.
في قائمة fontforge ، انقر فوق "ملف" -> "تنفيذ البرنامج النصي"
نسخ ولصق: SelectWorthOutputting(); foreach Export("%e_%n.svg"); endloop;
حدد زر "FF" الشعاعي.
انقر فوق الزر "موافق".
إذا كان شكل Glyph يحتوي على مسارات متداخلة متعددة ، فسيكون من الأفضل الانضمام إليها (برنامج تعليمي لطيف على YouTube) بدلاً من تجميعها أو جعلها مسارًا مركبًا. تساعد هذه الخطوة على تجنب مشاكل تقديم الخطوط للمسارات المتداخلة. ومع ذلك ، بالنسبة للمسارات المنفصلة (غير المتداخلة) ، لا تتردد في استخدام "المجموعة" ( CTRL + G ) أو "مسار المركب" ("Object" -> "مسار المركب" -> "جعل").
بدلاً من إنشاء ملف خط مع Fontforge من Scrach ، من الجيد أحيانًا استخدام ملف خط مجاني ومفتوح المصدر كخط أساسي وتراجع. الخطوط النموذجية مفتوحة المصدر مع تغطية Glyph جيدة هي مصدر Adobe Sans Pro و Source Serif Pro. اختر وزنًا مثل "منتظم" ، اعتمادًا على احتياجاتك. افتح ملف الخط باستخدام Fontforge ، وقم بتحريره لإنشاء خطك. ومع ذلك ، إذا كنت تستخدم خطًا موجودًا ، فقد تحتاج إلى تحرير ليس فقط من الألف إلى الياء ، وأيضًا أرباحهم مثل "FF" و "Fi".
عندما تقوم بتحديد الحروف الرسومية في نافذة "تصدير الشاشات" الخاصة بـ Illustrator ، يجب ألا تحدد الرسوم الحرارية الفارغة ، وإلا ، سترى "أنا آسف أن هذا الملف معقد للغاية بالنسبة لي أن أفهم (أو خاطئ)" تحذير عند تنفيذ برنامج batch_import_svg.py . ومع ذلك ، لن يتوقف وسوف يستمر في إنشاء ملف output.sfd .
في 19 أغسطس 2020 44 comma تم تحديث ملف font_template.ai 44 , إذا قمت بتنزيل font_template.ai قبل 2020-08-19 وقمت بإنشاء ملف .ai استنادًا إلى الإصدار القديم ، فيمكنك اختياريًا ** تحديث أسماء Artboard في font_template.ai باستخدام أي من الطرق التالية:
.ai القديم إلى أحدث font_template.ai/other_files/update_artboard_names.js في Illustrator: افتح ملف .ai في Adobe Illustrator ، في القائمة ، انقر فوق "ملف" -> "البرامج النصية" -> "برنامج نصي آخر ..." ، ابحث عن ملف update_artboard_names.js وحدده ، انقر فوق "فتح" بعد التحديث ، حذف وتجديد ملفات Glyph SVG في مجلد SVG .
(**: إذا كنت تستخدم الإصدار القديم ولكن الحروف الرسومية تقتصر على أحرف ASCII الأساسية ، فلن تواجه أي مشكلة ذات صلة في ملف SVG Unicode ، فيمكنك عدم تحديث ملف .ai )
بمجرد أن يكون لديك الخط الخاص بك ، يمكنك استخدامه على صفحات الويب الخاصة بك (بما في ذلك مواقع الويب ، أو تطبيقات الويب ، أو تطبيقات سطح المكتب عبر الألواح المترجمة بالإلكترون ، أو حتى تطبيق MOPPLION Native / NativeScript).
يمكن أن يكون خطك الأبجدي خط أو أيقونة أحادية اللون. إذا كنت ترغب في إظهار أيقونات الألوان ، فاستخدم SVG أو PNG.
ضع ملفات Font .woff2 و .woff ( my_font.woff2 و my_font.woff في المثال) في مجلد CSS الخاص بك وأدخل الكود التالي في ملف CSS الخاص بك (يدعم IE9+):
@font-face {
font-family : 'MyFont' ;
src : url ( 'my_font.woff2' ) format ( 'woff2' ) ,
url ( 'my_font.woff' ) format ( 'woff' );
} (إذا كنت لا ترغب في دعم أي IE ، يمكنك حذف ملف .woff واستخدام فقط .woff2 (أصغر وأحدث تنسيق))
ثم استخدم اسم font-family المخصصة الخاصة بك ('myfont' في المثال):
. my-special-font {
font-family : 'MyFont' , sans-serif;
color : yellow;
font-size : 20 px ;
}HTML:
< span class =" my-special-font " > B </ span > إذا كان خط أيقونة أحادي اللون ، فسيتم عرض الحرف B في رمز HTML على أنه رسم خرائط للأيقونة أحادية اللون إلى الحرف B. على الرغم من أن مطوري الويب يستخدمون عادةً الأحرف في منطقة الاستخدام الخاصة Unicode مثل u+EEA0 و U+F2BB بدلاً من الحروف اللاتينية الأساسية وغيرها من الأحرف الشائعة التي يتم استخدامها حول الدلالات / seo seo / seo. لمعالجة هذه المخاوف ، يمكنك تحديد رمز الخط بشكل دلالي عن طريق إضافة role وسمات aria-label إلى عنصر HTML الخاص بك:
< span role =" img " aria-label =" A bag " class =" my-special-font " > B </ span > رخصة معهد ماساتشوستس للتكنولوجيا لكل شيء في هذا المستودع
