آموزش کار با فونت (Font) در CSS3

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

نام فونت: font-family
استایل فونت: font-style
سایز فونت: font-size
وزن فونت: font-weight

تنظیم اسم فونت

برای تنظیم کردن اسم فونت مورد نظر در CSS3 شما میتوانید با استفاده از ویژگی `font-family` این کار را انجام دهید، مثال:

font-family: &quotRoboto&quot

اگر بخواهید از فونت برای کل سایت استفاده کنید باید آن را داخل تگ body قرار دهید، مثال:

با استفاده از کد زیر میتوانید فونت را از طریق فایل CSS تنظیم کنید.

body {
    font-family: &quotRoboto&quot
}

با استفاده از کد زیر میتوانید فونت را از طریق فایل html تنظیم کنید.

<style>
    body {
        font-family: &quotRoboto&quot
    }
</style>

یا میتوانید به صورت مستقیم به تگ body با ویژگی style تنظیم کنید، مثال:

<body style=&quotfont-family: 'Roboto'&quot> 
    <h1>Mimoc Website</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>

آموزش استفاده از فونت جایگزین

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

فونت جایگزین چه اهمیتی دارد؟

فونت جایگزین برای وقتی استفاده میشود که به هر دلیلی فونت اصلی شما لود نمیشود و اگر شما از فونت جایگیزن استفاده نکنید قالب سایت شما بهم میریزد. برای تنظیم فونت های جایگزین تنها کافیست اسم فونت‌های جایزگزین را بعد از فونت اصلی قرار دهید.

font-family: &quotRoboto&quot, &quotNoto Sans Kawi&quot, &quotLinefont&quot, &quotAgbalumo&quot

پس فونت اولی ( Roboto ) میشه فونت اصلی ما، اگه به هر دلیلی فونت Roboto نمایش داده نشد فونت Noto Sans Kawi جایگزین میشه و اگه باز دوباره فونت Noto Sans Kawi نمایش داده نشد فونت Linefont و…

استفاده از فونت های چند کلمه ای

اگر در اسم فونتی که استفاده میکنید، فاصله یا space وجود داشته باشد نمیتوانید مثل کد زیر از آن استفاده کنید:

font-family: Noto Sans Kawi;

برای رفع این مشکل شما باید اسم فونت مورد نظرتان را بین دو تا Double Quotation یا "FontName Here" قرار دهید، مثال:

font-family: &quotNoto Sans Kawi&quot, Roboto;

آموزش استفاده از ویژگی Font-Style در CSS3

با استفاده از ویژگی font-style شما میتوانید مشخص کنید که سبک نمایش متن شما در سایت به چه صورت باشد؛ بطور مثال شما میتوانید فونت سایت را به شکل ایتالیک/italic نمایش دهید، کد:

font-style: italic;

آموزش استفاده از ویژگی Font-Size در CSS3

با استفاده از ویژگی font-size میتوانید سایز مربوط به متن موردنظر را تنظیم کنید، مثال:

body {
    font-size: 20px;
}

آموزش استفاده از ویژگی Font-Weight در CSS3

با استفاده از ویژگی font-weight میتوانید وزن یک فونت را تنظیم کنید، در واقع به نازک یا کلفت بودن یک فونت وزن میگویند.

+ توجه: برای تنظیم وزن یک فونت شما میتوانید از مقادیر 100-900 استفاده کنید.

+ توجه:‌ باید فونتی هم که استفاده میکنید دارای وزن های مختلفی باشد تا بتوانید آن ها را در سایت خود استفاده کنید.

هر چقدر که از 100 تا 900 مقدار font-weight را افزایش میدهیم، فونت Bold تر میشود، مثال:

font-weight: 500;

در این مقاله با آموزش استفاده از فونت (Font) در CSS3 آشنا شدید. امیدوارم که این مقاله برای شما مفید واقع شده باشد؛ در صورتی که برای شما در خصوص این مقاله سوالی پیش آمده است، حتما در قسمت کامنت‌ها برای ما ارسال کنید.

منبع:‌ وبسایت میموک