ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

صفت Font در Css3 مطلب ویژه

توسط 02 خرداد, 1392 7078 0

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

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

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در پنج شنبه, 31 ارديبهشت 1394 ساعت 22:57
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا