Webfonts و CSS 3

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

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

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

اول از همه قلم(های) مورد نظر رو روی سرویس دهنده‌ی خودمون آپلود می‌کنیم. مثلا توی پوشه‌ی fonts. بعد لازمه این قلم(ها) رو به CSSامون معرفی کنیم.

@font-face {

font-family: "IranNastaliq";

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

}

دیگه هرکجا که خواستیم از این قلم استفاده کنیم کافیه که اسمش رو ببریم:

h3 { font-family: IranNastaliq; }

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

اینجاها رو هم بخونید:
Web fonts with @font-face
CSS @ Ten: The Next Big Thing