سبک دهی به متن در css (تنظیم فونت متن)

سبک دهی به متن در css (تنظیم فونت متن)

سبک دهی به متن در css (تنظیم فونت متن)

خانواده فونت (font family،مجموعه فونت هایی که نمایانگر اشکال مختلف یک نوع typefaceیا طرح حروف هستند)، پررنگی (boldness)، اندازه و همچنین سبک یک نوشته یا متن را تعریف می کنند .

font family در CSS

در CSS، دو گروه اسم خانواده فونت وجود دارند:

  • generic family (خانواده ی عمومی): گروهی از فونت ها که ظاهری مشابه دارند (از میان آن ها می توان به “Serif” و “Monospace” اشاره کرد).

  • font family (خانواده ی فونت): یک نوع خانواده ی فونت ویژه (از جمله “Times New Roman” و “Arial”).

خانواده فونت ( font family )

ویژگی های خانواده فونت با خاصیت font-family تعیین می گردند .خصوصیت font-family طبیعتا باید دربردارنده ی اسم فونت های متعددی باشد که به عنوان یک نوع سیستم پشتیبانی یا یدکی عمل کند . در صورتی که مرورگر مورد نظر از نوع حروف (فونت) اولی پشتیبانی نکرد، در آنصورت فونت دوم را امتحان خوهد کرد .

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

نکته: چنانچه اسم یک خانواده ی فونت( font family ( متشکل از چندین حروف )بیش از یک حرف) باشد، درآن صورت باید اسم فونت مزبور را داخل کاراکتر یا علامت نقل و قول دوتایی (double quotation ) قراردهید، مثال “Times New Roman” .

در مثالی که در ذیر ارائه شده، بیش از یک font family در لیست با استفاده از ویرگول از هم جدا شده اند.

}p

;”font-family: “Times New Roman” ، “Times ، serif

{

چگونه میتوان از فونت دلخواه در CSS استفاده کرد؟

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

وقتی که شما فونت مورد نظر را پیدا کردید و یا آن را طراحی کردید، باید فایل فونت را بر روی هاست آپلود کنید تا مرور گر کاربر آنها را به صورت اتوماتیک دانلود کرده و استفاده کند. فونت شما در CSS3 از طریق font-face@ تعریف خواهد شد.

مرورگرهای سازگار با font-face@ :

تمام مرورگرها بر اساس استانداردهای بین المللی وب و با توجه به افزایش روز افزون استفاده طراحان از CSS3 تلاششان را برای انتقال به CSS3 انجام میدهند. اما مهمترین مرورگرهای وب که از این ویژگی استفاده میکنند به قرار زیر است:
Google Chrome – FireFox – Safari – Opera با فونتهای ttf و otf به ترتیب True Type Fonts و OpenType Fonts سازگاری دارند.
IE9 به بالا font-face@ را حمایت میکند ولی فقط از فونتهای Embedded OpenType) eot) میتوان استفاده کرد.

توجه: در نظر داشته باشید که مرورگر IE8 و پایین تر با font-face@ سازگاری ندارند.

چگونه از فونت دلخواه در طراحی وب استفاده کنیم؟

در font-face@ ابتدا باید یک نام برای فونت مورد نظر تعیین کرده سپس آدرس فونت را تعریف کنیم.

 }font-face@
;font-family: myFirstFont
(‘src: url(‘iransans_normal.ttf
/*+url(‘iransans_normal.eot’); /* IE9
{

}div
;font-family:myFirstFont
{

در مثال بالا myFirstFont نامی است که برای فونت مورد نظر (iransans) انتخاب کرده ایم.

چگونه فونت استفاده شده در font-face@ را Bold کنیم؟

برای این کار باید هنگام تعریف فونت ، از فونتهای Bold استفاده کنید و در تعریف آن نوع فونت را Bold تعریف کنید:

}font-face@
;font-family: myFirstFont
(‘src: url(‘iransans_Bold.ttf
/*+url(‘iransans_Bold.eot’); /* IE9

;font-weight:bold
{

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

توجه: به تعداد فونتهایی که میخواهید استفاده کنید این روش را تکرار نمایید.

بازدید: 0

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

مطالب مرتبط

نظر بدهید

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