در این مقاله میخواهیم درباره فونت‌ها و نحوه استفاده و فراخوانی آنها در CSS3 آشنا شویم، بعد از مطالعه این مقاله شما با موارد زیر آشنا خواهید شد.
- نام فونت: font-family
- استایل فونت: font-style
- سایز فونت: font-size
- وزن فونت: font-weight
تنظیم اسم فونت
برای تنظیم کردن اسم فونت مورد نظر در CSS3 شما میتوانید با استفاده از ویژگی `font-family` این کار را انجام دهید، مثال:
font-family: "Roboto"; در این مقاله میخواهیم درباره فونت‌ها و نحوه استفاده و فراخوانی آنها در CSS3 آشنا شویم، بعد از مطالعه این مقاله شما با موارد زیر آشنا خواهید شد.
- نام فونت: font-family
- استایل فونت: font-style
- سایز فونت: font-size
- وزن فونت: font-weight
تنظیم اسم فونت
برای تنظیم کردن اسم فونت مورد نظر در CSS3 شما میتوانید با استفاده از ویژگی `font-family` این کار را انجام دهید، مثال:
font-family: "Roboto";
اگر بخواهید از فونت برای کل سایت استفاده کنید باید آن را داخل تگ body قرار دهید، مثال:
با استفاده از کد زیر میتوانید فونت را از طریق فایل CSS تنظیم کنید.
body {
font-family: "Roboto";
}
با استفاده از کد زیر میتوانید فونت را از طریق فایل html تنظیم کنید.
<style>
body {
font-family: "Roboto";
}
</style>
یا میتوانید به صورت مستقیم به تگ body با ویژگی style تنظیم کنید، مثال:
<body style="font-family: 'Roboto'">
<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: "Roboto", "Noto Sans Kawi", "Linefont", "Agbalumo";
پس فونت اولی ( Roboto ) میشه فونت اصلی ما، اگه به هر دلیلی فونت Roboto نمایش داده نشد فونت Noto Sans Kawi جایگزین میشه و اگه باز دوباره فونت Noto Sans Kawi نمایش داده نشد فونت Linefont و…
استفاده از فونت های چند کلمه ای
اگر در اسم فونتی که استفاده میکنید، فاصله یا space وجود داشته باشد نمیتوانید مثل کد زیر از آن استفاده کنید:
font-family: Noto Sans Kawi;
برای رفع این مشکل شما باید اسم فونت مورد نظرتان را بین دو تا Double Quotation یا "FontName Here" قرار دهید، مثال:
font-family: "Noto Sans Kawi", 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 آشنا شدید. امیدوارم که این مقاله برای شما مفید واقع شده باشد؛ در صورتی که برای شما در خصوص این مقاله سوالی پیش آمده است، حتما در قسمت کامنت‌ها برای ما ارسال کنید.
منبع: لرن فایلز
