قرار دادن فونت دلخواه در وب سایت
امروز به دنبال این بودم که فونت دلخواه خود را درون وبسایت بگذارم و از محدود بودن به دو فونت فارسی و دوست داشتنی Tahoma و Arial دل بکنم به همین خاطر مراحل زیر را انجام می دهیم.
ابتدا فونت دلخواه خود را به غیر از پسوند TTf که در اختیار داریم باید به پسوندهایeot و woff و svg تبدیل نماییم تا دیگر نیاز نباشه سرور فونت هارو از روی کلاینت بخواند از روی سرور بخواند. برای این کار به سایت هایی که برای تبدیل به فرمت های دلخواه میرویم و به صورت آنلاین این کار را انجام می دهیم یکی از این سایت ها که من از آن استفاده کردم سایت www.onlinefontconverter.com می باشد به این سایت می روید و ثبت نام می کنید و بعد از وارد شدن به محیط کاربری خود در قسمت select font فونت دلخواه خود را آپلود کرده و لیست مبدل ها ضاهر شده و سه نوع فابل رو انتخاب می کنید و لینک آن در پایین ظاهر می شود و در آنهارا دانلود می کنیم و داخل یک پوشه به همراه فونت اصلی قرار می دهیم و بر روی هاست یا سایت های میزبان آپلود می کنیم.
تا اینجا فونت هارو به دست آوردیم بعد به قسمت فایل css اصلی وب سایت کد زیر را وارد می کنیم
ابتدا فونت دلخواه خود را به غیر از پسوند TTf که در اختیار داریم باید به پسوندهایeot و woff و svg تبدیل نماییم تا دیگر نیاز نباشه سرور فونت هارو از روی کلاینت بخواند از روی سرور بخواند. برای این کار به سایت هایی که برای تبدیل به فرمت های دلخواه میرویم و به صورت آنلاین این کار را انجام می دهیم یکی از این سایت ها که من از آن استفاده کردم سایت www.onlinefontconverter.com می باشد به این سایت می روید و ثبت نام می کنید و بعد از وارد شدن به محیط کاربری خود در قسمت select font فونت دلخواه خود را آپلود کرده و لیست مبدل ها ضاهر شده و سه نوع فابل رو انتخاب می کنید و لینک آن در پایین ظاهر می شود و در آنهارا دانلود می کنیم و داخل یک پوشه به همراه فونت اصلی قرار می دهیم و بر روی هاست یا سایت های میزبان آپلود می کنیم.
تا اینجا فونت هارو به دست آوردیم بعد به قسمت فایل css اصلی وب سایت کد زیر را وارد می کنیم
@font-face {
font-family: ‘B Mitra’;
src: url(‘../Font/BMitraBold.eot’);
src: url(‘../Fonts/BMitraBold.eot?#iefix’)
format(‘embedded-opentype’),
url(‘../Fonts/BMitraBold.woff’) format(‘woff’),
url(‘../Fonts/BMitraBd.ttf’) format(‘truetype’),
url(‘../Fonts/BMitraBold.svg#BMitraBoldRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
در مثال بالا بنده از فونت میترا استفاده کردم و شما نام هر فونتی که دارید را باید به جای نام فایل ها جایگزین کرده و تغییر دهید.
و برای فراخوانی آن در هر استایلی از وب سایت می توانیم از کد زیر استفاده کنیم.
font-family: 'B Mitra',BMitra,tahoma;
نکته ای نمونده و ختم کلام
+ نوشته شده در دوشنبه یکم آبان ۱۳۹۱ ساعت 18:43 توسط محمد حسن
|