یکی از مشکلات فراروی طراحان وب محدود بودن قلم های قابل استفاده برای طراحی صفحات وب بوده است که در نتیجه ی آن یا خروجی کار طراحان صفحات وب ساده و یکنواخت بوده و یا برای رفع آن طراح مجبور به استفاده از تصاویر به جای متن بود. این تکنیک زمان قابل توجهی برای ایجاد و استفاده از تصاویر مزبور از طراح می گرفت و به علاوه باعث سنگین شدن صفحات طراحی شده و در نتیجه پایین آمدن سرعت بارگذاری می شد.
اما به یمن معرفی اساندارد جدید CSS3 این مشکل حل شده و اکنون طراحان وب می توانند با خیالی آسوده از فونت دلخواه خود استفاده کنند. دستور @font-face از مجموعه ی دستورات CSS3 به کاربر اجازه می دهد که قلم دلخواه خود را به وب سایت خود اضافه نموده و به راحتی از آن استفاده کند. به عنوان نمونه می توان به دیوان حافظ روزهای خط خطی اشاره کرد که برای نمایش اشعار حافظ از قلم زر بهره می گیرد.
شکل کلی استفاده از این دستور به صورت زیر می باشد:
@font-face {
font-family: 'Homa';
src: url('fonts/homa.eot');
src: url('fonts/homa.eot?#iefix') format('embedded-opentype'),
url('fonts/homa.woff') format('woff'),
url('fonts/homa.ttf') format('truetype'),
url('fonts/homa.svg#homa') format('svg');
font-weight: normal;
font-style: normal;
}
خط اول به تخصیص نام دلخواه برای فونت مورد استفاده اختصاص دارد و خط دوم حاوی نشانی محل قرارگیری فایل مربوط به قلم است. دستور شکل ساده ای دارد و بعد از معرفی یک قلم جدید توسط این دستور برای استفاده از آن کافی است در هر قسمتی به آن نیاز داشتیم font-family را برابر Desired_name قرار دهیم.
اما متاسفانه در حال حاضر بین مرورگرهای مختلف روش های متفاوتی برای استفاده از این دستور موجود است. مثلا مرورگر فایرفاکس از قلم های با فرمت ttf استفاده می کند در حالی که اینترنت اکسپلورر تنها قلم های otf را پشتیبانی می کند. این مساله ممکن است در نوع خود باعث سردرگم شدن طراح شود و یا سبب شود که خروجی صفحه ی وب روی مرورگری خاص با آنچه طراح انتظار داشته تفاوت های بنیادی داشته باشد. و البته برای این مشکل هم راه حل هایی وجود دارد.
ساده ترین آن کمک گرفتن از fontface.codeandmore.com است. این اسکریپت تحت وب فایل قلم دلخواه شما را دریفات کرده و ۳فایل مختلف که هر کدام توسط مرورگری خاص پشتیبانی می شوند را در اختیار شما قرارخواهد داد. همچنین یک فایل نمونه HTMLهمراه این مجموعه در اختیار شما قرار داده می شود که طریقه ی صحیح معرفی و استفاده از قلم جدید را می توانید در آن مشاهد فرمایید. البته لازم است اشاره شود که CSS3 توسط مرورگرهای قدیمی پشتیبانی نمی شود.
فایل ضمیمه ی این مطلب حاوی یک مثال از چگونگی استفاده ی این دستور می باشد.
متاسفانه سایتی که در بالا معرفی شده مدتی است که سرویس رایگان ارائه نمی کند. به عنوان گزینه ی جایگزین می توانید از سرویس آنلاین kirsle استفاده کنید که فایل با فرمت eot برای شما ایجاد می کند. همچنین سایت wedesign.ir مجموعه ای از فونت های فارسی را برای وب آماده کرده که براحتی قابل دانلود و استفاده هستند. این مجموعه که شامل ۴۰ فونت بهسازی شده برای همخوانی برای اکثر مرورگرهای اینترنت است به اندازه ی کافی جامع بوده و نیاز طراحان وب را در زمینه ی فونت فارسی به خوبی پوشش می دهد.
دیدگاهتان را بنویسید