@font-face

همیشه دلم می‌خواست (بخوانید کِرم داشتم) که کنترل قلم مورد استفاده‌ام توی صفحه دست خودم باشه و خودم رو محدود به چندتا قلم که معمولا همه جا نصبه نکنم. خوب به آرزوم رسیدم (بهتر بگم خواهم رسید به زودی!).

اگر این صفحه رو با یک مرورگر مدرن (مثل Opera 10, Frifox 3.5 و یا Safari 3.1 به بعد) باز کرده باشید حتما متوجه شکل عنوان نوشته‌ها شدید. اگر هم که از این مرورگرها استفاده نمی‌کنید این تصویر نمای خوبی بهتون می‌ده:

web-fonts

روش کار هم ساده است، کافیه از @font-face rule استفاده کنیم. کاری که برای همینجا کردم رو به عنوان نمونه با هم می‌ریم جلو. برای نمونه از قلم نستعلیق (که ۱فتحی معرفی کرده بود) استفاده کردم.

اول از همه قلم(های) مورد نظر رو روی سرویس دهنده‌ی خودمون آپلود می‌کنیم. مثلا توی پوشه‌ی fonts. بعد لازمه این قلم(ها) رو به CSSامون معرفی کنیم.
[source language=’css’]@font-face {

font-family: “IranNastaliq”;

src: url(fonts/IranNastaliq.ttf) format(“truetype”);

}[/source]

دیگه هرکجا که خواستیم از این قلم استفاده کنیم کافیه که اسمش رو ببریم:
[source language=’css’]h3 { font-family: IranNastaliq; }[/source]

به همین سادگی، به همین خوشمزگی.


منتشر شده

در

Proudly powered by WordPress