صفت Font در Css3

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

FONT-FACE

اگر به آموزشهای طراحی قالب با Html . Css دقت کرده باشید ، برای تعیین نوع فونتهای وب سایت معمولا از Tahoma استفاده می کردم .
دلیل این کار هم این بود که مرورگرها فقط از یک سری فونت استاندارد که قدرت خواندن آن را داشته اند پشتیبانی می کردند و طراحان نمی توانستند از فونت دلخواه در طراحی قالب وب سایت استفاده کنند .
ولی این مشکل در Css3 برطرف شده و شما می توانید به راحتی فونت مورد نظر را به عنوان یا متن اصلی صفحه اختصاص بدهید  .
این ویژگی در همه مرورگرها پشتیبانی می شود  .
فایرفاکس ، کروم ، سافاری و اپرا از فونت های .ttf و .otf پشتیبانی میکنند .
اینترنت اکسپلورر 9 به بالا از @font-face پیروی میکند ولی فقط از فونت .eot پشتیبانی می کند .
اینترنت اکسپلورر 8 به پایین از @font-face پشتیبانی نمی کند .


نام ویژگی Font که با استفاده از آن می توانیم نوع فونت را تغییر بدهیم font-face@ می باشد . روش کار هم به این صورت هست که ابتدا باید از کارکتر @ برای فراخوانی نوع فونت مورد نظر استفاده کنیم .

 

@font-face

 

بعد باید شکل کلی کد را تایپ کنیم که به شکل زیر می باشد . در قسمت font-family یک نام دلخواه برای فونت مورد نظر و در قسمت src باید آدرس آپلود فایل در هاست را مشخص کنیم . این تگ باید بین تگ style قرار بگیرد .

 

@font-face
{
font-family: asarayan;
src: url(sansation_light.woff);
}

 

در صورتیکه بخواهیم ضخامت متن تایپ شده را تغییر بدهیم یا ویژگی های دیگر به متن تایپ شده اضافه کنیم نیز می توانیم کد مورد نظر را داخل دستوراتی که در بالا نوشته ام تایپ کنیم . 

 

@font-face
{
font-family: asarayan;
src: url(sansation_light.woff);
font-weight:bold;
}

 

خوب دستوراتی که تا به الان تایپ کرده ام بین تگ style قرار می گرفت حالا اگر بخواهیم از نوع فونت مورد نظر برای یک عنوان یا متن استفاده کنیم کافیست در داخل فایل Css از دستور زیر استفاده کنیم .

body{font-family:asarayan,arial,tahoma;}

 

  کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید) دانلود فونت

 


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
@font-face
{
font-family: asarayan;
src: url(SansationLight.woff);
}
div
{
font-family:asarayan;
}
</style>
</head>
<body>
<div>
With CSS3, websites can finally use fonts other than the pre-selected 'web-safe' fonts.
</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>
</body>
</html>

 

font-family-1

آخرین بروز رسانیپنج شنبه, 31 ارديبهشت 1394 22:57

نوشتن دیدگاه