آموزش CSS3: اضافه کردن فونت به قالب سایت (قسمت دوم)

قسمت دوم از دوره آموزش CSS3

🤓سلامی به جذابیتِ ایران سنس و درودی به دور از فونت های پیش فرض، خدمت شما فونت جویانِ عزیز🤓

آیا از راست چین نبودن متن های سایتِ خود اندوهگین شده اید؟🤫

آیا از فونت Arial رنج می برید؟🤬

آیا وقت آن رسیده که فونت سایت تان را تغییر دهید؟🤔

آیا دوست دارید فونت ایران سنس را در سایت خود اضافه نمایید؟🤗

اگر پاسخ شما به این سوالات بلی است، تا انتهای این مطلب همراه ما باشید تا به صورت کاملاً عملی فونتِ زیبای IranSans را به وب سایت خود بیافزاییم.

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

اما بپردازیم به جلسه دوم از سری ویدئوهای آموزش CSS3، این شما و این هم:

👇📹👇فیلم آموزشی اضافه کردن فونت به قالب سایت👇📹👇

 

آشنایی با خاصیت Text Transform در CSS

خاصیت Text-Transform صرفاً در زبان انگلیسی کاربرد دارد و سه مقدار اصلی را می تواند درون خود جای دهد که در ادامه هر یک را شرح خواهیم داد:

🔵Capitalize: زمانی که این مقدار را درون خاصتی Text-Transform قرار می دهیم، حرف اولِ تمامی کلمات به شکل بزرگ نمایش داده می شود.

🔵Uppercase: در صورتی که مقدار Text-Transform برابر Uppercase باشد، تمامی حروف به صورت بزرگ نمایش داده خواهد شد.

🔵Lowercase: و هنگام درج این مقدار در Text-Transform کلیه ی حروف موجود در صفحه، به شکل کوچک تبدیل خواهند شد.

فونت های Serif و Sans-Serif در وب

قبل از این که به بررسی فونت ها بپردازیم، با به کارگیری خاصیت Font-Family می توان، فونت متن ها را تغییر داد. البته ما صرفاً فونت های از پیش تعریف شده یا فونت های سفارشی (دلخواه)خود را می توانیم در این خاصیت قرار دهیم.

به عنوان مثال: فونت Arial یک فونت از پیش تعریف شده است و به محض قرار دادن آن در خاصیت Font Family مرورگرها آن را خواهند شناخت و تغییراتِ لازم را اعمال خواهند کرد.

اما فونتی همانند: IranSans یا WebYekan برای مرورگرها آشنا نیست و می باید یکسری مستندات مربوط به این فونت ها را در اختیار مرورگرها قرار دهیم که آن ها را پردازش کرده و به کاربران نمایش دهند. البته نگران نباشید در ادامه به طور کامل موضوع اضافه کردن فونت به قالب سایت را مفصلاً مورد بحث و بررسی قرار خواهیم داد.

🌛اما از هرچه بُگذریم سخن فونت خوشتر است🌜

به طور کلی (در زبان انگلیسی)سه نوع فونت وجود دارد که در زیر، به صورت خلاصه هر یک را توضیح خواهیم داد:

🔵Serif: شاید باورتان نشود اما توضیح دادن این نوع فونت، صرفاً به ورایت تصویر امکان پذیر است (اما تلاش خودم را خواهم نمود). تمامی فونت هایی که حروف آن ها دارای تیزی است، فونت های Serif نام دارند. مانند: فونت Times New Roman که نمونه آن در تصویر زیر واضح و مبرهن است.

🔵Sans-Serif: در زبان انگلیسی، واژه Sans به معنی بدون است و در اغلب موارد، با هدف منفی نمودنِ یکسری کلمات، قبل از آن ها بکار برده می شود. حال از شانس بدِ ما این کلمه قبل از Serif درج شده است. پُر واضح است که تمامی فونت هایی که تیزی (همانی که در بالا درباره اش سخن گفتیم)نداشته باشد، Sans-Serif نام دارند. مانند: فونت Tahoma که در عکس زیر آشکار است.

🔵Monospace: به فونت هایی گفته می شود که عرضِ تمامی کاراکترهای آن هم اندازه است. یکی از معروف ترین فونت های یک اندازه، فونت Monaco نام دارد.

🔶نکته کنکوری(۱): اگر نام فونت مورد نظر، بیش از یک کلمه باشد، باید در ابتدا و انتهای آن کاراکتر ” یا  ‘ قرار گیرد(در غیر این صورت مرورگر آن را نمی شناسد).

🔶نکته کنکوری(۲): در حالت ایده آل، بهتر است در خاصیت Font Family چند فونت را قرار دهیم تا اگر از شانس بدِ ما، یکی از فونت ها توسط مرورگرها پشتیبانی نشد، فونتِ دیگری را به کاربر نهایی (End User)نمایش دهد.

دو خاصیت مهم و کاربردی در CSS

استفاده از ۲ خاصیت کارآمد در CSS تحت عناوین Font-Size و Font-Weight بسیار متداول است که هر یک را به صورت جداگانه در زیر بررسی خواهیم نمود:

🔵Font-Size: با بهره گیری از این خاصیت قادر هستیم، اندازه فونت ها را تغییر دهیم. این Property مقادیری از نوع عددی (em، px و %)و متن های از پیش تعریف شده را می تواند درون خود جای دهد.

🔶نکته کنکوری: اندازه فونت متون در حالت پیش فرض، ۱۶px می باشد. بنابراین اگر font-size را برابر ۲em قرار دهیم، مقدار پیشفرض را دو برابر کرده و نهایتاً اندازه متن مورد نظر ۳۲px خواهد شد.

از طرفی می توانیم یکسری مقادیر Pre Define مانند: Large، X-Large، Small و غیره را در آن قرار دهیم که هر کدام نیز مقادیری از پیش تعیین شده دارند که برای درک بهتر تفاوت هرکدام می باید به صورت عملی آن ها را تست نمایید.

🔵Font-Weight: در صورت نیاز می توان ضخامت متن ها را با استفاده از این خاصیت، افزایش یا کاهش داد. Font-Weight نیز همانند خاصیت Font-Size مقادیری از نوع عددی و متنی را می پذیرد

آموزش راستچین کردن متون در CSS

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

در وب هم چنین مسئله ای وجود دارد که با بهره گیری از خاصیت Direction می توان این اتفاق را مدیریت کرد. این خاصیت ۲ مقدار مهم را می تواند درون خود قرار دهد:

🔵RTL: این مقدار سرنام کلمات Right To Left می باشد و ترجمه آن از راست به چپ است. درصورتی که قصد داریم متن های خود را به زبان فارسی در وب منتشر نماییم، تنها گزینه استفاده از مقدار rtl می باشد.

🔵LTR: این مقدار نیز سرنام واژه های Left To Right است و ترجمه آن از چپ به راست می باشد. مقدار ltr دقیقاً عکسِ rtl عمل می کند و زمانی که قصد داریم قالب سایت خود را به زبان انگلیسی طراحی کنیم، تنها راه ما بهره گیری از مقدار ltr است.

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

اضافه کردن فونت به قالب سایت در CSS

یکی از دغدغه های رایجِ بسیاری از وبمستران، اضافه کردن فونت به قالب سایت است که در این قسمت قصد داریم به طور دقیق به شرح این موضوع بپردازیم. برای اضافه کردن فونت به قالب سایت لازم است فایل مربوط به فونت دلخواه خود را در اختیار داشته باشیم. این فایل های می تواند با فرمت های متفاوتی در سطح اینترنت وجود داشته باشد که رایج ترین آن ها برای انتشار در وب، فرمت های Woff، TTF و Woff2 است که ایده آل ترین حالت (Best Practice)این است که این سه فرمت را به طور همزمان در سایت خود داشته باشیم تا سایت ما در همه مرورگرها به درستی نمایش داده شود.

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

اکنون پیش فرض ما این است که شما فایلِ فونت مورد نظر خود را در اختیار دارید (حداقل یکی از سه فرمت بالا). در این صورت سه گام کلیدی پیش روی شماست:

💠گام اول: ابتدا دستور Font-Face@ را درج کرده و آکولادهای معروفِ CSS را باز و بسته می کنیم تا گام دوم و سوم را در آن فضا پیاده سازی نماییم.

💠گام دوم: در این مرحله نیاز است تا برای فونتِ دلخواه خود، نامی منحصر به فرد تعیین نماییم تا در صورت نیاز، از آن استفاده نماییم. من باب مثال: در تصویر زیر، نام فونت خود را IranSans قرار دادیم (این اسم هر چیزی می تواند باشد). بدیهی است که تعریفِ نام باید در خاصیت Font-Family انجام شود.

💠گام سوم: در قدم پایانی می باید آدرس فونت خود را به مرورگرها بدهیم تا آن را پردازش کرده و به کاربر نهایی نمایش دهند. ابتدا از واژه Src استفاده کرده و پس از آن علامت : را قرار می دهیم و در ادامه باتوجه به عکس زیر، درون کلید واژه Url آدرس نسبی یا مطلق فایل خود را قرار می دهیم و در نهایت با درج کلمه Format احتیاج است که به مرورگر بگوییم، فرمت فونتِ ما چه چیزی است. هر فرمت، یک مشخصه ی از پیش تعریف شده دارد که مشخصه ی فرمت TTF عبارت truetype می باشد که مطابق با تصویر زیر، مقداردهی مربوطه را انجام دادیم.

اکنون کارِ ما به اتمام رسیده و می توانیم از فونت دلخواه خود استفاده نماییم. فقط کافیست به هر المانِ متنی با بهره گیری از خاصیت Font-Family نامِ فونتی که در گام دوم مشخص کردیم را درون آن قرار دهیم.

بهره گیری از پلاگین قدرتمند Emmet

همان طور که مطلع هستید، پلاگین فوق العاده Emmet که در جلسات قبل آموزش HTML5 نصب و راه اندازی نمودیم، کدنویسی را برایمان سریع تر و لذت بخش تر می کند که در این بخش قصد داریم به طور مختصر به شرح سه نوع از دستورات آن بپردازیم:

💠تگ های تو در تو: با استفاده از کاراکتر < می توان چندین تگ تو در تو ایجاد کرد. به عنوان مثال: اگر بخواهیم داخل تگ <div> یک تگ <img> قرار دهیم. دو راه پیش روی ماست. راه اول اینکه به صورت طبیعی این کار را انجام دهیم و راه دوم از ShortCode پلاگین Emmet استفاده نماییم. در این صورت تنها کافیست دستور div>img را بنویسیم و دکمه Tab موجود در کی بورد را بفشاریم. به شما تبریک می گوییم، تمامی کدهایی که قصد نوشتن آن ها را به روش طبیعی داشتید، به شکل اتوماتیک ساخته شدند.

💠تگ ها در کنار هم: حال اگر بخواهیم چندین تگ در کنار هم تولید شود، کافیست به جای علامت < (که برای تگ های تو در تو مورد استفاده قرار می گرفت)از علامت + استفاده کنیم. من باب مثال: اگر بخواهیم تگ های <span>، <table> و <a> در کنار هم ساخته شوند، صرفاً کافیست دستور table + span + a را در Text Editor خود درج نماییم.

💠تگ ها + درج کلاس: اما اگر بخواهیم تگ هایی تو در تو و کنار هم همراه با ID و Class دلخواه تولید شود، صرفاً لازم است قبل از مقدار کلاس علامت . و پیش از مقدار آیدی نیز علامت # افزوده شود. البته هنوز درخصوص Class و ID صحبت نکرده ایم و در جلسه آینده به طور مفصل این موضوع را پوشش خواهیم داد.

علی ایحال می توانید با نگاهی عمیق به تصویر زیر، دستورات جادویی پلاگین Emmet را به راحتی درک نمایید:

جمع بندی اضافه کردن فونت به قالب سایت به قلم محمدرضا یعقوبی

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

فونت ایران سنس جزء فونت های غیر رایگان است که حق نشر آن هم برای وب سایت Fontiran می باشد.

جهت حمایت از موثرینِ این اثر، نسخه اورجینال فونت ایران سنس را از مرجع قانونی آن تهیه نمایید.

🔥امیدوارم همواره سرسبزترین لحظات تان را تجربه کنید. ارادتمند شما، محمدرضا یعقوبی🔥

۲ thoughts on “آموزش CSS3: اضافه کردن فونت به قالب سایت (قسمت دوم)

  1. Avatar
    میترا :

    سلام آقای یعقوبی عزیز من html و css را با سایت شما و دیدن فیلم هاتون یاد گرفتم و خیلی ممنون از اشتراک گذاریتون.
    قسمت سوم css رو پیدا نمیکنم .هنوز تکمیل نشده؟ تو بسته های فروشیتونم نیست .اگه میشه راهنماییم بفرمایید.
    پیشاپیش ممنون از راهنماییتون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

5 ثانیه تا دانلود فاصله دارید

فقط کافیست ایمیل خود را وارد کنید و فیلم وبینار را به صورت کاملاً رایگان دریافت نمایید:
دانلود وبینار طراحی سایت با پاورپوینت 
به شما قول می دهیم ایمیل های اسپم و بیهوده برایتان ارسال نکنیم
close-link
تخفیف 50 درصدی به مناسبت فرارسیدن نوروز 1399 (کدتخفیف: eydi50)
مشاهده همه محصولات
close-image