سایت خود را بسازید ، به روش saalek110

saalek110 · دیروز در 8:46 بعد از ظهر

صفحه ۳۹ :
افزودن فونت

از آنجایی که فونت‌های پیش فرض مرورگرها چندان جذاب نیستند، باید به سراغ اضافه کردن فونت به وب‌سایت خود برویم......

آموزش اضافه کردن کردن فونت دلخواه به صفحات سایت - ادمین سایت

اگر از فونت سایت خود خسته شده‌اید در این آموزش همراه ما باشید تا روش اضافه کردن فونت به وب‌سایت را بررسی کنیم. | آموزش‌ رایگان HTML -CSS

adminesite.com

اگر شما یک وب‌فونت دانلود کنید مشاهده می‌کنید که با چند فرمت مختلف از جمله TTF، WOFF، OTF و… مواجه هستید. فونت‌های وب دارای چندین فرمت مختلف هستند که هرکدام در مرورگر خاصی پشتیبانی می‌شوند.

برای مثال فونت با فرمت EOT فقط در مرورگر اکسپلورر پشتیبانی می‌شود در حالی که فرمت TTF در اکثر مرورگر‌های معروف قابل استفاده است.

سالک: گویا ttf و woff همه را پشتیبانی می کند و woff2 هم بدک نیست.

در سایت بالا ، فونت وزیر را برای دانلود گذاشته.

Release v33.003 · rastikerdar/vazirmatn

Fixed wrong kerning for ژ ر with مـ تـ ثـ ۱ تیر ۱۴۰۱ اصلاح کرنینگ اشتباه ژ ر با مـ تـ ثـ

github.com

سالک: لینک بالا داخل فایل readme اون فونت وزیر بود که از سایت بالا دانلود کردم.ولی توصیه نمی کنم دانلود کنید.

CSS:

@font-face {
 font-family: Vazir;
 font-style: normal;
 font-weight: normal;
 src: url('fonts/Vazir.eot');
 src: url('fonts/Vazir.eot?#iefix') format('embedded-opentype'),
 url('fonts/Vazir.woff2') format('woff2'),
 url('fonts/Vazir.woff') format('woff'),
 url('fonts/Vazir.ttf') format('truetype');
}
@font-face {
 font-family: Vazir;
 font-style: normal;
 font-weight: bold;
 src: url('fonts/Vazir-Bold.eot');
 src: url('fonts/Vazir-Bold.eot?#iefix') format('embedded-opentype'),
 url('fonts/Vazir-Bold.woff2') format('woff2'),
 url('fonts/Vazir-Bold.woff') format('woff'),
 url('fonts/Vazir-Bold.ttf') format('truetype');
}

کد بالا از سایت مذکور است.

و بعدش این طوری از فونت استفاده می کنیم:

CSS:

body{
font-family: 'Vazir', Arial, sans-serif;
font-weight:normal;
}

سایت مذکور گفته:

در پوشه‌ی اصلی پروژه خود یک فولدر جدید به نام fonts‌ ایجاد کنید و تمامی فرمت‌های فونت را در آن قرار دهید.

توجه کنید که تمامی فونت‌ها به صورت مستقیم در فولدر fonts قرار بگیرند و در هیچ فولدر دیگری نباشند.

saalek110 · امروز در 3:42 قبل از ظهر

در سایت پست قبل ، سایت زیر را معرفی کرده:

Create Your Own @font-face Kits » Font Squirrel

Create Your Own @font-face Kits by uploading the fonts you want to use.

www.fontsquirrel.com

که گویا از یک فونت ، فونت های نوع دیگر را می سازد.

saalek110 · امروز در 4:00 قبل از ظهر

در سایت دو پست قبل ، در بسته ای که برای دانلود گذاشته بود ، انواع مدیوم و لایت و thin هم بود ولی در کد فقط به معمولی و بولد اشاره کرده بود. شاید باید برای بقیه هم کد بنویسیم.