شما می توانید با عضویت در انجمن پرسش و پاسخ درسمن هرگونه سوالی دارید را مطرح کنید

فونت‌ها و آیکون ها در Css

تاریخ بروزرسانی : ﺳﻪشنبه 28 خرداد 1398

تعداد بازدید : 260

گروه دوره : HTML-CSS

زمان خواندن مقاله : 10دقیقه

در این مطلب قصد داریم درمورد فونت ها در css و نحوه استفاده کردن از آنها را آموزش دهیم.

فونت‌ها و آیکون ها در Css

فونت‌ها در Css

در این مقاله میخواهیم درمورد فونت ها  و آیکون ها در css  صحبت  کنیم .قبل از به وجود آمدن  css3  ما باید از فونت هایی استفاده می کردیم که روی سیستم کاربر موجود و نصب بود. با استفاده کردن از css  شما می توانید از هر فونتی که دوست دارید استفاده کنید و فونت های شما از طریق دستور font-face  در ccs3  قابل مشاهده می باشد.                                 

همانطور که میدانید فونت‌ها دارای فرمت‌ها و انواع مختلفی هستند، فرمت‌هایی از قبیل WOFF ، EOT، TTF و...

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

دستور Font-Face

با استفاده از این دستور می توانیم فونت هایی که مورد نظرمان هستند با توجه به استایل وب سایتمان اعمال کنیم. با دستور Font-Face نه تنها می توانیم از فونت های سفارشی استفاده کنیم و آنها را روی وب سایتمان تنظیم

کنیم بلکه میتوانیم از چندین فونت بصورت همزمان استفاده کنیم. با استفاده از این قابلیت هر فونتی که به قالب ما نزدیکتر است بصورت اتوماتیک از مخزن گرفته شده و سپس اعمال میشود. این دستور شامل دو خصیصه به نام font-family و src است. که با استفاده از خصیصه font-family لیستی از فونت های مورد نظرمان را مشخص میکنیم که در زمان

مناسب کدام فونت استفاده شود.کافی است که نام فونت های خود را با ویرگول از یکدیگر جدا کنیم و با استفاده از خصیصه SRCآدرس فونت مورد نظر یا منبع(Source) آنرا مشخص میکنیم. شکل نوشتاری این دستور در مثال زیر آورده شده است:

Font-face

}

   ; ' نام فونت '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 شامل آیکون حذف یا درواقع تصویر سطل زباله میشود که نشان دهنده عملیات حذف است.
 

آیکون های 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>


اشتراک گذاری

کلمات کلیدی :
فونت‌ها در Css

توضیحاتی در مورد نویسنده این مقاله :
زهرا چگینی زهرا چگینی

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


نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد .
برای ارسال نظر نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.

گروه مقالات


آموزشی
18
علمی
16
تحقیقاتی
22


به دنبال هر آموزشی هستید در اینجا به دنبال آن باشید .