نحوه استفاده از فونت وب ها و فونت آیکون ها

اگر شما هم دنبال آموزش مفید و جذاب هستید به ما بپیوندید و جادوی طراحی وب را تجربه کنید! این مسیر جذاب و خلاق طراحی وب را اکتشاف کنید و به یک طراح وب ماهر تبدیل شوید.

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

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

ظاهری حرفه‌ای برای وبسایت خود ارائه دهید و از تکنولوژی‌های روز و فونت های پیشرفته برای جذابیت وبسایت استفاده کنید.

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

استفاده از آن‌ها می‌تواند ظاهری زیبا به وبسایت بدهد و همچنین تجربه کاربری(ux) را برای بازدیدکنندگان جذاب و جذاب تر کند.

پیدا کردن فونت

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

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

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

استفاده از Font Awesome:

فونت Awesome یکی از محبوب‌ترین مجموعه‌های آیکون و فونت در وب است. برای دانلود فونت Awesome، می‌توانید از وب‌سایت رسمی آن (https://fontawesome.com) استفاده کنید. در این سایت، شما می‌توانید آخرین نسخه از فونت Awesome را دانلودکنید. برای دانلود می‌توانید به صفحه دانلود مراجعه کنید و سپس آخرین نسخه را دانلود کنید.

پس از دانلود فایل باید آپلود شود، قدم اول فایل fontawesome.min را در قسمت css کپی میکنیم. یک پوشه به نامه فونت درست میکنید و تمامی فونت های دانلود شده را داخل پوشه کپی کنید. با این روش استایل مربوط به Font Awesome به وب‌سایت شما اضافه میشود.

حالا که فایل استایل فونت Awesome در وب‌سایت شما اضافه شده است، می‌توانید از آیکون‌ها در طراحی خود استفاده کنید.

نصب فونت آیکون

نصب فونت وب ها و فونت آیکون ها در برنامه نویسی وب یک بخش اساسی از طراحی و توسعه وب‌سایت‌ها و برنامه‌های وب است. این آیکون‌ها می‌توانند به تجربه کاربری و زیبایی بصری وب‌سایت کمک کنند.

نحوه استفاده از فونت آیکون ها به این صورت است ک شما آیکون مورد نظر را از سایت Awesome پیدا میکنید. هر آیکون کد مخصوص به خود را دارد آن را کپی و استفاده میکنید.

معرفی فونت های بهینه شده برای استفاده از وبسایت ها:

فونت WOFF و WOFF2 :

فونت‌های WOFF به خوبی با اکثر مرورگرها سازگاری دارند و از ویژگی‌های پیشرفته CSS وبسایت‌ها بهره می‌برند. به عنوان یک طراح وب، استفاده از WOFF و WOFF2 به شما کمک می‌کند، فونت‌های بهتری را روی وبسایت‌تان اجرا کنید تا تجربه بهتری برای بازدیدکنندگان خود به وجود بیاورید.

فونت EOT:

فونت‌ EOT یکی قدیمی‌ترین فونت های وب محسوب می‌شود. EOT فقط در مرورگر اینترنت اکسپلور قابل پشتیبانی بود. با توجه به روند کاهش استفاده از این مرورگر و افزایش استفاده از مرورگرهای دیگری مثل کروم و فایرفاکس، استفاده از فونت‌های EOT به شکل گسترده در وب کاهش یافته است.

فونت TTF:

فونت‌ TTF فونت های بسیار رایج برای استفاده از طراحی گرافیکی سایت هستند. فونت‌های TTF ابتدا برای استفاده در کامپیوترها و پرینترها طراحی شدند. با افزایش استفاده از وب و نیاز به فونت‌های متنوع، فرمت TTF نیز وارد دنیای وب شد.

این آموزش برای چه کسانی مناسب است؟

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

اگر قصد یادگیری طراحی سایت وردپرسی با کدنویسی را دارید می توانید از آموزش های وایت وال نظیر “آموزش پروژه محور طراحی سایت با وردپرس” ، “آموزش پروژه محور سایت فروشگاهی با وردپرس” ، “آموزش رایگان طراحی سایت با وردپرس” استفاده کنید.