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

saalek110 · 2024-11-19T20:46:07+0330

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

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

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

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

adminesite.com

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

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

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

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

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 قرار بگیرند و در هیچ فولدر دیگری نباشند.

......................................

نکات و توضیحات

فرمت woff و woff2 بیشترین سازگاری و پشتیبانی رو در مرورگرها داره، سعی کنید حتما و فقط از این ۲فرمت استفاده کنید، و دیگه بقیه فرمت ها نیاز نیست.

فرمت EOT فقط بروی مرورگر اینترنت اکسپلورر یا IE پشتیبانی میشود، خوده مرورگر IE هم دیگه میدونید خیلی وقته به رحمت خدا رفته، اگه هم کسی رو میشناسید که هنوز از مرورگر اینترنت اکسپلورر استفاده میکنه، من همینجا اعلام میکنم که این شخص رو زنده میخوام

قبلا فرمت SVG هم بود ولی خب این فرمت کلا از رده خارج شده ( پس اینم نباید ازش استفاده کنید )

سالک: ۱۰ خط آخر این پست از سایت زیر است:

https://free-learn.ir/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%d8%b6%d8%a7%d9%81%d9%87-%da%a9%d8%b1%d8%af%d9%86-%d9%81%d9%88%d9%86%d8%aa-%d8%af%d9%84%d8%ae%d9%88%d8%a7%d9%87-%d8%af%d8%b1-%d8%b3%d8%a7%db%8c%d8%aa/

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

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

در سایت فری لرن این سایت را معرفی کرده:

https://transfonter.org

شرح بیشتر در:

https://free-learn.ir/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%d8%b6%d8%a7%d9%81%d9%87-%da%a9%d8%b1%d8%af%d9%86-%d9%81%d9%88%d9%86%d8%aa-%d8%af%d9%84%d8%ae%d9%88%d8%a7%d9%87-%d8%af%d8%b1-%d8%b3%d8%a7%db%8c%d8%aa/

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

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

saalek110 · دیروز در 4:04 قبل از ظهر

سایت دومی لینک دانلود فونت فارسی ایرانسنس در اختیار شما قرار داده

لینک سایت:

نصب فونت روی سایت

نصب فونت روی وب سایت به همراه فیلم آموزش نصب فونت فارسی را در ادامه این مقاله آموزشی می توانید مشاهده نمایید.

www.aryatehran.com

سایت بالا گفته:
به غیر از فونت ایران سنس شما از فونت‌های زیر می توانید در ساختار صفحه html خود استفاده نمایید.

فونت یکان
فونت شبنم
فونت وزیر
فونت تنها
فونت ساحل
فونت صمیم
فونت پرستو

خیلی شبیه وزیر است ولی اگر دقت کنید شکل حروف فرق داره.

saalek110 · امروز در 12:39 قبل از ظهر

CSS:

@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 100;
  src: url("fonts/Vazir-Thin.eot");
  src: url("fonts/Vazir-Thin.woff") format("woff"),
    url("fonts/Vazir-Thin.ttf") format("ttf"),
    url("fonts/Vazir-Thin.woff2") format("woff2");
}
@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 300;
  src: url("fonts/Vazir-Light.eot");
  src: url("fonts/Vazir-Light.woff") format("woff"),
    url("fonts/Vazir-Light.ttf") format("ttf"),
    url("fonts/Vazir-Light.woff2") format("woff2");
}

@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 400;
  src: url("fonts/Vazir-Regular.eot");
  src: url("fonts/Vazir-Regular.woff") format("woff"),
    url("fonts/Vazir-Regular.ttf") format("ttf"),
    url("fonts/Vazir-Regular.woff2") format("woff2");
}
@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 950;
  src: url("fonts/Vazir-Black.eot");
  src: url("fonts/Vazir-Black.woff") format("woff"),
    url("fonts/Vazir-Black.ttf") format("ttf"),
    url("fonts/Vazir-Black.woff2") format("woff2");
}

body {
  font-family: vazir;
  direction: rtl;
}

اضافه کردن فونت فارسی در CSS و HTML

اضافه کردن فونت فارسی به css و اضافه کردن فونت فارسی به html را در این ویدئوی رایگان به صورت کامل آموزش دادیم.

webkima.com

کد سایت بالا ، را مقایسه کنید با سایت قبلی.

saalek110 · امروز در 12:43 قبل از ظهر

استفاده از Google Fonts یا فونت های گوگل
با فونت های گوگلی که آشنا هستید؟ Google Fonts فونت های متنوع و متعددی را خصوصا برای زبان انگلیسی در اختیار شما قرار میگیرد. در میان این فونت ها، یکی دو تا فونت زیبا برای نمایش فارسی نیز به چشم میخورند. اگر بخواهید بجای فونت های آپلود شده روی هاست خود از فونت های گوگلی استفاده کنید، میتوانید از دو روش مختلف استفاده کنید. روش اول فراخوانی فونت در فایل CSS شما با دستور @import است. برای انجام این کار کافی است از کد زیر استفاده کنید :

CSS:

@import url(//fonts.googleapis.com/css?family=Open+Sans);

طبعا آدرس درج شده در کد بالا را میتوانید با آدرس فونت دلخواهتان جایگزین کنید.

روش دوم فراخوانی فونت با استفاده از تگ link در html است

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

پیوست فونت به css - آموزش استفاده از فونت دلخواه در سایت - اضافه کردن فونت به قالب -چگونه به سایت خود فونت اضافه کنیم- استفاده از فونت فارسی دلخواه در قالب

mrcode.ir

saalek110 · امروز در 12:48 قبل از ظهر

نام فونت های چند کلمه ای

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

این فونت هارو بهتره برای بحث بهینه بودن درون دوبل کوتیشن گذاشت یعنی درون ” “، و اگه داخل دوبل کوتیشن قرار نگیره ممکنه در برخی مرورگرها بکل اون فونت نمایش داده نشه.

یا ممکنه حتی اگه داخل دوبل کوتیشن نزارید بازم مشکلی نداشته باشه و نشون بده ولی خب بطور کلی برای بحث بهینه و استاندارد بودن میگن باید حتما داخل دوبل کوتیشن بزارید.

همیشه سعی کنید در نام فامیلی که برای فونت تان ایجاد مینمایید هیچ فاصله ای نباشد تا در فراخوانی آن مشکلی نداشته باشید.

CSS:

p{
 font-family : "My Best Font",myfont2;
}

https://free-learn.ir/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%d8%b6%d8%a7%d9%81%d9%87-%da%a9%d8%b1%d8%af%d9%86-%d9%81%d9%88%d9%86%d8%aa-%d8%af%d9%84%d8%ae%d9%88%d8%a7%d9%87-%d8%af%d8%b1-%d8%b3%d8%a7%db%8c%d8%aa/

saalek110 · امروز در 12:53 قبل از ظهر

نحوه وزن دادن به فونت ( نازکی و کلفتی فونت )
خب در ادامه آموزش نحوه اضافه کردن فونت دلخواه در سایت میخوایم یاد بگیریم که چگونه میتوان وزن یک فونت رو کم و زیاد کرد.
فونت ها میتونن وزن داشته باشند، مثلا میتونن کلفت باشن یا میتونن لاغر باشند، که ما با استفاده از ویژگی font-weight میتونیم وزن فونت مون رو مشخص نماییم.

ولی یک نکته اینجا وجود داره و خیلی هم مهمه، اینکه هر فونتی رو نمیشه همینجوری وزنش رو کم و زیاد ( چاق یا لاغر ) کرد، تنها به شرطی میتونیم اینکارو کنیم که فایل فونت خودش در وزن های مختلفی وجود داشته باشد.

مثلا ما فونت داریم که در وزن های بفرض مثال ( خیلی لاغر – لاغر – نرمال – کمی چاق – چاق – خیلی چاق ) هستند، پس باید دونه به دونه این فونت هارو که در وزن های مختلفی هستند در سایت قرار بدیم و تعریف شون کنیم.

بعدش دیگه هرکجا که خواستیم مثلا فونت مون رو پررنگ یا بولد شده یا در واقع همون حالت چاق شدش نشون بدیم باید از ویژگی font-weight استفاده نماییم.

پس در مرحله اول اونجایی که داریم فونت رو تعریف میکنیم با استفاده از ویژگی font-weight مشخص میکنیم که وزن فونت ما چه اندازه ای است ، لطفا به دستورات زیر توجه نمایید.

CSS:

@font-face {
  font-family: 'myfont2';
  src: url('myfont/font2.woff') format('woff');
  font-weight: bold;
}

یاهم میتونیم بطور مستقیم فایل خوده همون فونتی رو تعریف کنیم که خودش در وزن مثلا بولد یا چاق هستش

CSS:

@font-face {
  font-family: 'myfont2';
  src: url('myfont/Font_Bold.woff') format('woff');
}

حال در مرحله ی دوم میتونیم دیگه اونجایی که میخوایم فونت رو صدا ( فراخوانی ) کنیم نیز با استفاده از همین ویژگی font-weight وزن فونت مون رو مشخص کنیم.

CSS:

p{
 font-family:myfont;
 font-weight:bold;
}

تنظیم وزن فونت بصورت عددی

ما بصورت عددی نیز میتونیم وزن فونت مون رو مشخص کنیم، یعنی مثلا بگیم وزن فونت مون ۶۰۰ باشه یا ۸۰۰ – که این عدد میتواند بین ۱۰۰ تا ۹۰۰ باشد.

CSS:

p{
 font-family:myfont2;
 font-weight:600;
}

https://free-learn.ir/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%d8%b6%d8%a7%d9%81%d9%87-%da%a9%d8%b1%d8%af%d9%86-%d9%81%d9%88%d9%86%d8%aa-%d8%af%d9%84%d8%ae%d9%88%d8%a7%d9%87-%d8%af%d8%b1-%d8%b3%d8%a7%db%8c%d8%aa/

saalek110 · امروز در 12:55 قبل از ظهر

https://free-learn.ir/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%d8%b6%d8%a7%d9%81%d9%87-%da%a9%d8%b1%d8%af%d9%86-%d9%81%d9%88%d9%86%d8%aa-%d8%af%d9%84%d8%ae%d9%88%d8%a7%d9%87-%d8%af%d8%b1-%d8%b3%d8%a7%db%8c%d8%aa/

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

سالک: تا اینجا ۳ تا فونت دانلود کردیم. وزیر و ایران سنس و ایران یکان.

saalek110 · امروز در 1:11 قبل از ظهر

قبل از هرچیزی لازم است تا فونت خودتان را پیدا کنید . برخی فونت‌ها مثل فونت ساحل و یکان که فونت‌هایی با وزن مناسب نیز هستند ، در سطح وب بصورت رایگان جهت دانلود قرار داده شده‌اند و می‌توانید بسادگی فایل آنها را دانلود کنید . پس از دانلود یک فونت شما ممکن است چندین وزن مختلف از آن را داشته باشید ، بصورت زیر :

کد:

Light
Regular
Medium
Bold
ExtraBold

مسلما وزن Medium و همچنین Regular برای استفاده در داخل متن سایت بسیار مناسب خواهند بود . وزن‌های Bold و ExtraBold عموما برای قسمت‌های تیتر و عناوین خاص استفاده می‌شوند .