صفحه اصلی / مقالات / آموزشی / فونت‌ها در Css

فونت‌ها در Css

نام مستعار نویسنده :

تاریخ انتشار : شنبه 21 مهر 1397

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

تعداد لایک ها : 0

فونت‌ها در Css

همانطور که میدانید فونت‌ها دارای فرمت‌ها و انواع مختلفی هستند، فرمت‌هایی از قبیل WOFF، EOT، TTF و… . هر کدام از این فرمت‌ها در مرورگر‌ها با نسخه‌های متفاوت پشتیبانی مختلفی دارند. بنابراین اینکه فونت در سایت شما با چه فرمتی استفاده میشود اهمیت خواهد داشت.
دستور font-face:با استفاده از این دستور می توانیم فونت هایی که مورد نظرمان هستند با توجه به استایل وب سایتمان اعمال کنیم. با استفاده از دستور Font-Face نه تنها می توانیم از فونت های سفارشی استفاده کنیم و آنها را روی وب سایتمان تنطیم کنیم بلکه میتوانیم از چندین فوننت بصورت همزمان استفاده کنیم. با استفاده از این قابلیت هر فونتی که به قالب ما نزدیکتر است بصورت اتوماتیک از مخزن گرفته شده و سپس اعمال میشود. این دستور شامل دو خصیصه به نام font-family و src است. که با استفاده از خصیصه font-family لیستی از فونت های مورد نظرمان را مشخص میکنیم که در زمان مناسب کدام فونت استفاده شود.کافی است که نام فونت های خود را با کاما از یکدیگر جدا کنیم. با استفاده از خصیصه SRC آدرس فونت مورد نظر یا منبع(Source) آنرا مشخص میکنیم. شکل نوشتاری این دستور در مثال زیر آورده شده است:

Font-face{
font-family: ‘نام فونت’;
src: “آدرس فونت”;
}

با این کار ازین پس میتوانیم از نامی که به فونت خود داده ایم در متن‌های سایتمان استفاده کنیم. برای استفاده کافی است در تگی که قصد استفاده آن را داریم، به استایل آن ویژگی font-family همراه با نام فونت دلخواهمان را اضافه نماییم.
بدین شکل آن تگ و متن‌های مربوط به آن تگ از این فونت تبعیت خواهند کرد.

آیکون‌ها در Css:
یکی از راه‌های ایجاد جذابیت و بالا بردن رابط کاربری در سایت، استفاده از آیکون‌هاست. این آیکون‌ها به نوعی همان فونت‌ هستند که به جای کاراکتر‌های الفبا از اشکال وکتوری متنوع تشکیل شده‌اند. برای استفاده از این آیکون‌ها لازم است که اولا به فایل css فونت دسترسی داشته باشیم و ثانیا با استفاده از تگ بلند و صفت کلاس، اقدام به فراخوانی نام آیکون مورد نظر خود کنیم.
سه شرکت معروف اقدام به تولید فایل css این فونت‌ها کردند که به ترتیب آنها و نحوه فراخوانی آنها را بررسی خواهیم کرد:
فونت Awesome: ساده ترین روش برای استفاده از آیکنها در یک صفحه HTML استفاده از کتابخانه font-Awesome است. براحتی میتوانیم کلاس مربوطه را به هر عنصر Inline  اضافه کنیم و از آن استفاده کنیم. برای استفاده از آیکن های مربوط به font-Awesome کافی است که فایل CSS آن را به بخش Head در بالای صفحه Html خود اضافه کنید. برای دسترسی به آیکون های این وبسایت کافی است که به آدرس https://fontawesome.com/icons مراجعه کنید تا به کلیه تصاویر وکتور و آیکن ها دسترسی داشته باشید. بعد از دانلود کتابخانه مربوطه میتوانید آنرا به آسانی به تگ و یا عنصر مورد نظر اضافه کنید. به مثال زیر دقت کنید:

<i class=”far fa-comment-alt-dots”></i>

این شرکت که از طریق لینک مربوطه که در بالا ذکر شده  قادر به مشاهده سایت و خدمات آن خواهید بود، کافیست که برای استفاده از آن  از ساختار ذکر شده استفاده کنید.
که در ساختار برای مثال بالا از آیکون مربوط به پیامک و نظرات استفاده شده است.
آیکون های 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>

برای یادگیری بهتر و جزییات بهتر پیشنهاد میکنیم که ویدیو این قسمت را تماشا نمایید.
آخرین قسمت از دوره رایگان مقدماتی HTML و CSS

________________________________________
برای مشاهده دوره رایگان HTML، همین حالا عضو شوید.
اگر هنوز عضو درسمن نیستید، از طریق لینک زیر اقدام نمایید.
ثبت‌نام در درسمن
مشاهده دوره برای اعضا درسمن


اشتراک گذاری


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

نظرات


احمد غیاثوند

مطلب بسیار مفید بود.متشکرم

برای پاسخ باید وارد شوید

مرتضی
خواهش میکنم.ممنون از شما کاربر درسمنی، پاینده باشید

نظر بدهید

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

گروه مقالات


آموزشی علمی


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

آخرین دوره های منتشر شده




دوره جامع آموزش HTML
مهدی عباسی