فونت ها در CSS و نحوه اعمال فونت ها در CSS

در این مطلب قصد داریم نحوه اعمال فونت ها در CSS و کار کردن با فونت ها را در تیک4 به شما آموزش بدهیم.
CSS مخفف “Cascading Style Sheets” به‌معنی “برگه‌های آشکاری” است و یک زبان برنامه‌نویسی است که برای توصیف و تنظیم استایل و ظاهری وبسایت‌ها استفاده می‌شود.
با استفاده از CSS، می‌توانید طرح بندی، رنگ، فونت و خصوصیات دیگر عناصر HTML را تغییر دهید.

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

گروه های فونت ها در CSS

در CSS کلا فونت ها به دو دسته تقسیم میشوند:

فونت‌های سیستمی

فونت‌های سیستمی موجود در کامپیوتر کاربر استفاده می‌شوند. برخی از فونت‌های سیستمی معروف عبارتند از “Arial” و “Times New Roman”. برای استفاده از یک فونت سیستمی در CSS، نام فونت را مشخص کرده و به خاصیت font-family اضافه می‌کنید.
در صورتی که فونت مورد نظر در کامپیوتر کاربر وجود نداشته باشد، یک فونت پشتیبان نشان داده می‌شود.

فونت‌های خارجی

فونت‌های خارجی از طریق سرور وب بارگیری می‌شوند. برای استفاده از یک فونت خارجی در CSS، نام فونت را از منبع خارجی مشخص کرده و به پراپرتی font-family اضافه می‌کنید.
به عنوان مثال، شما می‌توانید از Google Fonts استفاده کنید و فونت مورد نظر را از این منبع دریافت کنید.

بعنوان مثال:
شما یک استایل ساده تعریف خواهید کرد که فونت متن‌ها را تغییر می‌دهد.
در اینجا از یک فونت سیستمی (“Arial”) و یک فونت خارجی (“Open Sans”) استفاده می‌شود:

P { font-family: "Arial", Open-sans; }

فونت متن در CSS

فونت یک متن باید با پراپرتی  font family مشخص شود.
پراپرتی font family باید چندین مشخصه را در خود داشته باشد تا اگر مرورگر یکی از آنها را پشتیبانی نکرد به سراغ فونت دیگری برود و اگر آن را هم پشتیبانی نکرد همینطور سراغ بعدی و بعدی برود.
درکل بهتر است آخرین فونت را یک فونت generic انتخاب کنیم تا فونت صفحه وب ما بهم نریزد.

وزن متن (Font Weight)

شما میتوانید مثال انواع وزن فونت ها را در عکس پایین ببینید

font weight یکی از ویژگی‌های مهم در CSS است که به شما امکان می‌دهد وزن یک فونت مورد استفاده را تعیین کنید.
وزن یک فونت می‌تواند راحت، نورمال، بولد، خیلی بولد و… باشد.
وزن فونت تاثیر زیادی روی جلوه‌ی ظاهری متن دارد و می‌تواند نشان دهنده‌ی قوت و حجم متن باشد.

فونت وزن در CSS با استفاده از خاصیت font-weight تنظیم می‌شود.
این خاصیت مقادیر متنوعی را برای تعیین وزن فونت ارائه می‌دهد. می‌توانید از مقادیر زیر استفاده کنید:

• مقدار پیش‌فرض و به معنای وزن نرمال فونت است.:normal
• یک فونت بولد (ضخیم). معادلی برای فونت وزنده است.:bold
• فونت وزنده‌تر از فونت فعلی است.:bolder
• فونت سبک‌تر از فونت فعلی است.:lighter
• عددی بین 100 و 900: می‌توانید وزن دلخواه خود را با استفاده از اعداد به صورت 100، 200، 300 و … تا 900 تنظیم کنید. در این جدول، اعداد کوچکتر به معنای فونتهای سبک‌تر و اعداد بزرگتر به معنای فونتهای سنگینتر است.
• وزن فونت را از والد (پدر) مورد استفاده به ارث ببرید.:inherit

مثال: استفاده کردن از یک فونت بولد شده

selector { 
    font-weight: bold;
}

سایز فونت در CSS

پراپرتی Font size سایز یک فونت در یک صفحه را مشخص میکند.توانایی مدیریت سایز فونت در زمینه طراحی وب سایت بسیار حائز اهمیت است. اما به خاطر داشته باشید که نباید از قابلیت تغییر سایز فونت برای درست کردن عناوین و… استفاده کنید.
همیشه از تگ های HTML مانند <h1> – <h6> برای عنوان ها و از <p> برای پاراگراف ها استفاده کنید.

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

اندازه‌گیری معمولی فونت

در CSS، اندازه فونت معمولاً به واحد “پیکسل” (px) یا “ام” (em) تعیین می‌شود. به عنوان مثال:

body {
    font-size: 16px; /*اندازه فونت بدنه صفحه*/
}
h1{
    font-size: 150%;  /*  اندازه فونت=%150 از اندازه فونت بدنه صفحه(24px :در اینجا)   */
}
p {
    font-size: 80%;   /* اندازه فونت=%150 از اندازه فونت بدنه صفحه(16px :در اینجا)   */

واحد Rem و Em

واحد‌های em و rem نیز برای تعیین اندازه فونت استفاده می‌شوند.
اما تفاوت اصلی آن‌ها در نسبت با والد (بر اساس حالت استایل‌ها) و ریشه (حالت استایل بدنه صفحه) است.

body{
    font-size: 16px;  /*تعیین اندازه فونت بدنه صفحه*/
}
h1{
    font-size: 2em;   /*اندازه فونت=2برابر اندازه فونت والد(32px:در اینجا)*/
}
p{
    font-size: 1.2em; /* اندازه فونت= 1.2برابر اندازه فونت والد(19.2px:در اینجا)*/
}

واحد Rem

واحد rem مشابه em است، اما تفاوت اصلی آن در این است که اندازه فونت به اندازه فونت بدنه صفحه (ریشه) تعیین می‌شود.

}
body{
    font-size: 16px;   /*تعیین اندازه فونت بدنه صفحه*/
}
body{
    font-size: 2rem;   /*اندازه فونت=2برابر اندازه فونت بدنه صفحه(32px:در اینجا)*/   
}
body{
    font-size: 1.2rem; /* اندازه فونت= 1.2برابر اندازه فونت بدنه صفحه(19.2px:در اینجا)*/
}

 واحد درصد

استفاده از واحد درصد نیز یک راه دیگر برای تنظیم اندازه فونت است.

body {
    font-size: 16px; /*اندازه فونت بدنه صفحه*/
}
h1{
    font-size: 150%;  /*  اندازه فونت=%150 از اندازه فونت بدنه صفحه(24px :در اینجا)   */
}
p {
    font-size: 80%;   /* اندازه فونت=%150 از اندازه فونت بدنه صفحه(16px :در اینجا)   */

تکنیک‌های پیشرفته

برای استفاده از تکنیک‌های پیشرفته مانند vw (واحد درصد از عرض صفحه) یا vmin (واحد درصد از مینیمم ابعاد صفحه) نیاز به مطالعه بیشتر و تجربه عملی دارید.
همینطور میتوانید راجب یونیت ها در سی اس اس اینجا مطلب کاملتری رو بخونید

body{
    font-size: 16px;   /*تعیین اندازه فونت بدنه صفحه*/
}
body{
    font-size: 5vw;   /* اندازه فونت=%5 از عرض صفحه*/   
}
body{
    font-size: 3vmin; /* اندازه فونت= %3از مینیمم ابعاد صفحه*/
}

جمع بندی

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