تخفیف ویژه ماه محرم، فرصت یادگیری با 35٪ تخفیف (کد تخفیف: moharam)
زمان باقی مانده

 السّلام علیک یا اباعبداللّه الحسین

سبد (0)

تبلیغات

فونت در CSS3

With CSS3, web designers are no longer forced to use only web-safe fonts


قانون [email protected] در CSS3

Wiki

تا قبل از CSS3 طراحان وب باید از فونت هایی استفاده می کردند که روی سیستم کاربر نصب شده بود.

با استفاده از CSS3 می توانید هر فونتی را که می خواهید استفاده نمایید.

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

فونت های شما با استفاده از قانون [email protected] در CSS3 تعریف می شوند.


پشتیبانی مرورگرها

Wiki

خاصیتپشتیبانی مرورگرها
@font-face

مرورگرهای Internet Explorer 9+, Firefox, Chrome, Safari, Opera فونت های از نوع WOFF یا (Web Open Font Format) را پشتیبانی می کنند.

مرورگرهای Chrome, Safari, Opera فونت های از نوع TTF یا (True Type Fonts) و OTF یا (OpenType Fonts) را پشتیبانی می کنند.

همچنین مرورگرهای Chrome, Safari, Opera فونت های SVG را پشتیبانی می کنند.

همچنین Internet Explorer فونت های EOT یا (Embedded OpenType) را پشتیبانی می کند.

توجه: Internet Explorer 8 به پایین از [email protected] پشتیبانی نمی کند.


استفاده از فونت های مورد علاقه تان

Wiki

با استفاده از قانون [email protected] ابتدا باید یک نام برای فونت خود مشخص نمایید (مثلاً myFirstFont) و سپس آنرا به فایل فونتی که قبلاً آپلود کرده اید هدایت کنید.

Note

نکته: برای فونتِ URL، از حروف کوچک استفاده نمایید. استفاده از حروف بزرگ در IE می تواند نتیجه های متفاوت و غیر منتظره ای داشته باشد.

برای نسبت دادن یک فونت به یک عنصر، باید از خاصیت font-family استفاده کنید:

مثال (فونت در CSS3)

<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div
{
font-family:myFirstFont;
}
</style>
خودتان امتحان کنید »

ضخامت (Bold) فونت در CSS3

Wiki

باید نسخه درشت فونت خود را که شامل توضیحاتی برای Bold کردن متن است، اضافه نمایید:

مثال (فونت در CSS3)

@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
خودتان امتحان کنید »

فایل "Sansation_Bold.woff" یک فایل دیگر است که شامل کاراکترهای Bold برای فونت Sansation است.

مرورگرها از این فایل زمانی استفاده می کنند که یک قطعه از متن با فونت "myFirstFont"، ضخیم (Bold) شده باشد.

در این روش شما می توانید، قوانین [email protected] زیادی برای یک فونت داشته باشید.


توصیف گر های فونت در CSS3

Wiki

در جدول زیر، لیستی از تمام خاصیت هایی که می توان در قانون [email protected] تعریف کرد، آمده است:

توصیف گرمقدارتوضیحات
font-family name الزامی است. نام فونت را مشخص می کند.
src URL الزامی است. URL فایل فونت را مشخص می کند.
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
اختیاری است. میزان کشیدگی کاراکترها را مشخص می کند. مقدار پیشفرض "normal" است.
font-style normal
italic
oblique
اختیاری است. سبک یا Style فونت را مشخص می کند. مقدار پیشفرض "normal" است.
font-weight normal
bold
100
200
300
400
500
600
700
800
900
اختیاری است. ضخامت فونت را مشخص می کند. مقدار پیشفرض "normal" است.
unicode-range unicode-range اختیاری است. محدوده کاراکترهای UNICODE را مشخص می کند. مقدار پیشفرض "U+0-10FFFF" است.

دیدگاه‌ها  

+3 # آزی 1395-08-20 13:42
سلام من متن زیر رو تو فایل css نوشتم اما فونت هیچ تغییری نمیکنه. چرا؟
@font-face {
font-family: MyFont;
src: url(/../fonts/IRANSansWeb.woff);
}

body{

font-family: 'MyFont';
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1395-08-20 19:24
سلام. بررسی کنید ببینید آیا آدرس فونت رو درون url درست وارد کرده اید یا نه. در غیر این صورت، کلید F12 در مرورگر خود رو فشار دهید و بخش Console رو بررسی کنید ببینید چه خطایی رو اونجا مشاهده می کنید. اگر خطایی بود، اون رو برامون ارسال کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # آزی 1395-09-03 10:27
عذر میخام به قسمتی که گفتین رفتم اما چچجور باید ببینم چه خطایی رخ داده؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1395-09-03 10:48
وقتی روی تب console بروید، خطاهای رخ داده رو به رنگ قرمز یا مشکلی مشاهده خواهید نمود. یه عکس از این صفحه بگیرید و تو اینترنت آپلود کنید و لینکش رو برامون ارسال کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # hamid fa 1394-07-20 18:31
سلام من تو این کد با این که سایز فونت رو تا 60 پیکسل گذاشتم اما تو مرورگر فایر فاکس تغییر از نظر اندازه نمیبینم فونت به ضورت کامل اعمال شده اما نه فونت استایل رو تغییر میده نه فونت سایز رو مشکل از کجاست؟
p.font
{
font-family:myf ont;
}

@font-face
{
font-family:myf ont;
src:url(Fonts/B Yekan.woff);
font-size:60px;
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-07-20 19:03
دوست عزیز مشکل اینجاست که font-size رو نباید تو font-face تعریف کنی. باید تو کلاس p.font سایز رو مشخص کنی.
کد درست اینه:
p.font
{
font-family:myf ont;
font-size:60px;
}

@font-face
{
font-family:myf ont;
src: url(/Fonts/B Yekan.woff);
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # hamid fa 1394-07-20 18:05
سوال:

منظور از این جمله که نوشتید "هر جا که نیاز به فونت باشد بصورت خودکار، دانلود می شود" چیه ؟
یعنی چی دانلود میشه واسه کی دانلود میشه ؟ متوجه نمیشم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-07-20 19:00
با سلام.

مطمئناً تا به حال این تجربه رو داشتید یا شنیدید که شخصی فایل ورد یا PDF رو برای چاپ می‌بره. ولی وقتی تو سیستم دیگه اون فایل رو می‌بینه، فونتش با چیزی که تو سیستم خودش می‌بینه فرق داره. علت این امر این هست که در سیستم شما فونتی وجود داره که در سیستم اون شخص نیست.

در مورد وب هم همین مفهوم هست. هیچ تضمینی نداره سایتی از فونتی استفاده می‌کنه، اون فونت در تمامی سیستم‌هایی که افراد اون سایت رو مشاهده می‌کنن، وجود داشته باشه. برای اینکه سایت در تمامی سیستم‌ها به یک شکل و فونت نمایش داده بشه، باید از درون خودش (سرور) اقدام به نمایش محتوا با اون فونت کنه. وقتی هم که شما اون سایت رو با اون فونت موردنظر می‌بینی، در واقع داری اون فونت رو از سرور دانلود می‌کنی.
منظور از دانلود خودکار فونت همینه!!!
اگر دقت کنی تو خیلی از سایت‌ها تا زمانی که سایت کامل لود نشده، محتوا با فونت معمولی (tahoma) نشون داده میشه، و وقتی که لود سایت کامل شد (فونت موردنظر سایت رو سیستم شما دانلود شد)، محتوای سایت به صورت درست نمایش داده میشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # mauri 1394-05-04 20:24
سلام.من در حالت ساخت وبسایت به زبان ایتالیایی هستم.اما بعضی حروف ایتالیایی که اکسان دار هستن خوب نمایش داده نمیشه.میشه بگید چیکار کنم؟بجای اون حرف علامت سوال میاد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-05-04 23:10
سلام
برای زبان ایتالیایی از یکی از تگ های زیر در قسمت head صفحه استفاده کنید، احتمالا مشکل برطرف خواهد شد:

<meta charset="iso-8859-1">
یا
<meta http-equiv="Con tent-Type" content="text/h tml;charset=ISO -8859-1">
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # سارا 1393-12-07 12:48
سلام
امکان داره بیشتر در مورد @font-face راهنمایی کنید یعنی باید مثل عکس هامون برای پروژه یک فولدر فونت هم بسازیم و فونت دلخواهمون رو توش کپی کنیم ؟ و بعد چیکار کنیم دیگه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1393-12-07 16:18
بله دقیقاً باید همین کار را انجام بدید، البته اگر در شاخه style که فایل های CSS قرار دارد، یک فولدر با نام font ایجاد کنید، دقیق تر عمل کرده اید ...
اگر یک search ساده در اینترنت انجام بدید، می توانید مثلاً فایل های مربوط به فونت Yekan را دنلود کنید و بعد از اینکه آنها را در شاخه font قرار دادید، بصورتی که در بالا آموزش داده شده است، عمل نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # سارا 1393-12-07 22:20
اکثر فونتها رو که از اینترنت میگیرم به صورت فایل woff نیستند چطوری تبدیل کنم تا بتونم استفاده کنم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # سارا 1393-12-07 21:47
مرسی از پاسختون مثل همیشه کارسازه
ولی من وقتی فایل html و css پروژهمو جابجا میکنم خروجی به هم میریزه چیکار کنم میخواهم همونجور که گفتید شاخه style رو جدا کنم یعنی یک فولدر بسازم و فونتها و عکسها و فایل css رو داخلش بذارم شاید سوالام خیلی مبتدی باشه ولی نیاز به کمک شما دارم ! مرسی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-12-08 07:37
قسمت اول سوال:
فقط فایل های با فرمت woff قابل قبول هست ... تبدیل فونت هایی مثل BNazanin و ... به صورتی که قابل استفاده در صفحات وب باشد کار ساده ای نیست، در واقع تخصصی است.
قسمت دوم سوال:
زمانی که فایل های CSS را جابه جا می کنید، بدلیل اینکه آدرس فایل CSS تغییر می کند، دیگر روی صفحات HTML اعمال نمی شود ...
باید لینک به فایل CSS که در بالای تمام صفحات قرار دارد را اصلاح کنید، قسمت قرمز رنگ در کد زیر:<link rel="stylesheet " href="New_Address" type="text/css"/>
در ضمن توجه داشته باشید که عکس ها در یک فولدر جداگانه بنام images که در root اصلی پروژه است باید قرار داشته باشد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # سارا 1393-12-08 10:57
خب ببینید من الان اولین پروژمو دارم انجام میدم در واقع دارم یادمیگیرم!یک فولدر روی دسکتاپ دارم به نام dev و داخل این فولدر یک فولدر دیگه به نام start up 1 و داخل اون فایل css و یک فایل html دارم و دو تا فولدر که یکی images هست و یکی هم fonts هست به این صورت:
desktop
dev
start up 1
(html,css,images,fonts)
الان root یعنی کجا؟ و اگر بخوام کلا پروژمو ببرم داخل یک درایو سیستم چیکار کنم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1393-12-08 11:24
منظور از Root، ریشه است یعنی فولدر اصلی که تمام فایل های پروژه داخل آن قرار دارد. در اینجا می شه فولدر dev ... احتمالاً شما هنوز، برنامه نویسی سمت سرور را شروع نکرده اید (PHP یا ASP.NET) بنابراین خیلی ساده، کل فولدر پروژه، یعنی dev را به هر درایوی که مایلید منتقل کنید، مشکلی پیش نخواهد آمد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS3

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی