مزایای استفاده از فونت ها و آیکون های CSS چیست؟

آیکون های css و وب فونت ها تفاوت چندانی از نظر حجم ندارند و زمان لود شدنشان در وب سایت خیلی کم تر از لود شدن عکس می باشد. از این رو این موارد بسیار برای استفاده در طراحی های سایت مناسب هستند.

مزایای استفاده از آیکون های CSS

آیکون ها، فونت هایی هستند که به جای حروف یا اعداد، حاوی نماد ها و حروف اصلاح شده هستند. وب فونت ها برای طراحان وب محبوب هستند زیرا شما می توانید آن ها را با CSS به همان شیوه متن معمولی سبک کنید. همچنین از آنجا که برداری هستند، به راحتی قابلیت مقیاس پذیری را دارند. آن ها کم حجم هستند، بنابراین به سرعت بارگیری می شوند و در همه مرورگر ها پشتیبانی می شوند. معمولاً آیکون های css فقط یک رنگ هستند و با ابعاد برابر ساخته می شوند، مانند 16 پیکسل در 16 پیکسل یا 32*32*32.

جلوه های CSS3 در صفحه نمایش بسیار خوب به نظر می رسد. دستکاری آیکون ها با CSS3 بسیار آسان است. آیکون ها یک روش کاملاً ساده برای استفاده از طراحی ریسپانسیوهستند. ارائه متن و چینشی که برای اندازه های مختلف بهم نریزد بسیار ساده است، اما تغییر اندازه تصاویر بسیار سخت تر است.

تغییر رنگ آن ها یا افزودن سایه به شکل آیکون css نیز ساده است. استفاده از آیکون های css چند مشکل دارد. در حالی که می توانید رنگ آن ها را تغییر دهید، نمی توانید بیش از یک رنگ استفاده کنید. طرح های ساده و مینیمال، تمیز و تک رنگ در حال حاضر محبوب هستند، بنابراین مسئله چندان مهمی نیست، اما هنوز هم باید از آن آگاهی داشت و مسئله دیگر مربوط به قابلیت دسترسی است که چندان آسان نیست، مخصوصا اگر بخواهید از آیکون های خاصی استفاده کنید.

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

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

با رونق CSS3، به عنوان یک راه حل، تعدادی از سرویس های وب فونت font-face@ ظهور کردند، بهترین و معروف ترین آن ها احتمالاً Typekit است. Typekit یک راه حل زیبا داشت؛ کافی بود در کتابخانه گسترده فونت های آن ها را جستجو کنید، سپس فقط کدی را کپی و جای گذاری کنید تا آن ها را در وبسایت خود پیاده سازی کنید.

اما در حال حاضر Google Web Fonts از نظر هزینه کاملا بهترین انتخاب شماست. تعدادی سرویس دیگر نیز وجود دارند که میزبان فونت ها هستند و همچنین امکان دسترسی به فونت های دارای مجوز تجاری را نیز فراهم می کنند.

چگونه از فونت ها و آیکون های CSS استفاده کنیم؟

حال که کمی در مورد وب فونت ها و آیکون های CSS توضیح دادیم، احتمالا کنجکاوی شما را در رابطه با نحوه استفاده از آن ها را بر انگیخته باشیم. بیایید بررسی کنیم که چطور می توان از این موارد به صورت کاربردی برای طراحی وب سایت استفاده کرد. امروز قصد داریم در محیط VS Code از این موارد استفاده کنیم.

نحوه استفاده از فونت های CSS

استفاده از فونت ها و آیکون های css بسیار راحت است و تنها نیاز دارید کمی کد زدن را یاد بگیرید. با استفاده از وب فونت ها، فونت های دلخواه به راحتی می توانند به صفحه HTML شما اضافه شوند. کافیست فرمت های مخصوص فونت هایی که قصد دارید از آن ها استفاده کنید را دانلود کنید و در کد های css خود از آن ها استفاده کنید. البته قبل از آن باید کد های اولیه برای شروع کد نویسی خود در صفحه HTML خود را نوشته و در یک تگ <p></p> متنی بنویسید.

سپس به صفحه css خود بروید و به پاراگرافی که در صفحه html ایجاد کردید، استایل دهی کنید. قبل از این که استفاده از وب فونت ها را یاد بگیرید لازم است نحوه استفاده از فونت های استاندارد را بدانید. در اینجا از ویژگی Font-Family استفاده می کنیم. با نوشتن این تکه کد می توانید یکی از فونت های استاندارد را به دلخواه برای متن خود استفاده کنید.

حال برای استفاده از وب فونت های زیبا تر می توانید همانطور که در بالا توضیح داده شد، آن وب فونت را دانلود کرده و در کد های خود استفاده کنید. فایل های وب فونت مورد نظرتان را با فرمت های مخصوص را دانلود کنید و در پوشه پروژه خود بگذارید. برای انتخاب فونت می توانید از وبسایت Google Web Fonts استفاده کنید که شامل فونت های زیادی است. فونت خود را انتخاب کنید و روی “Download Family” کلیک کنید.

وب فونت ها در فرمت های مختلفی موجود اند که شامل TTF ،OTF ،WOFF و EOT می شوند، اما امروز ما تنها از فرمت TTF استفاده می کنیم. در پروژه های جدی بهتر است از تمامی این فرمت ها استفاده کنید تا فونتتان در تمامی مرورگر ها و نسخه هایشان قابل مشاهده باشد. حال به صفحه کد هایمان بر می گردیم و در صفحه css کد زیر را وارد می کنیم.

در font-face@ نام فونت خود را وارد کنید و سپس با src، آدرس فایل وب فونت بر روی کامپیوتر خود را وارد کنید تا قابل دسترسی باشد. در آخر به متنی که در صفحه html نوشته بودیم فونت جدید را اضافه می کنیم. کافیست مانند همانطور که در بالا توضیح دادیم از font-family استفاده کنید. حالا می توانید نتیجه را با باز کردن فایل html در مرورگر مشاهده کنید.

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

استفاده از آیکون های css تا حدودی ساده تر از استفاده از وب فونت ها است و فقط کافیست کتابخانه های آن ها را به تگ <head> صفحه html خود اضافه کنید. برای استفاده از آیکون های css دو تگ پر استفاده وجود دارد که شامل <i> و <span> می باشد. در اینجا ما از تگ <i> استفاده می کنیم.

برای انتخاب آیکون مورد نظر خود به یکی از وبسایت های وب آیکون ها می توانید مراجعه کنید. محبوب ترین این وبسایت ها Font Awesome، Bootstrap و Google هستند. برای شروع ما وبسایت Font Awesome را انتخاب کردیم. برای استفاده از این وبسایت رایگان باید ابتدا در آن عضو شوید.

پس از ورود، می توانید تگی که می بینید را کپی کنید و برای استفاده از آیکون های مورد نظرتان آن را داخل تگ <head> جایگزاری کنید.

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

تغییرات مورد نظرتان روی آیکون را ایجاد کرده و کدی که وبسایت به شما می دهد را کپی کنید.

کد را در تگ <body> جاگذاری کنید.

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

امیدواریم این مطلب برای شما مفید بوده باشد. همچنین اگر با طراحی وبسایت در محیط VS Code آشنایی ندارید، می توانید مقاله “چگونه با ویژوال استودیو کد (Visual Studio Code) یک وب سایت طراحی کنیم؟” را مطالعه کنید.

نوشته چگونه از فونت ها و آیکون های CSS در طراحی وب با VS Code استفاده کنیم؟ اولین بار در ممتاز دیزاین. پدیدار شد.

«ویرایشگر متن» چیست؟

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

ویرایشگر های متن خاص برای نوشتن کد، تعدادی مزیت را ارائه می دهند:

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

انتخاب ویرایشگر متن

تعدادی ویرایشگر متن برای انتخاب وجود دارد. به عنوان مثال، Visual Studio Code یکی از محبوب ترین ویرایشگرهای متن است که توسط توسعه دهندگان استفاده می شود. (این ویژوال استودیو کد است و نه ویژوال استودیو) ویرایشگرهای متنی معروف دیگری که ممکن است از آن ها شنیده باشید Atom و Sublime Text هستند.

نصب ویژوال استودیو کد

بنابراین، ما ویرایشگر متن خود را انتخاب کرده ایم، اکنون فقط باید آن را در رایانه خود نصب کنیم! روند نصب رایانه های دارای MacOS ،Windows و Linux بسیار مشابه خواهد بود و استفاده از Visual Studio Code در همه آن ها یکسان خواهد بود.

ابتدا ویژوال کد را دانلود کنید. پس از اتمام دانلود فایل Visual Studio Code باید آن را نصب کنیم. فایل Visual Studio Code را در مدیر فایل خود پیدا کنید، برنامه ای که به شما امکان می دهد فایل ها و پوشه ها را در رایانه خود مشاهده کنید.

فایل .exe را با کلیک روی آن و نصب برنامه را باز کنید. روی “بعدی” کلیک کنید و سپس در نهایت “پایان” را کلیک کنید. آن را در مدیر پرونده خود پیدا کنید، دوبار کلیک کنید و “نصب” را انتخاب کنید. مطمئن شوید که برنامه Visual Studio Code خود را در مکانی ذخیره کرده اید که می دانید به راحتی می توانید آن را پیدا کنید.

حال شما ویرایشگر متن خود را با موفقیت نصب کرده و آماده شروع کدگذاری هستید!

برای شروع یک پروژه از Visual Studio Code استفاده کنید

برای انجام این کار، باید از ویرایشگر متنی که در بالا نصب کردیم استفاده کنیم. بیایید لحظه ای سعی کنیم Visual Studio Code را امتحان کنیم. محیط ویژوال کد به صورت زیر خواهد بود. (احتمالا با کمی تفاوت جزئی)

پوشه های توسعه چیست؟

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

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

بیایید یک پروژه بسازیم

در زیر مراحلی وجود دارد که باید برای ایجاد یک پوشه جدید برای همه پروژه های برنامه نویسی خود دنبال کنید. شما همچنین یاد خواهید گرفت که چگونه یک پوشه پروژه جدید را در Visual Studio Code بسازید و اولین پروژه HTML با جمله “Hello world” را بسازید.

یک پوشه توسعه ایجاد کنید

با استفاده از مدیر فایل یا داخل ویژال کد خود یک پوشه بسازید. مطمئن شوید که پوشه ای است که مرتباً از آن بازدید می کنید و آن را به خاطر می سپارید. می توانید پوشه جدیدی به نام پروژه ایجاد کنید و درون پوشه پروژه، پوشه جدیدی به نام HelloWorld ایجاد کنید. هرچه به این پوشه اضافه کنید بخشی از پروژه HelloWorld شما خواهد بود.

برای شروع از قسمت File روی گزینه Add Folder to Workspace کلیک کنید.

سپس در بخش باز شده، روی آیکون پوشه کلیک کرده و یک پوشه به اسم Hello World ایجاد کنید.

حالا وقت آن است که اولین فایل خود را بسازید. روی آیکون درست کردن فایل کلیک کنید.

قبل از اینکه یاد بگیرید چگونه می توانید فایل ها را به یک پوشه پروژه اضافه کنید، مهم است که هدف از پسوند فایل ها را بدانید. پسوند فایل، پسوند یک نام فایل است (3 یا 4 نویسه آخر در یک نام فایل، قبل از آن یک نقطه وجود دارد) و نوع محتوای فایل را توصیف می کند. به عنوان مثال، پسوند فایل های اچ تی ام ال html است و به مرورگر (و سایر برنامه ها) می گوید که محتوای فایل را به عنوان یک سند HTML تفسیر کنند. پس از دانلود پوشه پروژه توسط Visual Studio Code می توانید فایل ها را اضافه کنید.

نام فایل جدید را با پسوند فایل مناسب آن تایپ کنید (به عنوان مثال .html ،.css ،.csv). مهم است که پسوند فایل را به درستی وارد کنید، بنابراین برنامه هایی مانند linter ها می دانند که چگونه محتوای آن را تفسیر کنند. پس از اتمام، Enter را فشار دهید.

توصیه می کنیم نام اولین فایل Html خود را index بگذارید.

شروع به کدگذاری کنید

کد HTML زیر را کپی و پیست کنید:

<html> 
  <head>
    <title>Hello World</title> 
  </head>
 
  <body> 
    <h1>Hello World</h1> 
  </body>
</html>

فایل خود را غالباً با ویژگی ذخیره خودکار ذخیره کرده و اگر می دانید چگونه از آن استفاده می کنید، تغییرات را با سیستم کنترل نسخه پیگیری کنید. (برای روشن کردن «ذخیره خودکار»، روی «File» سپس «ذخیره خودکار» کلیک کنید. وقتی روشن است، علامت تأیید در کنار «ذخیره خودکار» مشاهده خواهید کرد.) با این کار احتمال از دست دادن کار ذخیره نشده کاهش می یابد.

پسوند های پرونده و برجسته سازی نحو

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

برجسته سازی سینتکسی ابزاری برای سهولت در خواندن کد است. به فایل index.html خود نگاهی بیندازید. متن و برچسب ها با رنگ های مختلف هستند. به این ترتیب Visual Studio Code سینتکس .html را برجسته می کند. با هر زبان جدیدی که یاد می گیرید، Visual Studio Code متن را به گونه ای برجسته می کند که خواندن کد شما را آسان می کند.

فایل HTML خود را در مرورگر مشاهده کنید

در این مرحله، پرونده شما آماده مشاهده در یک مرورگر وب است. مراحل زیر باید خارج از ویژوال استودیو کد انجام شود:

از طریق مدیر فایل خود به پرونده index.html در پوشه Hello World بروید.

index.html را دوبار کلیک کنید یا باز کنید. این صفحه باید در مرورگر وب پیش فرض شما باز شود. حال وقت آن است که خود را شگفت زده کنید و از کار دستی خود متعجب شوید – شما اولین پروژه خود را با Visual Studio Code ساختید.

تبریک می گویم! شما با موفقیت ویرایشگر متن خود را تنظیم کرده و آماده ایجاد وب سایت در رایانه خود هستید.

از این جا به بعد شما نیاز به مقداری دانش برنامه نویسی در مورد زبان های Html و css دارید تا بتوانید در یک پروژه کد بزنید. کد زنی در محیط ویژوال کد با توجه به میزان خلاقیتی که نشان می دهید می تواند بسیار هیجان انگیز باشد. با این حال اگر می خواهید از محیط های متفاوت تر IDE اسفاده کنید می توانید به Adobe Dream Weaver و Bootstrap مراجعه کنید. البته توجه داشته باشید که دو محیط ذکر شده با ویژوال استودیو کد متفاوت اند.

نوشته چگونه با ویژوال استودیو کد (Visual Studio Code) یک وب سایت طراحی کنیم؟ اولین بار در ممتاز دیزاین. پدیدار شد.