چگونه آیکون های خود را به یک فونت وب تبدیل کنیم

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

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

پاسخ واضح بود. من باید نمادهایم را به یک فونت تبدیل کنم.

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

مزایای استفاده از فونت نماد

یک فونت نماد علاوه بر وضوح تصویر، چندین مزیت نسبت به تصاویر بیت مپ دارد.

• مناسب بودن: اندازه فونت نماد بسیار کوچکتر از یک سری تصاویر خواهد بود، به خصوص اگر از تصاویر با اندازه دو برابر برای نمایشگرهای رتینا استفاده کرده باشید. و هنگامی که فونت بارگیری شد، نمادهای شما بلافاصله و بدون نیاز به دانلود تصویر ارائه می شوند.
• مقیاس‌پذیری: یک فونت نماد را می‌توان با تنظیم ویژگی font-size در CSS همراه، به هر اندازه‌ای تنظیم کرد. این به شما امکان می دهد اندازه های مختلف را آزمایش کنید. در حالی که برای تصاویر بیت مپ، باید یک فایل تصویری در هر اندازه خروجی بگیرید.
• انعطاف پذیری: جلوه‌های نوشتاری را می‌توان به راحتی روی نماد شما اعمال کرد، از جمله رنگ‌ها، سایه‌های رها شده و حالت‌های چرخشی. آنها همچنین به خوبی در برابر هر رنگ یا پس زمینه تصویر نمایش داده می شوند.
• سازگاری: فونت های وب توسط تمام مرورگرهای مدرن و مرورگرهای قدیمی، حتی IE 6 و نسخه های قبلی، پشتیبانی می شوند.

پس، بیایید شروع کنیم!

ایجاد فونت نماد

فونت های نماد را می توان با استفاده از یک برنامه اختصاصی ایجاد فونت مانند Glyphs ساخت، اما ابزار تایپوگرافی حرفه ای بسیار فراتر از نیازها یا الزامات ساخت یک فونت نماد ساده است، که در آن رابطه بین کاراکترها (به عنوان مثال هسته و لیگاتورها) مهم نیست.

آسان ترین راه استفاده از یک برنامه آنلاین رایگان عالی به نام IcoMoon توسط Keyamoon است. ، که تمام زحمت تبدیل نمادها به فونت وب را از بین می برد.

این برنامه HTML5 تمام درد ایجاد فایل‌های فونت را برای استفاده‌های ساده مانند ساخت فونت‌های نماد از بین می‌برد. IcoMoon با تعدادی مجموعه آیکون ارائه می‌شود که قبلاً بارگذاری شده‌اند، و می‌توانید موارد بیشتری را به کتابخانه خود اضافه کنید، که بیشتر آنها می‌توانند به صورت رایگان استفاده شوند (مجوز را بررسی کنید). اگر به دنبال نمادهای نسبتاً استانداردی مانند “دانلود فایل” و “سبد خرید” هستید، ممکن است دریابید که استفاده از یکی از این نمادها به ایجاد نماد خود ارجحیت دارد.

گام به گام

1. تصاویر خود را آماده کنید

برای شروع، باید نمادها را در یک برنامه ترسیم برداری که قابلیت صادرات به قالب SVG را دارد، مانند Illustrator یا Inkscape ایجاد کنید.

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

2. پاک کردن

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

در Illustrator، از ابزار Pathfinder برای ادغام عناصر همپوشانی، و عنصر Minus Front برای حذف عناصر بریده شده، مانند ستاره در این نمادها، استفاده کنید.

اصل کلیدی این است که مطمئن شوید نماد شما در مقیاس های کوچک قابل خواندن است. تا حد امکان ساده کنید.

3. صادرات به SVG

اکنون، یک نماد را انتخاب کنید و آن را کپی و در یک سند مربع جدید (مثلاً 200 × 200 پیکسل) جایگذاری کنید. آیکون را طوری تغییر دهید که متناسب باشد. ممکن است برای شما مفید باشد که یک خط کش پایه قرار دهید. نماد را طوری رنگ کنید که روی پس‌زمینه سفید یکدست سیاه شود.

اکنون، File… Save as را انتخاب کنید و فایل را به عنوان یک فایل SVG ذخیره کنید. از تنظیمات پیش فرض SVG استفاده کنید. هنگامی که این کار را برای همه نمادها انجام دادید، آماده ایجاد یک فونت وب هستید.

4. وارد کردن به IcoMoon

برنامه وب IcoMoon را باز کنید. برای وارد کردن یک نماد، روی دکمه «وارد کردن نمادها» کلیک کنید و سپس فایل‌های SVG را که می‌خواهید اضافه کنید انتخاب کنید — می‌توانید چندین فایل را همزمان اضافه کنید. سپس این موارد در زیر “نمادهای سفارشی شما” ظاهر می شوند. اگر آنها با رنگ زرد برجسته شده باشند، بخشی از فونت نمادی خواهند بود که ایجاد می کنید. در این مثال، می‌بینید که من تصمیم گرفته‌ام یکی از نمادهای خود را صادر نکنم، و یکی از نمادها را از “Mini-icons” اضافه کرده‌ام.

5. فونت را از IcoMoon

صادر کنید

اگر می‌خواهید موقعیت، اندازه یا چرخش نماد را تنظیم کنید، می‌توانید روی دکمه «ویرایش» کلیک کنید. از دکمه “ذخیره کپی” برای ایجاد تغییرات آیکون (به عنوان مثال، تصویر آینه ای از یک نماد) استفاده کنید. یک تگ معنی دار به نماد اضافه کنید، زیرا از آن برای ایجاد نام کلاس برای آن استفاده می شود.

وقتی آماده شدید، روی دکمه “Font” در پایین صفحه کلیک کنید تا شروع به تولید فونت شود. اینجاست که می‌توانید نمادی را به کدام کاراکتر اختصاص دهید. به عنوان مثال، اگر مجموعه نمادهای شما شش تصویر از یک توپ در حال چرخش است، می توانید کاراکترهای q، w، e، r، t و y را به شش فریم اختصاص دهید. در تنظیمات برگزیده، نام فونت را انتخاب کنید. شما همچنین می توانید معیارهای فونت را تنظیم کنید، اما مگر اینکه بخواهید فونت سفارشی خود را در کنار متن استاندارد تنظیم کنید، واقعاً نیازی به نگرانی در این مورد نیست.

6. فایل های فونت

را دانلود کنید

برای دانلود بسته فونت در دستگاه خود، روی «دانلود» کلیک کنید. این یک زیرپوشه حاوی خود فونت ها (در فرمت های WOFF، EOT و TTF) و همچنین یک صفحه HTML نمونه و CSS مربوطه خواهد بود. اگر نیاز به پشتیبانی از IE 6 یا 7 دارید، حتی یک فایل جاوا اسکریپت با راه حلی وجود دارد.

برای افزودن فونت ها به پروژه خود، زیرپوشه فونت ها را در سایت خود کپی کنید. شما می توانید CSS را از style.css در فایل CSS سایت خود کپی و جایگذاری کنید، اما روش من این است که نام آن را به fonts.css تغییر دهم و آن را به عنوان یک CSS جداگانه نگه دارم. فایل. سپس باید یک مرجع به این فایل CSS در فایل HTML خود با استفاده از پیوند نسبی اضافه کنید:

link rel="stylesheet" href="fonts.css" />

در عنصر @font-face فایل CSS، باید مرجع URL را به مکان نسبی جدید فونت‌ها تغییر دهید، یا می‌توانید به سادگی پوشه فونت‌ها را به سبک خود رها کنید. پوشه برگه.

7. فراخوانی فونت

همانطور که در نمونه فایل index.html مشاهده می کنید، دو راه برای ارجاع فونت سفارشی وجود دارد، یا با کاراکتر آن (یونیکد یا نام) یا با نام کلاس آن. مثال اول از شرط data-icon

HTML5 استفاده می کند

div aria-hidden="true" data-icon="g">/div >

در اینجا، کلاس fs1 برای تنظیم اندازه فونت استفاده می شود. مرجع aria-hidden کمک می کند تا اطمینان حاصل شود که شخصیت توسط هیچ صفحه خوانی صحبت نمی شود.

روش دوم از یک عنصر span استفاده می کند:

span aria-hidden="true">/span>

این روش زمانی مفید است که می‌خواهید نماد با متن معمولی قرار گیرد.

اگر می‌خواهید نماد را به یک پیوند تبدیل کنید، می‌توانید همه آن را در یک href بپیچید:

http://www.yoursite.com" ="blank" data-icon="s">

در اینجا، کلاس iconlink را اضافه کردم و به آن حالت شناور دادم:

a.iconlink {
font-family: 'youriconfont';
text-decoration:none;
رنگ: #666666;
}
a.iconlink:hover {
text-decoration:none;
رنگ: #999999;
}

8. ایده های پیشرفته

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

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

آیا سعی کرده‌اید از فونت‌ها برای نمادها استفاده کنید؟ چگونه آن را پیدا کرده اید؟ در نظرات به ما اطلاع دهید.