چگونه فونت خود را برای ویندوز بسازیم. چگونه فونت دست نویس خود را بسازید. FontCreator به زبان روسی - ایجاد فونت

سلام به همه.
چندی پیش، برای قبولی در امتحانات، با مشکلی مواجه شدیم - هرکسی که کلاس را از دست داده بود، باید انشایی را که به صورت دستی نوشته شده بود ارسال می کرد. برای 1-2 پاس 1 انشا، 2-5 پاس 2 انشا و غیره. هر چکیده حداقل 10 برگ است. یافتن چکیده در مورد یک موضوع در اینترنت کار سختی نیست، اما چگونه می توان با کمترین تلاش کل مطلب را روی کاغذ منتقل کرد؟بسیاری از فونت های دست نویس روسی در اینترنت یافت شد (لینک). اما با بارگیری چندین نسخه از این فونت ها مشخص شد که هیچ کس به صحت مطالب نوشته شده اعتقاد ندارد و چک سادهوقتی معلم از من می خواهد چیزی را با همان خط بنویسم، نمی توانم از کنار او بگذرم.لذا تصمیم گرفته شد فونت دست نویس خود را بسازید. ولی چگونه از دست خط خود فونت بسازیمبه طوری که هیچ کس نتواند او را تشخیص دهد، و شما با آرامش می توانید نشان دهید که این شما بودید که نوشتید؟
راه حل پیدا شده است - برنامه فوق العاده High-Logic FontCreator Professional 9

فونت دست خط

ما Font Creator را نصب می کنیم، فکر می کنم هیچ مشکلی در این مورد وجود نداشته باشد.

1. روی یک کاغذ سفید تمیز تمام اعداد، حروف الفبای روسی و انگلیسی و همچنین موارد خاص را می نویسیم. نمادها

​

1. الفبای حاصل را اسکن می کنیم (ترجیحا) یا عکس می گیریم.


2. در Paint، Photoshop یا هر دیگری ویرایشگر گرافیکیالفبای اسکن شده (عکاسی) ما را باز کنید.


3. Font Creator نصب شده را اجرا کنید:

• روی فایل (File) - new (جدید) یا Ctrl + N کلیک کنید

​

• ما از روی دست خط به فونت خود نام می دهیم (فونت های من ru ، Regular و Don't include outlines را علامت بزنید (برای یک طرح خالی از سیلوئت ها).

​

• پنجره ای با شبح هایی از علائم، حروف انگلیسی و برخی از الفبای دیگر ظاهر می شود. حالا بیایید حروف الفبای روسی را اضافه کنیم:

​

1. روی Insert در خط بالا کلیک کنید و Characters را انتخاب کنید.

​

2. یک جدول در مقابل شما ظاهر می شود که حروف و نمادهای فونت شما از دست خط شما به پایین جدول تا حروف الفبای روسی نمایش داده می شود.

3. حرف "A" را انتخاب کنید و روی Add (Add) کلیک کنید، سپس "I" را انتخاب کنید و همچنین روی Add کلیک کنید.

4. به همین ترتیب، حروف "Ё"، "е" و حروف دیگر الفبای مورد نیاز خود را اضافه کنید.

5. در قسمت “Add these character…”، کاما را بین $0410-$044F تغییر دهید.
6. در نتیجه در فیلد Add these character... باید به این صورت نوشته شود: $0410-$044F,$0401,$0451

7. روی Ok کلیک کنید.

نمادهای روسی و تمام حروف و علائمی که اضافه کردید در قالب شما ظاهر می شوند.

ما همه کاراکترهایی را که به آنها نیاز نداریم حذف می کنیم (به جز چهار مورد اول، آنها شخصیت های سیستمی هستند).

حالا بیایید الفبای اسکن شده (عکاسی) خود را به برنامه Font Creator اضافه کنیم:
اگر هنوز آن را باز نکرده اید، وقت آن است که این کار را انجام دهید.
در ویرایشگر گرافیک، حرف اول را انتخاب کنید و کپی کنید ( Ctrl +C) در Font Creator، این حرف را انتخاب کنید و روی insert کلیک کنید ( Ctrl + V)

ما همچنان به کپی و پیست کردن تمام حروف در جای خود ادامه می دهیم. در نتیجه تصویر زیر را داریم.

حالا برای این کار باید تمام کاراکترها را تصحیح کنید، با حرف خود روی مربع دوبار کلیک کنید. پنجره ای با خطوط نقطه قرمز قرمز و حرفی که انتخاب کرده اید باز می شود

بیایید بفهمیم که چرا آنها مورد نیاز هستند:
کمترین خط 1 (نزول برنده) حداکثر محدودیت برای حروف با دنباله است (ts، y، shch، z، r، d) همه موارد زیر این خط چاپ نمی شوند.
خط 2 (Baseline) خط پشتیبانی هر حرف است. همه حروف باید در این خط قرار گیرند.
خط 3 (x-Height) - حداکثر ارتفاع حروف کوچک.
خط 4 (CapHeight) - حداکثر ارتفاع حروف بزرگ، اعداد، و همچنین حروف "c"، "d"، "b".
خط 5 (WinAscent ) - حد بالای کاراکترها، هر چیزی که بالاتر از این خط باشد چاپ نمی شود.
خطوط عمودی چپ (6) و راست (7) تعیین می کنند که حروف فونت شما چگونه یکدیگر را لمس کنند. اگر می‌خواهید که حروف مانند نسخه خطی یکدیگر را لمس کنند، حرف را به سمت چپ نزدیک کنید (6) و سمت راست (7) را روی حرف حرکت دهید تا کمی فراتر از خط لیس بزند.

همه حروف را روی خطوط تنظیم می کنیم، در غیر این صورت کاراکترهای فونت به طور تصادفی قرار می گیرند و بر این اساس، زیبا نمی شوند.نمونه ای از ترتیب حروف مختلف:

باشه الان تموم شد فونت خود را نصب کنید و راه اندازی کنید ویرایشگر متن، فونت خود را پیدا کنید و از استفاده از آن لذت ببرید. نحوه نصب فونت

اگر برای انجام تمام کارهایی که در بالا توضیح داده شد تنبل هستید و می خواهید یک فونت حرفه ای از دستخط خود دریافت کنید، ما منتظر سفارشات شما در وب سایت خود هستیم.

فونت خود را ایجاد کنید

سلام بچه ها. همانطور که قول داده بودم، به شما می گویم که چگونه فونت خود را بسازید.
من فوراً می گویم که پیوندی برای دانلود برنامه در اینجا نمی دهم ، اما پیدا کردن آن برای شما دشوار نخواهد بود. اسم برنامه High-Logic Font Creator هست من باهاش ​​شروع کردم و این ساده ترین راهحروفی را که کشیده اید به یک فونت واقعی تبدیل کنید. اگر متوجه هر خطایی شدید، لطفاً بنویسید، زیرا همه این کارها تقریباً به صورت شهودی انجام شده است و من اصلاً تظاهر نمی‌کنم که یک اجرای استادانه هستم :) و طبق معمول، با کلیک بر روی آن تصاویر بزرگ‌تری باز می‌شوند.
دوستانی که به صورت حرفه ای با فونت ها سر و کار دارند، فحش ندهید، اینجا عملاً هیچ شرایط یا قاعده ای وجود نخواهد داشت. این پست برای کسانی در نظر گرفته شده است که همیشه می خواستند چیزی شبیه به این ایجاد کنند، اما نمی دانستند چگونه به آن نزدیک شوند :)

بنابراین، اولین کاری که باید انجام دهیم این است که حروف، اعداد، نمادها، یعنی هر آنچه را که نیاز دارید بکشیم. من این مجموعه را برای استوک کشیدم، امروز آن را به یک فونت تبدیل می کنم. هیچ حروف کوچک کوچکی وجود ندارد، بنابراین آنها را نیز بکشید تا فونت کامل شود.

من همه چیز را در Illustrator ترسیم می کنم، اما این به شما بستگی دارد. بسیاری از مردم به سادگی روی کاغذ می نویسند و اسکن می کنند، این نیز یک گزینه است.
در مرحله بعد باید هر حرف را جداگانه ذخیره کنید. تمام شد، حالا برنامه را باز کنید.
اولین اقدام ما کاملاً واضح است: فایل - جدید... پنجره را می بینیم:

در پنجره، نام فونت ما را در قسمت نام خانوادگی فونت وارد کنید، Unicode، Regular، Don't include outlines را انتخاب کنید.
روی OK کلیک کنید، می بینیم که قالب فونت با همه باز شده است نامه های ممکن، اعداد و سایر نمادها.

من یادم نیست فونت پیش فرض چیست، من مجموعه قالب فونت Arial را دارم. برای تغییر فونت، اضافه کردن حروف، باید به Insert - Characters بروید پنل بالایی. شما همچنین می توانید سیریلیک را در آنجا اضافه کنید، اما فعلا این کار را انجام نمی دهیم.
بعد، مهمترین چیز این است که حروف خود را اضافه کنیم. حرف بزرگ A را پیدا کنید و روی آن دوبار کلیک کنید.
پنجره ای را می بینیم که دارای یک دسته سلول و راه راه است.

وحشت می کنیم، برنامه را می بندیم، نفس عمیقی می کشیم و برمی گردیم. حالا دینا همه چیز را توضیح می دهد.
هر نوار هدف خاص خود را دارد، اما اول از همه. در این پنجره، در هر نقطه کلیک راست کرده و روی Import Image کلیک کنید.
ما به یاد می آوریم که همه حروف خود را کجا ذخیره کرده ایم، A خود را پیدا کنید، آن را باز کنید. پنجره دیگر:

در اینجا هیچ چیز پیچیده ای وجود ندارد، نوار لغزنده را حرکت دهید، روی هر چیزی که می بینید کلیک کنید، پیش نمایش به شما می گوید که کدام تنظیمات برای تنظیم بهتر است. تصویر مال من را نشان می دهد، شما می توانید همین کار را انجام دهید. روی Generate کلیک کنید. نامه ما اینجاست:

بنابراین، آنچه می بینیم: دو نوار عمودی و پنج نوار افقی.
حرف باید بین دو نوار عمودی قرار گیرد، آنها فاصله قبل و بعد از حرف را نشان می دهند. آنها را خیلی نزدیک یا مستقیم روی نامه قرار ندهید، در غیر این صورت خراب می شود.

و اکنون در مورد خطوط افقی. من شما را با اصطلاحات سنگین نمی کنم، آن را به صورت عمومی توضیح می دهم:
1. بالاترین میله حداکثر فاصله بالای خط مبنا (4) است.
2. دوم از بالا ارتفاع حروف بزرگ است.
3. سوم ارتفاع حروف کوچک است.
4. خط پایه که تمام حروف در امتداد آن ردیف می شوند.
5. حداکثر فاصله زیر خط مبنا (4).

برای تغییر پارامترهای خطوط افقی، باید تنظیمات را در تب Format باز کنید. توصیه می کنم پارامترهای برخی از فونت های محبوب را در گوگل جستجو کنید و اگر می خواهید چیزی را تغییر دهید از آنها به عنوان مثال استفاده کنید. ولی من همچین کاری نکردم :)

همانطور که می بینید، من حرف را به خط 2 افزایش دادم، CapHeight، تنها چیزی که باقی می ماند تنظیم نوارهای عمودی است. من می‌خواهم قبل و بعد از حرف فاصله مناسبی وجود داشته باشد، بنابراین خود حرف را از خط چپ دور می‌کنم و سمت راست را کنار مثلث سیاه در بالا می‌گیرم و به حرف نزدیک می‌کنم. مثل این:

این دقیقاً همان کاری است که من با تمام حروف بزرگ خود انجام خواهم داد. اگر حروف کوچک اضافه می کنید، ارتفاع آنها را تا خط شماره 3 افزایش دهید.
وقتی حرف را در موقعیت قرار دادیم، به سادگی این پنجره را می بندیم. همه حروف در جای خود قرار می گیرند و این قابل توجه است:

من یک حرف Q با دم دارم، نمی‌خواهم آن را از ردیف کلی حروف متمایز کند، بنابراین آن را روی خط پایه قرار می‌دهم و دنباله را در زیر می‌گذارم.
همین کار را با تمام حروف کوچک (p، q، y، g، j) انجام دهید و برخی، برعکس، ممکن است کمی بالاتر از حرف بزرگ (d، b، k، f) باشند.

من هنوز به اعداد نیازی ندارم، بنابراین تصویر من به این صورت است:

اگر نمی توانید صبر کنید تا حروف را در عمل امتحان کنید، سپس به File - Save as بروید، فونت را با فرمت ttf. پیشنهاد شده توسط برنامه ذخیره کنید.
ما فونت را نصب می کنیم، به ویرایشگر متن می رویم، فونت خود را پیدا می کنیم، آن را بررسی می کنیم. آثار!

خوب، حالا می توانید زیاده روی کنید. ما بدترین عکس را از آتش بازی 9 مه می گیریم، در فتوشاپ جادو می کنیم، متن را تایپ می کنیم و voila! :)

آنقدر سخت نیست، درست است؟ حتما امتحان کنید و نتیجه را به ما نشان دهید :)

برای ایجاد فونت توصیه می کنم از یک ویرایشگر استفاده کنید FontCreatorاز High-Logic. من فوراً می گویم که این برنامه پولی است ، اما این بهترین گزینه ای است که توجه من را جلب کرد. اگر احتیاج داری ویرایشگر رایگانفونت، به برنامه توجه کنید نور را تایپ کنیداز cr8software و سرویس آنلاین استودیو گلیفر. من به FontCreator می چسبم (اگه اشتباه نکنم ورژن 6.0 بود).

مرحله 1:و بنابراین، ویرایشگر را راه اندازی کنید و با استفاده از دستور: فایل > جدید(فایل > جدید) - یک فونت جدید ایجاد کنید. در پنجره ای که باز می شود فونت جدید (از انگلیسی) فونت جدید ) ، باید تعدادی پارامتر را مشخص کنید:

• نام خانوادگی فونت- نام خانواده فونت، یعنی. فقط نام فونت، چیزی شبیه به آن تایمز نیو رومن، اشاره کردم فونت من.
• مجموعه کاراکتر- مجموعه ای از کاراکترهای موجود در فونت، توصیه می کنم انتخاب کنید یونیکد (شخصیت).
• نوع قلم- سبک فونت، برای هر سبک باید یک فایل جداگانه ایجاد کنید. برای سبک فونت معمولی (پیش‌فرض)، گزینه را انتخاب کنید منظم.
• خطوط از پیش تعریف شده- مدارهای داخلی من توصیه می کنم گزینه Don't include outlines را انتخاب کنید، که به شما امکان می دهد یک طرح کلی از شبح ها ایجاد کنید.

گام 2:پنجره ای در مقابل شما ظاهر می شود که شکلی از شبح هایی از برخی نمادها، اعداد و حروف لاتین. برای اضافه کردن الفبای سیریلیکبرای فونت، باید موارد زیر را انجام دهید:

2.1. با استفاده از دستور: درج > کاراکترها… (درج > نمادها...)- پنجره را باز کن درج کاراکترها(از انگلیسی) درج کاراکترها).

در این صورت ممکن است پیام زیر را دریافت کنید:

این عملیات قابل لغو نیست. می خواهید ادامه دهید؟

به شما اطلاع می دهد که عملیات برگشت ناپذیر است و برای تکمیل آن باید اقدام خود را تأیید کنید، دکمه « را فشار دهید. آره».

2.2. سپس جدولی از نمادها در مقابل شما ظاهر می شود. برای راحتی، در لیست فونت هافونت را انتخاب کنید آریال. در لیست به بلوک یونیکد برویدانتخاب کنید سیریلیک. با استفاده از میدان شخصیت انتخاب شده، به کد حروف "A" (0410 دلار) و "I" (044 F $) نگاه می کند. در زمینه این کاراکترها و/یا محدوده کاراکترها را اضافه کنید…ما کاراکترها و/یا محدوده کاراکترهای لازم را اضافه می کنیم، در مورد ما این است: $0410-$044F. روی دکمه کلیک کنید " خوب».

2.3. نمادهای حروف سیریلیک به فرم فونت شما اضافه می شود. به همین ترتیب، اما به طور جداگانه، می توانید حروف "е" (0451 دلار) و "Ё" (0401 دلار) را اضافه کنید که در محدوده کاراکترهای مشخص شده در مرحله قبل قرار نگرفتند.

مرحله 3:اکنون می توانید شروع به ایجاد نمادها کنید. در اینجا، علاوه بر ویرایش برداری، با استفاده از ابزارهای مناسب، FontCreator به شما این امکان را می دهد که با تبدیل آنها به یک تصویر برداری، کاراکترهایی از تصاویر ایجاد کنید. بدیهی است که برای هر نماد باید یک تصویر جداگانه بکشید.

3.1. به عنوان مثال، من یک حرف بزرگ "A" را ترسیم می کنم.

3.2. اصولاً پس از اسکن می توان از این فایل تصویری برای ایمپورت استفاده کرد. برای این کار یک تصویر در فرم انتخاب کنید نماد مورد نظر. سپس با استفاده از دستور: ابزار > وارد کردن تصویر… (ابزار > وارد کردن تصویر)- پنجره را باز کن وارد کردن تصویر رستر (از انگلیسی) وارد کردن بیت مپ) .

3.3. در پنجره باز شده روی دکمه کلیک کنید بار…» (از انگلیسی) دانلود) و فایل تصویری مورد نیاز خود را انتخاب کنید.

3.4. حرکت دادن نوار لغزنده آستانه (از انگلیسی) آستانه) سطح تیره شدن تصویر را برای ایجاد یک طرح کلی واضح تر تنظیم کنید. همچنین می توانید از فیلترها استفاده کنید:

• فیلتر صاف- فیلتر صاف کننده
• فرسایش- تاری، نماد را پررنگ تر می کند.
• گشاد کنید- کشش باعث نازک شدن فونت می شود.

حالت واردات (از انگلیسی) حالت واردات) بهتره ترکش کن پی گیری، برای تبدیل به منحنی. با منفی (از انگلیسی) منفی) ، فکر می کنم همه چیز روشن است. بنابراین روی دکمه کلیک کنید تولید می کنند».

مرحله 4:با تغییر حالت ویرایش، دوبار کلیک بر روی نماد موجود در فرم، تنها کاری که باید انجام دهید اصلاح بی نظمی ها، تنظیم اندازه و تنظیم خط تورفتگی است. شما باید همین کار را برای سایر نمادها انجام دهید.

به طور کلی، فرآیند ایجاد یک فونت را نمی توان بسیار دشوار نامید. این نیاز به صبر و زمان زیادی دارد. با استفاده از ویرایشگر فونت FontCreator، این زمان را می توان به روش های مختلفی با وارد کردن و تبدیل یک تصویر کاراکتر به وکتور ذخیره کرد. با این حال، حتی این گزینه کار زیادی است. این تمام چیزی است که من دارم. با تشکر از توجه شما. موفق باشید!

به نظر من بسیاری از کسانی که علاقه زیادی به طراحی حروف و ایجاد حروف دارند در مقطعی این فکر را دارند: آیا نباید این همه زیبایی را به یک فونت تبدیل کنیم؟ به طوری که شما نه تنها می توانید یک ترکیب خاص را تحسین کنید، بلکه می توانید این حروف زیبا را روی یک صفحه کلید واقعی چاپ کنید و زیبایی بیشتری ایجاد کنید... خوب، حداقل برای من اینطور بود :) وقتی فهمیدم که می توانید یک فونت ایجاد کنید. خودتان، به معنای واقعی کلمه برای من یک انقلاب آگاهی اتفاق افتاد (احتمالاً این دقیقاً همان چیزی است که در انگلیسی "aha-moment" نامیده می شود).

و من شروع به تلاش کردم تا بفهمم چگونه این کار را انجام دهم. اطلاعات کمی وجود داشت و آنچه وجود داشت غیرقابل درک و پیچیده بود. من در این جنگل انبوه اصطلاحات گم شدم و تقریباً ایده یادگیری نحوه ایجاد فونت را رها کردم. اما به طور معجزه ای من تسلیم نشدم، به تلاش ادامه دادم و اولین فونت خود را Bronks ساختم - دور از ایده آل، اما از نظر تجربه بسیار ارزشمند. به هر حال، قبلاً در مورد چگونگی ایجاد برانکس نوشتم. و امروز می خواهم جزئیات بیشتری را در مورد روند ایجاد یک فونت به طور کلی به شما بگویم تا درک کنید که آیا این فعالیت "شما" است و آیا امتحان کردن برای شما جالب است یا خیر.

فونت با مختصر شروع می شود

کشیدن گلیف کار روز است :)

با جمع‌آوری جسارت، یعنی الهام، معمولاً صبر می‌کنم تا حداقل نصف روز آزاد (به طور ایده‌آل کل روز) داشته باشم و بنشینم تا گلیف بکشم. گلیف ها کاراکترهای یک فونت هستند، هم حروف و هم اعداد، و همه آن علائم مانند به علاوه، کاما، علامت سوال و غیره.

اینکه من چقدر یک فونت را به طور گسترده ترسیم می کنم - یعنی تعداد گلیف هایی که ایجاد می کنم - مستقیماً به مخاطب هدف بستگی دارد. واضح است که هر چه حروف بیشتر باشد، فونت با ارزش تر است، اما در عین حال حروف هایی وجود دارند که ارزش وقت گذاشتن روی آن ها را دارند و مواردی هم هستند که زیاد نیستند (مثلاً اگر یک فونت استاندارد هنددرون ایجاد می کنید. برای مشاغل کوچک، پشتیبانی از زبان گسترده بسیار مرتبط تر از همه، همه، همه علائم ریاضی خواهد بود، که صادقانه بگویم، بسیاری از آنها را برای اولین بار در برنامه Glyphs دیدم :)). من در کارگاه در مورد ایجاد فونتی که به شدت روی آن کار می کنم (در پایان یادداشت در مورد آن :)) در مورد اینکه چه حروفی باید لزوماً ترسیم شوند و کدامیک علاوه بر این و در چه مقداری باید با جزئیات صحبت خواهم کرد.

به اختصار می توانم بگویم که توصیه می کنم فونت اول را ساده و مختصر کنید، در غیر این صورت، اگر بلافاصله سعی کنید هر دو نسخه اولیه و نهایی حروف را بسازید و الفبای سیریلیک را به الفبای لاتین اضافه کنید، به سادگی کامل نخواهید شد. فونت (و اگر آن را کامل کنید، بعید است که نتیجه دهد، زیرا در تایپ کردن نمی توانید بدون اشتباه انجام دهید، توانایی دیدن لکه های کوچک و جزئیاتی که بر کیفیت فونت تأثیر می گذارد فقط با تمرین ظاهر می شود). بنابراین، در ابتدا بهتر است با استاندارد کنار بیایید مجموعه A-Z، a-z، 0-9، علائم نگارشی اولیه.

چرا نصف روز را به طراحی فونت اختصاص می دهم؟ از آنجا که وقتی "موج را بگیرید"، یعنی سبک خاصی، فضای فونت را احساس می کنید، بهتر است در حالی که دست در حال توسعه است، همه چیز را یکجا بکشید. این احتمالا بیشتر در مورد فونت های دست نویس صدق می کند (من هنوز دیگران را امتحان نکرده ام). اگر آن را کنار بگذارید و سعی کنید بقیه حروف را بعدا بکشید، تضمین می شود که متفاوت باشند، و زمان می برد تا دوباره "دست خود را کوک کنید" و شروع به سبک عمومی کنید.

طراحی فونت خلاقانه ترین فرآیند از همه است. اگر ساده لوحانه بر این باورید که خلق فونت فقط خلاقیت و جشن الهام است، عجله می کنم شما را ناامید کنم: خلاقیت و طراحی حروف حداکثر 20٪ (معمولاً کمتر) از زمان لازم برای ایجاد یک فونت را می گیرد. بقیه فناوری هستند: اسکن، پردازش، تراز الفبا، تنظیم، صادرات به یک برنامه، فاصله گذاری و هسته گذاری، تنظیمات کد، آزمایش و همه چیزهای دیگر. بنابراین، اگر فقط می خواهید حروف بکشید و حتی فکر کردن به بخش فنی برای شما خسته کننده است، بهتر است حروف ایجاد کنید.

بخش دیجیتالی فرآیند

هنگامی که فونت رسم شد، نوبت به دیجیتالی کردن آن می رسد. زنجیره پردازش من به این صورت است: اسکنر - فتوشاپ - تصویرگر. در اسکنر حداکثر تنظیمات را تنظیم می کنم ، در فتوشاپ کنتراست را افزایش می دهم و خطوط را کمی تمیز می کنم ، در Illustrator ردیابی می کنم ، الفبا را پیدا می کنم (یعنی حروف را به ترتیب مرتب می کنم ، سعی می کنم "مجموعه" چند کلمه برای بررسی اینکه همه چیز چگونه به نظر می رسد) و تمیز-تمیز- دارم حروف را تمیز می کنم.

در مورد مرحله تمیز کردن - قبلاً فکر می کردم که "چرا آن را تمیز کنید، این یک فونت دست نویس است." اما بعداً این جزئیات فاش شد: هرچه نقاط بیشتری در وکتور وجود داشته باشد، احتمال اینکه فونت به هر طریق ممکن باگ باشد - از امتناع Glyphs (یا برنامه دیگری که فونت در آن مونتاژ می شود) برای صادر کردن فایل بیشتر است. ، به عدم توانایی کاربران نهایی در استفاده از آن بدون خطا. بنابراین، حداقل نقاط کلید راحتی است، و بله، هنوز هم باید آنها را تمیز کنید، حتی فونت هایی با بافت.

من حروف را در ایلوستریتور به چند روش تمیز می کنم: اول، با یک پاک کن جادویی از Astute Graphics (بخش افزونه پولی، که من در مورد آن صحبت می کنم)، متأسفانه جایگزین رایگانمن حتی کیفیت تقریبی را نمی دانم، ثانیا، با یک مداد تصویرگر استاندارد - من طرح کلی را برجسته می کنم و آن را دقیق تر می کنم.

پس از آن، فونت را برای صادرات آماده می کنم - این یک داستان بزرگ جداگانه است که به احتمال زیاد چندین فیلم در مورد آن وجود خواهد داشت - و حروف را به Glyphs منتقل می کنم.

یک برنامه فونت خوب مهم است

مونتاژ یک فونت، یعنی تبدیل حروف برداری به حروف کاربردی، نوعی که می توان روی صفحه کلید تایپ کرد، در تئوری در برنامه های مختلف قابل انجام است. اگر در گوگل سرچ کنید، لیست های چشمگیری از گزینه ها برای هر سلیقه و بودجه ای پیدا خواهید کرد. من اسامی را در اینجا لیست نمی کنم زیرا آماده نیستم چیزی را که نمی دانم / هرگز امتحان نکرده ام توصیه کنم. من در برنامه Glyphs کار می کنم و فقط می دانم که همه طراحان تایپ جدی (کسانی که فونت می فروشند) آنها را یا در Glyphs یا Fontlab می سازند. این به احتمال زیاد به این دلیل است که برنامه‌های ارزان‌تر/رایگان همه گزینه‌های مورد نیاز برای ایجاد داستان‌های فونت جالب را ارائه نمی‌دهند.

زمانی Glyphs را انتخاب کردم زیرا از یک طرف می خواستم فوراً به برنامه فونت "درست" عادت کنم (یعنی برنامه ای که می تواند برای ایجاد فونت های واقعاً متفکرانه، پیچیده و غنی از عناصر استفاده شود و نچسب شود. به مدت یک ماه در یک برنامه رایگان فقط بعداً متوجه شدم که نمی توانید لیگاتورهای مشروط را در آنجا ایجاد کنید)، از طرف دیگر، من حاضر نبودم چندین برابر بیشتر برای Fontlab بپردازم. ظاهراً انتخاب درستی بود - من افرادی را می شناسم که از Fontlab به Glyphs تغییر مکان داده اند و می گویند که دومی رابط واضح تری دارد :)

یک برنامه فونت خوب مهم است زیرا در اینجاست که تبدیل جادویی فقط حروف به یک فونت کارآمد اتفاق می افتد. اگر برنامه به شما اجازه ایجاد پشتیبانی زبان را نمی دهد، نمی توانید آن را ایجاد کنید. اگر نمی‌توانید مجموعه دیگری از حروف بزرگ اضافه کنید، نمی‌توانید آنها را اضافه کنید، حتی اگر قبلاً آنها را کشیده باشید.

پس از صادرات به Glyphs، چیزهای مختلفی را تنظیم کردم: گروه های حروف، فاصله گذاری (فضای منفی در سمت چپ و راست حروف، تقریباً صحبت کردن)، کرنینگ (فاصله بین جفت های خاص حروف)، افزودن پشتیبانی زبان، لیگاتورها (ویژه انواع ترکیب حروف)، گزینه‌های اولیه و نهایی (با دم اسبی بلند، شلختگی، شکوفایی و همه چیزهای دیگر) و مجموعه‌های جایگزین، در صورت پیشنهاد. در طول مسیر، کد به گونه ای پیکربندی شده است که همه چیز برای کاربر نهایی همانطور که در نظر داشتم و بدون مشکل کار کند. این مرحله که در چند جمله توضیح دادم، در واقع چیزی است که در حدود 70 درصد از زمان ایجاد یک فونت طول می‌کشد :) و من آن را به طور خلاصه توصیف نمی‌کنم نه به این دلیل که من حریص هستم، بلکه به این دلیل است که فقط در مورد kerning می‌توانید بنویسید. یک یادداشت در سه برابر طولانی تر از این، و هنوز هم کافی نخواهد بود. در دوره در مورد فونت ها، من در مورد تمام این نکات با جزئیات زیاد صحبت خواهم کرد (در حال حاضر سعی می کنم مرز بین "به اندازه کافی دقیق" و "اطلاعات بیش از حد برای هضم" را پیدا کنم).

در این مقاله آموزشی به شما خواهم گفت که چگونه با استفاده از آیکون هایی که خودتان ایجاد کرده اید، فونت خود را برای یک وب سایت ایجاد کنید. تنها چیزی که ما برای این کار نیاز داریم یک برنامه برای ایجاد گرافیک برداری (Adobe Illustrator یا Inkspcape) و دسترسی به اینترنت است. پس بیایید شروع کنیم! شما می توانید تمام تصاویر، آیکون ها و فونت css مورد استفاده برای این کار را در انتهای مقاله دانلود کنید.

برای این آموزش ما یک کار ساده انجام می دهیم. برای اولین نماد یک ستاره معمولی ترسیم می کنیم. برای نماد دوم - یک عقاب با حرف W در داخل. کشیدن آن بسیار آسان است و می توانید هر شکل و ترکیبی را ایجاد کنید. من برای این اهداف از illustrator استفاده کردم.

پس از تکمیل بخش خلاقانه، ساخته شما باید در قالب SVG ذخیره شود. روی "ذخیره به عنوان" کلیک کنید و نوع فایل را به عنوان SVG انتخاب کنید. اکنون می توانید مستقیماً به ایجاد فونت ادامه دهید.

برای این منظور ما از محبوب و خدمات رایگان IcoMoon.

اولین کاری که باید انجام داد ایجاد است پروژه جدید، بنابراین روی منوی گوشه سمت چپ بالا کلیک کنید و روی "پروژه جدید" کلیک کنید. بعد، ما آماده خود را بارگذاری می کنیم فایل های svgپس از کلیک بر روی دکمه "وارد کردن نمادها". پس از انجام این مراحل، باید تصویری مانند این را در مانیتور خود مشاهده کنید:

حالا ما این قابلیت را داریم که کد هر آیکون (در مورد ما e600 و e601 خواهد بود)، نام فونت، پیشوند CSS و غیره را تغییر دهیم. همه اینها در "تنظیمات" انجام می شود. همچنین، می‌توانیم با کلیک روی پیوند «فعال کردن استفاده سریع» فونت را در عمل مشاهده کنیم - که به ما امکان می‌دهد یک پیوند موقت به فونت خود و همچنین گزینه مشاهده کد در CodePen را دریافت کنیم.

بعد از اینکه همه چیز را پیکربندی کردید، روی دکمه "دانلود" در پایین صفحه کلیک کنید و آرشیو را دانلود کنید. در این آرشیو فونت خود را با فرمت های ttf، eot، svg و woff + یک صفحه نمایشی با فونت پیدا خواهید کرد.

استفاده از آیکون های موجود در سایت

اکنون، تنها چیزی که نیاز داریم این است که فونت CSS را با استفاده از font-face@ اضافه کنیم و پارامترهای دیگر را مشخص کنیم (همه آنها در فایل css در آرشیوی که دانلود کرده‌اید نوشته شده‌اند.

@font-face ( font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; speak: none; font-variant: normal-height: 1 -صاف کردن: مقیاس خاکستری ) .wdm-star:before ( محتوا: "\e600"; ) .wdm-eagle:before ( محتوا: "\e601"; )

اکنون می توانیم از فونت خود در کدهای HTML مانند زیر استفاده کنیم:

تعیین نام کلاس برای تگ ما نماد خود را دریافت می کنیم.