در این مقاله می خواهیم در مورد فونت ها و آیکون ها در css صحبت کنیم. قبل از به وجود آمدنcss3 ما باید از فونت هایی استفاده می کردیم که روی سیستم کاربر موجود و نصب بود. با استفاده کردن از css شما می توانید از هر فونتی که دوست دارید استفاده کنید. فونت های شما از طریق دستورfont-face درccs3 قابل مشاهده می باشد. همانطور که میدانید فونت‌ها دارای فرمت‌ها و انواع مختلفی هستند؛ فرمت‌هایی از قبیلWOFF ، EOT، TTF و... هر کدام از این فرمت‌ها در مرورگر‌ها با نسخه‌های متفاوت پشتیبانی مختلفی دارند و اینکه فونت در سایت شما با چه فرمتی استفاده میشود، اهمیت دارد.
دستور Font-Face
با استفاده از این دستور می توانیم فونت هایی که مورد نظرمان هستند با توجه به استایل وب سایتمان اعمال کنیم. با دستور Font-Face نه تنها می توانیم از فونت های سفارشی استفاده کنیم و آنها را روی وب سایتمان تنظیم کنیم بلکه میتوانیم از چندین فونت بصورت همزمان استفاده کنیم. با استفاده از این قابلیت هر فونتی که به قالب ما نزدیکتر است بصورت اتوماتیک از مخزن گرفته شده و سپس اعمال میشود. این دستور شامل دو خصیصه به نام font-family و src است. با استفاده از خصیصه font-family لیستی از فونت های مورد نظرمان را مشخص میکنیم که در زمان مناسب کدام فونت استفاده شود. کافی است که نام فونت های خود را با ویرگول از یکدیگر جدا کنیم و با استفاده از خصیصه SRCآدرس فونت مورد نظر یا منبع(Source) آنرا مشخص میکنیم.
شکل نوشتاری این دستور در مثال زیر آورده شده است:
{
نام فونت 'font-family';
آدرس فونت :' src';
}
با این کار از این پس میتوانیم از نامی که به فونت خود داده ایم در متن‌های سایتمان استفاده کنیم. برای استفاده کافی است در تگی که قصد استفاده آن را داریم، به استایل آن ویژگی font-family همراه با نام فونت دلخواهمان را اضافه نماییم. بدین شکل آن تگ و متن‌های مربوط به آن از این فونت تبعیت خواهند کرد.
آیکون‌ها در Css
یکی از راه‌های ایجاد جذابیت و بالا بردن رابط کاربری در سایت، استفاده از آیکون‌هاست. این آیکون‌ها به نوعی همان فونت هستند که به جای کاراکتر‌های الفبا از اشکال متنوع تشکیل شده‌اند. برای استفاده از این آیکون‌ها لازم است که اولا به فایل css فونت دسترسی داشته باشیم و ثانیا با استفاده از تگ بلند و صفت کلاس، اقدام به فراخوانی نام آیکون مورد نظر خود کنیم.
سه شرکت معروف اقدام به تولید فایل css این فونت‌ها کردند که به ترتیب، آنها و نحوه فراخوانی آنها را بررسی خواهیم کرد.
آیکون Font Awesome
فونت Awesome ساده ترین روش برای استفاده از آیکن ها در یک صفحه HTMLمی باشد و یکی از پرکاربرد ترین فونت آیکون می باشد. براحتی میتوانیم کلاس مربوطه را به هر عنصر Inline اضافه کنیم و از آن استفاده کنیم. برای استفاده از آیکن های مربوط به font-Awesome کافی است که فایل CSS آن را به بخش Head در بالای صفحه Html خود اضافه کنید.
آیکون های Bootstrap
برای استفاده از آیکن های Bootstrap تنها کافی است که آنرا به خط بالای صفحه HTML خود در بخش Head اضافه کنید و نیاز به هیچ گونه دانلود و نصب خاصی ندارید. glyphicon ها، یک نوع از آیکون های بوت استرپ است. برای مشاهده این سایت و انواع آیکون‌های مربوط به آن از لینک https://getbootstrap.com استفاده کنید. برای آشنایی با ساختار آیکون های بوت استرپ به مثال زیر دقت کنید:
<i class=“glyphicon glyphicon-remove“></i>
در مثال بالا تگ i شامل آیکون حذف یا درواقع تصویر سطل زباله میشود که نشان دهنده عملیات حذف است.
بیشتر یاد بگیرید: لیست کامل تگ های html که هیچ کس به شما نخواهد گفت
آیکون های Google
شرکت گوگل هم اقدام به انتشار فونت نموده است.material icons ها از جمله آیکون های گوگل هستند که در عین سادگی، زیبا و دارای ظاهر کاربر پسندانه ای هستند و به عنوان آیکن هایی با تصاویر استاندارد در UI وب سایت ها مورد استفاده قرار میگیرند. آیکون های متریال به راحتی با پروژه وب شما ترکیب می شوند. تمام آیکون های متریال به یک فونت اختصاص داده شده که دارای ویژگی های تایپوگرافی است که براحتی توسط مرورگرهای مدرن و جدید پشتیبانی می شود. برای استفاده از آیکون های متریال کافی است که وارد وب سایت با آدرس https://developers.google.com/fonts/ شوید و گوگل آیکون ها را دانلود کنید و براحتی آنرا در بالاترین قسمت صفحه Html در بخش Head اضافه کنید.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
برای استفاده از آیکون های متریال از این ساختار تبعیت کنید:
<i class="material-icons">face</i>
ممنون از اینکه با ما همراه بودید. امیدوارم توانسته باشم تمامی نکات را به شما عزیزان یاد داده باشم. با نظرات و پیشنهادات خود، ما را در این راه یاری کنید.
نظر شما در تصمیم دیگران اثرگذار است.
لطفا برای همراهان درسمن و بهتر شدن دوره نظر خود را بنویسید.