فونت دلخواه در CSS
سفارش تبليغات در انجــمن قالب گراف ورود به تاپيک اطلاعيه هاي تابستانه قالب گراف
امور گرافيکي و کدنويسي وب خود را به جي جي ميزبان بسپاريد
نام کاربري : پسورد : فراموش

چگونه میتوان از فونت دلخواه در 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 فونت دیگری است که به صورت جداگاه تعریف میشود و بر روی هاست قرار میگیرد.

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

امضاي کاربر :

تشکر شده:

7 کاربر از payamartwork به خاطر اين مطلب مفيد تشکر کرده اند: whatyouknow / farsgraph / mahdio77 / farzad05607 / mattin / admin-mehrdad / ahmadreza9001 /

پاسخ ها

عه ، واقعاً ، خوب شد پس وگرنا گرفتاری داشتم در طراحی قالب

امضاي کاربر :
سلام به همه ، که نمیتونم تو عنوان بیان کنم،
فعلاً تو رزبلاگ فعالیت نمی کنم ، روی هاست رفیقم فعال هستم www.Beest7.com قالبش که درست کنم احتمالآً دامنه جدید براش میگیرم ، البته فعلاً صفحه اولش کیفیت نداره و اصلش Web.beest7.com هست
و شبکه اجتماعی هم به فکرش هستم که بهش اضافه کنم . تقریباً خودم مدیره اجراییش هستم و کدنویسی و مدیریتش میکنم

تشکر از شما

مفید بود

امضاي کاربر :

یاد قالب گراف قدیم افتادم ..... قدیما خیلی خوب بود
-------------------------------------

تشکر شده:

1 کاربر از farsgraph به خاطر اين مطلب مفيد تشکر کرده اند: nightgraph /

مفید بود ممنون

امضاي کاربر :

طراحی و ترجمه قالب - طراحی فایل گرافیکی
وب سایت : www.rightheme.ir
تلگرام : rightheme
ایمیل: rightheme.ir@gmail.com

مفید و کاربردی . .♥

امضاي کاربر :
شـــاد *بـــاشیــــن . . . شاید فــــردا نبـــاشین ☀



اموزش زیبایی بود

کاملترین کد فونت به این شکله

http://up.ghalebgraph.ir/up/galebgraph/Fonts/BYekan/BYekan.css

محتوی لینک:

کد:

@font-face {

font-family: 'B Yekan';

src: url('BYekan.eot');

src: url('BYekan.otf') format('opentype');

src: local('☺'),

local('B Yekan'),

url('BYekan.woff') format('woff'),

url('BYekan.ttf') format('truetype'),

url('BYekan.svg') format('svg');

font-weight: normal;

font-style: normal;

}

تشکر شده:

2 کاربر از admin-mehrdad به خاطر اين مطلب مفيد تشکر کرده اند: ahmadreza9001 / payamartwork /


براي نمايش پاسخ جديد نيازي به رفرش صفحه نيست روي تازه سازي پاسخ ها کليک کنيد !