فونت های سفارشی یکی از جذاب ترین جنبه های بالقوه CSS3 برای طراحان هستند. با قانون font-face، میتوانید هر قلمی را که به صورت آنلاین در متن صفحه وب خود دارید، بدون در نظر گرفتن اینکه کاربر آن را نصب کرده است یا خیر، رندر کنید.
همانند اکثر تکنیکهای CSS3، کد اصلی بسیار ساده است، اما واقعیت عملی کمی پیچیدهتر است.
در این آموزش کوتاه، اصول گنجاندن فونت های سفارشی در صفحات شما را بررسی خواهیم کرد.
آپلود فونت
ابتدا، مطمئن شوید که فونتی که می خواهید استفاده کنید دارای مجوز برای استفاده در وب باشد. تقریباً همه فونتهای رایگان را میتوان در یک وبسایت استفاده کرد و بسیاری از فونتهای ممتاز با مجوزی در دسترس هستند که استفاده از وب را پوشش میدهد.
بعد فونت انتخابی خود را در سرور خود آپلود کنید. ممکن است بخواهید آن را در یک فهرست اختصاصی “fonts” ذخیره کنید، اما این اختیاری است.
به یاد داشته باشید که فایلها را برای هر نوع فونتی که قصد استفاده از آن را دارید، مانند پررنگ یا مورب اضافه کنید. می توانید از فایل های EOT (Embedded OpenType) برای اینترنت اکسپلورر و از OTF (OpenType) یا TTF (TrueType) برای بقیه استفاده کنید. (گزینه های اضافی عبارتند از WOFF (قالب فونت باز وب) و SVG (گرافیک برداری مقیاس پذیر) اما ما در اینجا به انواع رایج تر می پردازیم.)
محل ذخیره فایل های فونت در سرور خود را یادداشت کنید.
یک بخش font-face به کد CSS خود اضافه کنید
فایل HTML یا CSS را برای صفحه ای که با آن کار می کنید باز کنید. یک اعلان font-face به کد سبک اضافه کنید:
ابتدا در بخش font-face، نامی به قلم بدهید که بعداً بتوانید برای ارجاع به آن استفاده کنید:
font-family: 'lovelyFont';
بعد، همچنان در داخل بخش font-face ، مکان فایل EOT را ارائه دهید:
src: url('fonts/lovely_font.eot');
در صورت لزوم مکان و نام فونت را تغییر دهید. سپس یک فونت OTF و/یا TTF اضافه کنید:
src:
آدرس اینترنتی ('fonts/lovely_font.otf')
src:
url('fonts/lovely_font.ttf')
این کدهای خالی از کد لازم است که در بسیاری از موارد کافی خواهد بود. با این حال، مراحل دیگری وجود دارد که میتوانیم برای اطمینان بیشتر کد انجام دهیم. ابتدا این بخش را گسترش دهید تا نشانگر نوع فایل فونت را شامل شود:
src:
آدرس اینترنتی ('fonts/lovely_font.otf')
قالب ("نوع باز");
src:
url('fonts/lovely_font.ttf')
قالب ('Truetype');
بهعنوان یکی دیگر از معیارهای اختیاری بهرهوری، میتوانیم مرورگر را وادار کنیم که یک کپی محلی از فونت را بررسی کند در صورتی که کاربر قبلاً آن را داشته باشد. کد خود را دوباره به صورت زیر گسترش دهید، قبل از مشخص کردن URL، بخش محلی را اضافه کنید، به طوری که فونت فقط در صورت لزوم دانلود شود:
src:
محلی ("قلم دوست داشتنی")،
محلی ("قلم دوست داشتنی")،
آدرس اینترنتی ('fonts/lovely_font.otf')
قالب ("نوع باز");
src:
محلی ("قلم دوست داشتنی")،
محلی ("قلم دوست داشتنی")،
url('fonts/lovely_font.ttf')
قالب ('Truetype');
افزودن برای OTF و TTF یکسان است. ما نام فونت را بعد از کلمه کلیدی local مشخص میکنیم.
در این مورد ما دو خط داریم که فونت محلی را مشخص می کند زیرا نام فونت بیش از یک کلمه در آن وجود دارد. نسخه خط خطی برای نحوه ذخیره نام فونت ها در سیستم عامل های خاص مناسب است – اگر فونت فقط یک کلمه در نام خود داشته باشد، این خط اضافی ضروری نیست. اگر میدانید که یک فونت در سیستمهای مختلف میتواند نامهای مختلفی داشته باشد، هر یک از احتمالات را در بخش محلی خود قرار دهید.
فونت را روی عناصر صفحه اعمال کنید
در نهایت می توانیم فونت را روی عناصر صفحه اعمال کنیم. در کد CSS برای یک عنصر خاص، یا گروهی از عناصر، به سادگی نام قلمی را که استفاده میکنید، از جمله مواردی که انتخاب میکنید، مشخص کنید:
div { font-family: 'lovelyFont', sans-serif; }
شامل انواع فونت
اگر، برای مثال، میخواهید از نسخه پررنگ فونت خود نیز استفاده کنید، کافی است بخش font-face دیگری را با URL فایل فونت پررنگ و اعلان «وزن قلم» اضافه کنید: پررنگ؛». برای هر عنصری که فونت سفارشی روی آن اعمال میشود، وزن قلم را درشت مشخص کنید و مرورگر بهطور خودکار نسخه پررنگ را نمایش میدهد:
/*نسخه پیش فرض*/
@font-face {
font-family: 'lovelyFont';
src: url('fonts/lovely_font.eot');
src:
محلی ("قلم دوست داشتنی")،
محلی ("قلم دوست داشتنی")،
آدرس اینترنتی ('fonts/lovely_font.otf')
قالب ("نوع باز");
}
/*نسخه پررنگ*/
@font-face {
font-family: 'lovelyFont';
src: url('fonts/lovely_font_bold.eot');
src:
محلی ("قلم پررنگ دوست داشتنی")،
محلی ("قلم دوست داشتنی-پررنگ")،
url('fonts/lovely_font_bold.otf')
قالب ("نوع باز");
فونت-وزن: پررنگ;
}
/*عنصر ظرف*/
div { font-family: 'lovelyFont', sans-serif; }
/*عناصر دهانه داخل ظرف div*/
span { font-weight: bold; }
همین!
آیا از CSS3 برای گسترش نوع چهره های موجود برای شما استفاده می کنید؟ آیا از سرویسی مانند Adobe’s Typekit یا Google’s Webfonts استفاده می کنید؟ در نظرات به ما اطلاع دهید.
تصویر/تصویر کوچک ویژه، تصویر فونت از طریق Shutterstock.
بدون دیدگاه