
حتما تا کنون به این مساله پیش خورده اید که خواسته باشید در وبسایت یا وبلاگتان فونتی را استفاده نمایید که ممکن است در رایانه کاربران بازدید کننده نباشد مثلا فونت نستعلیق که توی همه رایانه ها نیست ولی مجبور شده اید به جای آن از تصویر آن دستخط استفاده کنید . با این آموزش یاد میگیرید که چگونه و براحتی از هر فونتی در وبسایتتان استفاده نمایید.
مرحله اول : باید ابتدا این فایل جاوااسکریپت را دانلود کنید تا بعدا از آن استفاده کنیم . برای دانلود کلیک کنید
مرحله دوم: به وبسایت ارائه دهنده این سرویس بروید و فرمی که ظاهر می شود را با توجه به موارد زیر پر کنید .
* در خط اول (regular typeface ) باید فونت مورد نظر خودتون رو از داخل کامپیوترتان انتخاب کنید.
* به مواردی که در خط های ۲ ، ۳، ۴ و ۵ آمده است کاری نداشته باشید .
* در خط ششم تیک کنار عبارت “The EULAs of these fonts allow Web Embedding… را بزنید.
*در قسمت include the following glyphs موارد :
Uppercase
Lowercase
Numerals
Punctuation
WordPress punctuation
را انتخاب کرده و از بقیه موارد چشم پوشی کنید.
* در قسمت security که بخشی اختیاری می باشد می توانید چندین وبسایت را که اجازه استفاده از این فونت هستند را تعیین کنید . برای مثال اگر آدرس mypress.ir را وارد نمایید تنها وبسایتی با آدرس mypress.ir می تواند از این فونت در وبسایتش استفاده نماید . پس اگر می خواهید این فونت تنها در یک وبسایت قابل استفاده باشد آدرس وبسایت مورد نظر را وارد فرمایید و اگر می خواهید عمومی باشد . نیازی به پر کردن این قسمت نیست.
* از موارد بعدی نیز چشم پوشی کنید تا مورد آخر که عبارت ” I acknowledge and accept these terms” نوشته است . تیک کنار این عبارت را بزنید . و در پایان بر روی lets do it کلیک کنید.
* پس از کلیک بر روی lets do it یک پیغام برای دانلود یک فایل می بینید این فایل را ذخیره نمایید.
مرحله سوم : در این مرحله باید فونت جدید را به وبسایت و یا فایل html خود اضافه نمایید که برای این کار باید به روش زیر عمل کنید.
کد زیر را در بالای </head> در کد صفحه قرار دهید.
<script type="text/javascript">
Cufon.now();
Cufon.replace('h1');
</script>و بجای h1 تگ های html ای را که می خواهید با فونت مورد نظر به نمایش در بیایند را تایپ نمایید برای مثال div ، p ،td و یا a
اگر تگی را بجای h1 قرار دادید تمام تگ های هم نام نیز به آن فونت در می آیند مثلا اگر بجای h1 از div استفاده نمودید تمام div های درون صفحه به فونت مورد نظر در می آیند ولی اگر بخواهید تنها یک یا چند div به فونت مورد نظر در بیایند باید برای آن div ها یک کلاس css تعریف کنید مثلا test و بجای h1 در کد بالا div.test را قرار دهید . نام کلاس شما بجای test در div.test قرار می گیرد .
نمونه کامل کد صفحه با فونت بصورت زیر می شود.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.now();
Cufon.replace('div,p.test');
</script>
</head>
<body>
<div>mypress.ir</div><br/>
<p class="test">mypress.ir</p>
</body>
</html>اگر به کد بالا دقت کنید در قسمت Head فایل ما دو فایل جاوا اسکریپت نیز قرار داده ایم . اولین کد همان فایلی است که در مرحله اول دانلود کردید و دومی همان فایلی است که در مرحله دوم ساختید . کدی که در مر حله دوم ساختید ممکن است نام دیگری داشته باشد که آن نام را به جای “vegur_300.font.js ” قرار می دهید.
بهمین سادگی امیدوارم که خوشتون اومده باشه و مورد استفاده قرار بگیره . اگر سوالی بود بپرسید
