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

امیدوارم تا کنون ثابت کرده باشیم که نمادهای وب موفق باید یکی از دو معیار زیر را داشته باشند:

1. شبیه زیاد به یک چیز واقعی، به عنوان مثال نماد چاپی که شبیه یک چاپگر واقعی است
2. استقرار و در نتیجه آشنایی به عنوان یک نماد قابل تشخیص در سیستم نشانه

 

فونت های نماد محبوبیت پیدا می کنند

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

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

1. به راحتی و بدون تخریب اندازه آنها تغییر می کند (زیرا اساساً بردار هستند)
2. رنگ‌آمیزی مجدد نماد به اندازه رنگ‌آمیزی متن بی‌اهمیت است. به عنوان مثال، color: نارنجی برای نماد RSS
3. بسیاری از نمادها در یک فایل گروه‌بندی می‌شوند که تنها به یک درخواست http نیاز دارد
4. همان‌طور که کریس اشاره می‌کند، آن‌ها اشکالی هستند که دارای “ناک اوت” شفاف هستند که در مرورگرها از همان IE6 کار می‌کنند (برخلاف PNG‌های آلفا)
5. برای نمادهایی که باید در مجاورت متن ظاهر شوند، تراز و بسته بندی مشکلی ندارند (زیرا متن هستند)
6. می‌توانید جلوه‌های CSS3 را از طریق text-shadow و background-clip:text اعمال کنید که به شکل حروف احترام می‌گذارند
7. برخلاف SVG، دسترسی به پشتیبانی از مرورگرهای متقابل آسان است

مشکلات

به قول کریس، استفاده از فونت‌ها برای نمادها ایده خوبی است، به شما می‌گویم. با این وجود، وضعیت موجود در مورد استفاده از فونت آیکون ایده آل نیست. اولا، بیشتر فونت‌های با کیفیت موجود، مواردی مانند Pictos، Fico، Klepto، Cheetos، Ponyo و Sailor Moon (ممکن است برخی از این موارد را اشتباه گرفته باشم)، فونت هایی با قیمت پرداختی هستند. در عمل این بدان معناست که واقعاً دو مشکل وجود دارد:

1. شاید مجبور شوید از پول جدا شوید
2. چه مجبور باشید از پول جدا شوید یا نه، باید کار طراحی کثیف دیگران را بپذیرید

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

پس از مدتی جستجو، در نهایت معرفی شدم با امکاناتاز Inkscape ویرایشگر قلم SVG. با کمی تمرین با استفاده از Inkscape و کمک یک مبدل آنلاین برای تبدیل فونت SVG به TTF، توانستم «Heydings» را بسازم. این فونت اکنون در فهرست سیمورایی موجود است (همانطور که توسط Coyier’s پیوند داده شده است مقاله). من سعی نمی کنم فونتم را به شما بفروشم (به هر حال رایگان است) اما فکر می کنم اثبات مفهومی بسیار خوبی ایجاد می کند:

 

ساخت گلیف نماد با Inkscape

راه اندازی Inkscape

بیایید با دانلود و نصب Inkscape شروع کنیم. همچنین باید از الگوی شروع فونت نماد من که در پوشه منابع این مخزن GitHub (در آینده بیشتر در مورد این پروژه GitHub). هنگامی که این فایل را در نصب جدید Inkscape خود باز کردید، باید با باز کردن پنجره های زیر از منوی اصلی، فضای کاری خود را تنظیم کنید:

• شی → پر کردن و ضربه
• شی → تراز و توزیع
• TEXT → SVG FONT EDITOR

در قسمت SVG Font Editor، روی “Font 1” در زیر “Font” کلیک کنید. اکنون فضای کاری شما باید چیزی شبیه به این اسکرین شات باشد:

شایان ذکر است که راهنمای خط پایه اشتباهاً نه زیر مرز پایینی بوم: بنا به دلایلی که برای دیگران شناخته شده است، اگر می‌خواهید که خط مبنا را با تایپ‌فیس‌های مجاور به اشتراک بگذارند، نمادهای شما باید اندکی از پایین بوم آویزان شوند. من این را با Georgia، Arial و تعدادی از فونت های وب آزمایش کرده ام.

ساخت اولین گلیف

برای تعریف علامت، روی برگه Glyphs در SVG Font Editor کلیک کنید، سپس روی دکمه Add Glyph در پایین کلیک کنید. بخشی از شیشه در اولین بازرسی بلافاصله مشخص نیست، اما اگر روی علامت علامت خود (“Glyph 1”) کلیک کنید، فیلدی ظاهر می شود که به شما امکان می دهد شخصیتی را که می خواهید نماد خود را به آن اختصاص دهید وارد کنید. اول از همه باید یک شکل ستاره ساده بسازیم، بنابراین توصیه می کنم کاراکتر “s”، “S” یا “*” را وارد کنید:

اکنون که کاراکتر مربوط به گلیف را تعریف کردیم، باید خود گلیف را بسازیم. از آنجایی که این بار فقط ستاره می‌سازیم، باید ابزار مفید ستاره‌ها و چندضلعی‌های Inkscape را از نوار ابزار سمت چپ انتخاب کرده و یک ستاره در بوم بکشیم. متوجه خواهید شد که این ابزار دارای گزینه هایی است که به شما امکان می دهد ظاهر ستاره را تغییر دهید. در مثال خود، 5 گوشه، نسبت پره 0.5 و مقدار گرد 0.1 را انتخاب کرده ام.

با استفاده از تراز و توزیع پانل (که ممکن است در زیر ویرایشگر قلم SVG پنهان باشد) ستاره را به صورت افقی در مرکز قرار دهید و شکل را به سمت پایین بکشید تا با خط پایه مطابقت داشته باشد. با خاموش شدن شبکه، بوم باید چیزی شبیه به این باشد:

گلیف ها در فونت نماد ما فقط شکل هستند. اشکال بدون رنگ، لایه یا شیب. بنابراین، برای اینکه ستاره خود را به عنوان یک نامزد قانونی برای فونت خود تبدیل کنیم، باید آن را از یک شی به یک شکل مبتنی بر مسیر تبدیل کنیم. برای این کار ستاره را انتخاب کرده و از منوی اصلی PATH → OBJECT TO PATH را انتخاب کنید. اکنون، با انتخاب ستاره، می‌توانیم به ویرایشگر قلم SVG خود برویم، علامت «s» مربوطه را برجسته کرده و دکمه دریافت منحنی‌ها از انتخاب را فشار دهیم:

وقتی “s” را در قسمت متن نمونه وارد می‌کنید، ستاره شما اکنون باید به عنوان پیش‌نمایش ظاهر شود، مانند:

ساخت نمادهای پیچیده تر

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

1. به استفاده از خطوط و پرهای مشکی پایبند باشید، اگر فقط به شما یادآوری کند که نمادها فقط اشکال هستند، نه گرافیک برداری پیچیده. رنگ آمیزی نماد در محصول نهایی با استفاده از CSS امکان پذیر است.
2. همه اشیا و خطوط (خطوط) باید با استفاده از PATH → OBJECT TO PATH یا PATH → STROKE TO PATH به مسیرهایی تبدیل شوند.
3. چند شیء و/یا سکته مغزی مورد استفاده برای ایجاد یک علامت نماد باید با استفاده از PATH → COMBINE (یا در برخی شرایط، PATH → UNION) با هم ترکیب شوند
4. برای برش اشکال از شکل‌ها (مانند استفاده از کاتر کوکی) شکلی را که باعث ایجاد ناک اوت می‌شود روی شکل اصلی قرار دهید، هر دو را انتخاب کنید و PATH → DIFFERENCE را انتخاب کنید. نواحی سفید روی مشکی که شبیه «ناک اوت» به نظر می رسند کافی نخواهند بود، زیرا با ضربه زدن به دریافت منحنی ها از انتخاب متوجه خواهید شد که قانون 1 را ببینید.

 

در حال آماده سازی فونت برای جاسازی

تصور کنید که تعدادی نماد مفید برای فونت خود را با تکرار روش تخم ریزی گلیف که من به تازگی توضیح دادم ایجاد کرده اید و فایل را به عنوان myicons.svg ذخیره کرده اید. اکنون، می‌خواهید این کتابخانه نماد را برای استفاده در صفحات وب آماده کنید.

تبدیل SVG به TTF

اولین اقدامی که باید انجام دهید این است که فونت SVG را به قالبی آشناتر و همه کاره تبدیل کنید. TTF قالب برجسته برای نصب محلی و همچنین توزیع است. همچنین پایه خوبی برای تبدیل مجدد برای برآورده کردن الزامات @font-face فراهم می کند. خدمات آنلاینی که به شما امکان تبدیل فونت ها را بین قالب ها می دهند عبارتند از http://onlinefontconverter.com/، http://www.fontconverter.org/ و http://www.font2web.com/. با این حال، مورد علاقه شخصی من http://www.freefontconverter.com/ است زیرا من در صف قرار نگیرید و هرگز نمی‌دانستم که اشکالی را برمی‌گرداند.

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

ویرایش اطلاعات متا فونت

اکنون که TTF را در دست دارید، توصیه می کنم متای داده ایجاد شده را ویرایش کنید. تغییر نام، نسبت دادن و توصیف فونت برای رضایت شما، آن را برای نصب، جاسازی و توزیع آماده می‌کند. همچنین راهی برای نشان دادن اینکه فونت کار خودتان است. خوانندگانی که از ویندوز استفاده می‌کنند این امکان را دارند که از صدای فریبنده‌ای بزرگ ویرایشگر ویژگی‌های فونت مایکروسافت استفاده کنند. یا Typograf رایگان برای-x-days. برای کاربران اپل و لینوکس، از کسانی که بهتر از من مطلع هستند، خواهش می کنم که در نظرات به شما کمک کنند.

ویرایشگر خصوصیات فونت سخت اما قابل استفاده

نکته مهم: اگرچه ویرایشگر مشخصات فونت مایکروسافت به شما امکان می دهد اطلاعات نویسنده، توضیحات و مجوز را اضافه کنید، به نظر نمی رسد که به شما اجازه ویرایش داده های اساسی مانند نام فونت و را بدهد. نام پست اسکریپت. این فیلدها غیرفعال هستند. اگر از این نرم افزار خاص استفاده می کنید، باید مقادیر ممنوعه در کد SVG را قبل از تبدیل TTF پیدا کرده و ویرایش کنید. SVG اصلی را در ویرایشگر متن مورد علاقه خود باز کنید (من از Notepad++) و موارد زیر را ویرایش کنید:

نام قلم: موجود در برچسب، ویژگی font-family

نام پست نویس: در برچسب، ویژگی id یافت شد

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

قابلیت جاسازی فونت

وقتی TTF را روی سیستم محلی خود نصب کردید و کمی پیش نمایش آن را مشاهده کردید تا مطمئن شوید که مشکلی پیش نیامده است، وقت آن است که آن را از طریق @font-face generator. برای اینکه کد خروجی تا حد امکان کارآمد و مؤثر باشد، چند گزینه در حالت متخصص ژنراتور وجود دارد:

Subsetting: گزینه subsetting به شما امکان می‌دهد فقط نویسه‌هایی را که تفویض کرده‌اید اضافه کنید و حجم فایل را کاهش دهید.

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

WebOnly™: اگر در مورد افرادی که از فونت شما همانطور که در نظر گرفته شده استفاده می‌کنند انجیلی هستید – و به ساختن تصاویر از حروف نوشته در Photoshonk – می توانید این گزینه را انتخاب کنید. همچنین ممکن است با برنامه صدور مجوز شما مطابقت داشته باشد. اکنون مجوز را پوشش می دهم.

توزیع فونت شما

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

گزینه‌های صدور مجوز زیادی وجود دارد و بررسی آنها گاهی گیج‌کننده است. مجوز عمومی عمومی گنو کاملاً قابل قبول است، اما ممکن است می‌خواهید مجوز قلم باز SIL را در نظر بگیرید . مزیت اصلی این مجوز، ارائه نام فونت رزرو شده است: سایر طراحان مجاز به تغییر فونت شما هستند، به شرطی که نام آن را متفاوت بدانند. در عمل، این بدان معنی است که جرایم علیه طراحی نمادها را نمی توان “به نام شما” انجام داد.

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

پایان CSS spriting

چرا به ساخت نمادهای عمومی با استفاده از فونت های SVG بسنده کنیم؟ با قابلیت ساخت آیکون ها، امکان ساخت اشکال، عناصر و تزئینات برندسازی خاص سایت نیز وجود دارد. مانند CSS sprites، همه این عناصر بصری را می‌توان در یک فایل نگهداری کرد و تماس‌های سرور را به یک درخواست http منفرد کاهش داد. برخلاف CSS sprites، عناصر هم قابل تغییر اندازه هستند و هم وابسته ای به مختصات موقعیت (مقادیر background-position) برای نمایش صحیح ندارند. این باعث می‌شود که آنها برای مناسب‌تر باشند. طراحی واکنشگرا.

بیایید وانمود کنیم که من انتخاب کرده‌ام از یک فونت SVG برای پوشش برخی از عناصر اصلی طراحی در وبلاگ >steampunkمانند. یک رندر ساده جدول HTML از طرح های کامپوننت چیزی شبیه به این خواهد بود:

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

یادداشتی سریع درباره صفحه‌خوان‌ها

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

 

یک نماد وب فونت مشارکتی

به عنوان مربی جاوا اسکریپت، روپرت، روز قبل به من اشاره کرد ، استفاده از فونت های SVG برای ایجاد مجموعه آیکون فرصت جالبی برای همکاری ارائه می دهد. ببینید، کد SVG – که شکلی از XML است – بسیار استاندارد شده و به راحتی توسط انسان قابل خواندن است. این دقیقاً نوعی کد منبع مناسب برای توسعه با استفاده از یک سرویس “کدگذاری اجتماعی” مانند GitHub است.

این ایده به دلیل مفاهیم نشانه‌شناختی آن با من طنین انداز شد: اگر قابل درک بودن یک نماد با اجماع مشخص شود، مطمئناً اجماع نیز باید در شکل‌گیری آن نقش داشته باشد. با همکاری بر روی نماد “سیستم علامت” ما، تنها کهن الگویی ترین طرح های نماد باید ظاهر شوند. ما باید بتوانیم واژگان نماد ایجاد کنیم که واقعاً متعلق به جوامعی باشد که برای آنها باید معنی داشته باشند.

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