0

سبد خرید شما خالی است.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی 09133886881 احمدپور

فونت ها در CSS

نویسنده ویرایشگر سایت
امتیاز مطلب
تعداد بازدید 86
تاریخ بروزرسانی ۲۰ مرداد ۱۳۹۸

آموزش خاصیت های فونت در CSS

خواصی که برای فونت ها در CSS به کار می رود، نام فونت (خانواده فونت)، سایز، ضخامت و استایل متن است. تیم طراحی سایت اصفهان وب یار قصد دارد در این مقاله شما را با ویژگی های قابل تغییر فونت ها در CSS آشنا کند. با ما همراه باشید.

 

دسته بندی فونت ها

در CSS دو نوع خانواده برای فونت ها کاربرد دارد:

  • 1) خانواده کلی (Gneric Family): گروهی از خانواده های فونت که ظاهری مشابه دارند (مثلاٌ همه به فرم Serif یا Monoscape هستند)
  • 2) خانواده فونت (Font Family): یک نوع فونت مشخص (مانند Arial یا “B Yekan”)

 

تفاوت ظاهر فونت ها

معمولاً فونت ها (اغلب لاتین) به سه شکل تعریف و ساخته می شوند:

    •  Serif – در انتهای حروف، خط کوتاهی مشاهده می شود.
    • Sans-Serif – کلمه Sans به معنی «بدونِ …» است. این گونه فونت ها، خط کوتاه یادشده را ندارند. خوانایی این نوع از فونت ها در صفحه کامپیوتر بیشتر از خانواده Serif است.
    • Monoscape – عرض تمام حروف در این حالت، یکسان است.

فونت ها در css

 

خانواده فونت (CSS Font Family)

نوع فونت یک متن، با دادن خاصیت font-familly به استایل CSS آن تعریف می شود. برای این خاصیت بهتر است بیشتر از یک فونت تعریف شود تا اگر مرورگری نتوانست یکی از آن ها را تشخیص دهد، فونت بعدی جایگزینش گردد.

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

اگر نام یک فونت بیشتر از یک کلمه باشد، لازم است آن را داخل کوتیشن (‘ ‘) یا دابل کوتیشن (” “) قرار دهید. و فونت ها را با کاما از هم جدا کنید.

p { font-family: "Times New Roman", Times, serif; }

 

استایل نمایش فونت (Font Style)

خاصیت font-style بیشتر برای دادن حالت کج (italic) به متن استفاده می شود. مقدار پیش فرضش normal است که متن به صورت معمولی (غیر کج) دیده می شود و مقدار دیگری به نام oblique دارد که کمتر پشتیبانی می شود و بسیار مشابه italic است. مشاهده نمونه

 

سایز فونت (Font Size)

خاصیت font-size برای تعیین بزرگی و کوچکی فونت است. توانایی تغییر سایز فونت ها در طراحی وب بسیار حائز اهمیت می باشد. با این حال نباید به گونه ای سایز فونت ها را تغییر دهید که مثلاً پاراگراف ها اندازه هدینگ ها بزرگ شوند!

همیشه از تگ های مناسب استفاده کنید. از<h1> تا <h6> برای هدینگ ها و از <p> برای پاراگراف ها.

سایز فونت ها به دو صورت قابل اعمال است؛ مطلق (absolute) که به کاربر اجاز تغییر سایز فونت را در هیچ مرورگری نمی دهد و نسبی (relative) که در این حالت، سایز فونت به تناسب المان های اطرافش تغییر می کند و کاربران آزادانه می توانند سایز مورد نظرشان را برای هر فونتی تنظیم کنند.

اگر سایز فونت مشخص نشود، به طور پیش فرض برای متن های عادی (بدون تگ های html) مقدار 16px تنظیم می شود.

 

تنظیم سایز فونت ها با واحد em

بسیاری از توسعه دهندگان وب، برای این که کاربران به راحتی بتوانند سایز فونت ها را در همه مررگرها تغییر دهند، از واحد em به جای px استفاده می کنند. استفاده از این واحد از طرف W3C (کنسرسیوم جهانی وب) هم توصیه شده است.

هر em معادل یک برابر سایز فونت فعلی است. چون سایز پیش فرض 16px است، پس 1em = 16px می باشد. برای تبدیل px به em کافیست سایز پیکسل را بر 16 تقسیم کنید. (برای نمونه 18px = 18/16 em = 1.125 em )

برای اینکه سایز فونت انتخابی شما در همه مرورگرها یکسان دیده شود بهتر است چنین کدی بنویسید:

body {  font-size: 100%; }
h1 {  font-size: 2.5em; }
h2 {  font-size: 1.875em; }
p {  font-size: 0.875em; }

 

ضخامت فونت (Font Weight)

با خاصیت font-weight تعیین شده و مقادیر عددی 100 تا 900 و bold، bolder، lighter و normal را به خود می گیرد. مشاهده نمونه

 

سایز فونت واکنشگرا (Responsive Font Size)

می توانید از واحد vw که مخفف Viewport Width (عرض صفحه، عرض پنجره مرورگر) است، برای ایجاد انعطاف در سایز فونت ها و سایر المان های html استفاده کنید. با این کار اگر عرض صفحه را کم و زیاد کنید، سایزها به طور خودکار به تناسب عرض صفحه نمایش مرورگر تغییر می کنند. هر یک vw معادل یک درصد از کل عرض صفحه است؛ برای مثال اگر عرض صفحه مرورگر 75cm باشد، 1vw = 0.75cm خواهد بود. مشاهده نمونه

 

شمایل فونت (Font Variant)

خاصیت font-variant که برای فونت های لاتین کاربرد دارد، مشخص می کند که بزرگی یا کوچکی حروف لاتین به چه صورت باشد. مقدار small-caps برای این خاصیت به این معنی است که حروف کوچک به بزرگ تبدیل شده اما سایزشان قدری کوچک تر شود.

font-variant

 

سایر آموزش های مشابه را می توانید در کانال وب یار به نشانی webyar_net@ دنبال نمایید.

به روز و پیروز باشید!

 

مطالب مرتبط
مطالعه :

ثبت نام ایران خودرو و ثبت نام سایپا یکی از پر درآمدترین کار های توافقی است که شما در این آموزش یادخواهید گرفت. با توجه به اینکه ثبت نام ایران خودرو تغییر یافته و همچنین ثبت نام سایپا به دو روش جدید انجام می گیرد در روش قدیم ثبت نام خودرو و روش جدید ثبت نام سایپا و ایرانخودرو با ما همراه باشید.

سئو سایت اصفهان
مطالعه : 20 دقیقه

سئو سایت اصفهان یکی از خدمات تیم طراحی سایت و سئو سایت وب یار می باشد. آیا تا کنون به سئو سایت خود فکر کرده اید؟ آیا می دانید برای بهینه سازی سایت خود چه فاکتورهایی را باید در نظر بگیرید؟

طراحی سایت حرفه ای در اصفهان
مطالعه :

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

تغییر پیش شماره های اصفهان
مطالعه :

تغییر پیش شماره اصفهان و شهرستان ها و دانلود لیست جدید طراحی سایت اصفهان و سئو سایت اصفهان وب یار با ارائه خدمات تخصصی به دنبال افزایش فروش و رونق کسب و کار مشتریان خود می باشد. شهرستان اردستان شهر اصفهان ​​ شهرستان آران و بیدگل ​​ شهرستان برخوار شهرستان نطنز​ توابع اصفهان​​​ شهرستان تیران و کرون​​ شهرستان چادگان شهرستان خمینی شهر​​ شهرستان خوانسار​​ شهرستان خورو بیابانک​​​ شهرستان دهاقان ​شهرستان سمیرم​​ شهرستان شاهین شهر و میمه​ شهرستان شهرضا​ شهرستان فریدن​ شهرستان فریدونشهر​ شهرستان فلاورجان​ شهرستان کاشان​ شهرستان گلپایگان شهرستان لنجان ​شهرستان مبارکه​ شهرستان نائین​ شهرستان نجف آباد برای تهیه لیست زیر بسیار وقت گذاشته شده و در یک فایل متن ساده و راحت آماده شده تا هر چه سریعتر کار اداری شما انجام گردد چون وقتتان خیلی با ارزش است طراحی سایت حرفه ای در اختیار داشتن یک سایت حرفه ای و حضور موثر در فضای مجازی و تجارت الکترونیک، از مهمترین ملزومات دنیای امروزی برای کسب درآمد عالی از این بستر جذاب است. تیم طراحی سایت اصفهان وب یار با ارائه سرویس های ویژه طراحی سایت ، سئو و اینترنت مارکتینگ این امکان را به شما می دهد که توسط طراحی سایت حرفه ای در میان برند مشاغل و شرکت های ملی و بین المللی، شناخته شده و به رقابت و کسب درآمد عالی بپردازید.   کلاس آموزش طراحی […]

آرایه ها در جاوا اسکریپت
مطالعه : 8 دقیقه

آرایه ها در جاوا اسکریپت جلسه هفتم     بعد از یادگیری انواع داده ها در جاوا اسکریپت نوبت به بحث آرایه ها میرسد که در این مطلب به توضیح موارد زیر که برای بحث آرایه ها در جاوا اسکریپت می باشد می پردازیم.   • آرایه چیست؟ • شکل کلی آرایه • نحوه ی دسترسی به آرایه • متدهای آرایه • متد ()length • متد()concat • متد ()join • متد ()pop • متد ()Push • متد ()splice • متد ()Slice   آرایه چیست؟ آرایه یک نوع خاص از متغیر ها است که با یک نام و نوع داده می توان چندین مقدار را در آن ذخیره کرد ، استفاده می شود. شکل کلی آرایه شکل کلی آرایه به صورت زیر می باشد که array-name نام آرایه است و item آیتم های آرایه می باشد. var array-name = [item1, item2, …]; می خواهیم آرایه ای برای فروشندگان تعریف کنیم که در هر جای دیگر احتیاج به مشخصات فروشندگان داشتیم نیازی به تکرار همه ی اطلاعات نداشته باشیم. در مثال زیر میبینید که نام آرایه shop می باشد ‎و محصولات با نام های مربوطه در قسمت item نوشته شدند. <p id=”demo”>pen,eraiser,ball</p> <script> var shop = [“pen”, “eraiser”, “ball”]; document.getElementById(“demo”).innerHTML = shop; </script> اولین خانه ی آرایه با محتوای والیبال پر می شود. می دانیم که خانه های آرایه از 0 شروع […]

فریم ورک های جاوا اسکریپت
مطالعه : 10 دقیقه

 Best Javascript Frameworks 2019   منظور از فریم ورک جاوا اسکریپت چیست؟ در دنیای برنامه نویسی و توسعه، عبارت « فریم ورک جاوا اسکریپت » به کتابخانه ای از جاوا اسکریپت اشاره می کند که رابط های کاربری تعاملی و داده محور ارائه می دهد. این فریم ورک ها به گونه ای طراحی شده اند که در هنگام ایجاد تعامل با استفاده از یک برنامه یا رابط، به تهیه داده برای کاربران کمک می کنند. فریم ورک های جاوا اسکریپت با یکدیگر متفاوت اند اما هدف نهایشان یکی است: نمایش داده های جدید به محض اینکه کاربر، یک اقدام تعاملی را آغاز می کند. با تیم طراحی سایت اصفهان وب یار همراه باشید تا مروری بر ویژگی های محبوب چند مورد از فریم ورک های جاوا اسکریپت داشته باشیم.   خصوصیات فریم ورک های جاوا اسکریپت   1) موثر بودن: شما می توانید برنامه های موبایل، دسکتاپ و یا سایر رابط های کاربری سطح بالا را در مدت چند هفته و یا حتی چند روز بسازید! 2) امن بودن: همه فریم ورک های رایج و محبوب جاوا اسکریپت دارای تنظیمات امنیتی مطمئن هستند. طیف وسیعی از برنامه نویسان، تست کنندگان و کاربران نیز از این فریم ورک ها پشتیبانی می کنند. 3) کم هزینه بودن بیشتر فریم ورک های جاوا اسکریپت به صورت متن باز (open-source) و رایگان هستند که […]

دیدگاه ها

پاسخی بگذارید

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