فراخوانی یک فونت (فایل فونت) برای یک صفحه HTML

[مسجد جامع پیامبر اعظم (ص) 1]

سلام به همگی دوستان

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

 

لینک فایل قالب اینترو رو ضمیمه کردم عزیزان میتونن ببینند.

استفاده هم دوست داشتید بکنید.

 

لینک فایل:

 

http://Trainbit.com/files/1148231884/intro-Chicago.zip

[musio 346]

باسلام

 

چندین بار در این مورد بحث شده، یکم سرچ !!

 

@font-face {

  font-family: "Kufi";

  font-style: normal;

  font-weight: 400;

  src: url('../fonts/DroidArabicKufi.eot');

  src: url("../fonts/DroidArabicKufi.eot?#iefix") format("embedded-opentype"),

  url("../fonts/DroidArabicKufi.woff") format("woff"),

  url("../fonts/DroidArabicKufi.ttf") format("truetype"),

  url('../fonts/DroidArabicKufi.svg#open_sansregular') format('svg');

  font-weight: normal;

  font-style: normal;

}

 

شما نیاز به نوع فونت دارید که بارنگ سبز مشخص شده

یک پوشه fonts میسازید و فونت ها رو داخل اون میریزید

 

و فقط قسمت های قرمز رو ادیت میکنید و نام فونت خودتون رو میگذارید

 

بعد هرجا خواستید میتونید از اسمی که با رنگ بنفش مشخص شده  استفاده کنید

 

یاعلی

[مسجد جامع پیامبر اعظم (ص) 1]

سلام بر عضو فعال جناب Musio  عزیز.

بله بنده هم سرچ کردم ولی متاسفانه یا عجله داشتم و یا نتونستم چیزی پیدا بکنم.

به هر جهت ممنونم از اینکه همیشه پاسخ های خوب شما رو دریافت میکنم.

بازم متشکرم از شما.

: )

[مسجد جامع پیامبر اعظم (ص) 1]

 

باسلام

 

چندین بار در این مورد بحث شده، یکم سرچ !!

 

@font-face {

  font-family: "Kufi";

  font-style: normal;

  font-weight: 400;

  src: url('../fonts/DroidArabicKufi.eot');

  src: url("../fonts/DroidArabicKufi.eot?#iefix") format("embedded-opentype"),

  url("../fonts/DroidArabicKufi.woff") format("woff"),

  url("../fonts/DroidArabicKufi.ttf") format("truetype"),

  url('../fonts/DroidArabicKufi.svg#open_sansregular') format('svg');

  font-weight: normal;

  font-style: normal;

}

 

شما نیاز به نوع فونت دارید که بارنگ سبز مشخص شده

یک پوشه fonts میسازید و فونت ها رو داخل اون میریزید

 

و فقط قسمت های قرمز رو ادیت میکنید و نام فونت خودتون رو میگذارید

 

بعد هرجا خواستید میتونید از اسمی که با رنگ بنفش مشخص شده  استفاده کنید

 

یاعلی

 

جناب موسیو

این کدها رو از اونجایی که صفحه اینتروی بنده با HTML5 نوشته شده باید بین کدوم تگ ها قرار داد؟

[musio 346]

باسلام

درفایل css ای که به صفحه اینترو لینک شده باید وارد کنید

 

یاعلی

[مسجد جامع پیامبر اعظم (ص) 1]

 

باسلام

 

چندین بار در این مورد بحث شده، یکم سرچ !!

 

@font-face {

  font-family: "Kufi";

  font-style: normal;

  font-weight: 400;

  src: url('../fonts/DroidArabicKufi.eot');

  src: url("../fonts/DroidArabicKufi.eot?#iefix") format("embedded-opentype"),

  url("../fonts/DroidArabicKufi.woff") format("woff"),

  url("../fonts/DroidArabicKufi.ttf") format("truetype"),

  url('../fonts/DroidArabicKufi.svg#open_sansregular') format('svg');

  font-weight: normal;

  font-style: normal;

}

 

شما نیاز به نوع فونت دارید که بارنگ سبز مشخص شده

یک پوشه fonts میسازید و فونت ها رو داخل اون میریزید

 

و فقط قسمت های قرمز رو ادیت میکنید و نام فونت خودتون رو میگذارید

 

بعد هرجا خواستید میتونید از اسمی که با رنگ بنفش مشخص شده  استفاده کنید

 

یاعلی

 

سلام

یه سوال آیا برای استفاده از این کد به تمامی اون فرمت های مشخصش شده  با رنگ سبز نیاز هست؟

اگر نیاز هست از کجا میشه همه فرمت های ذکر شده برای یک فونت رو بدست آورد؟

[musio 346]

باسلام

برای ایجاد و نمایش فونت روی وب به همه اون نوع های گفته شده نیاز هستش

 

شما میتونید با سرچ font converter در گوگل به نتایج خوبی برسید

 

 

یاعلی

[مسجد جامع پیامبر اعظم (ص) 1]

باسلام

برای ایجاد و نمایش فونت روی وب به همه اون نوع های گفته شده نیاز هستش

 

شما میتونید با سرچ font converter در گوگل به نتایج خوبی برسید

 

 

یاعلی

ممنونم یاعلی

[مسجد جامع پیامبر اعظم (ص) 1]

باسلام

درفایل css ای که به صفحه اینترو لینک شده باید وارد کنید

 

یاعلی

سلام

بنده کد رو به تنهایی در فایل css قرار دادم ولی اتفاقی نیفتاد!!

در فایل css که هست کد رو باید کجا در بین سایر کدها قرار داد؟ به تنهایی که کاری انجام نداد این کد.

ممنون میشم راهنمایی کنید.

نسخه ویرایش نشده صفحه اینترو رو هم قرار دادم براتون.

 

لینک دانلود اینتروی ویرایش نشده

[musio 346]

باسلام

دوست عزیز

این کدها به تنهایی کار نمیکنند که!!

شما باید فایل فونت هارو پیدا کنید و در پوشه فونت قرار بدید

و این کدهارو در اول فایل css قرار بدید

هرجا که خواست این فونت ها نشان داده شود باید font-family استفاده کنید

 

یاعلی

[mahdi m 509]

ممنون از دوست خوبمون جناب musio بابت پاسخگویی.

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

موفق باشید.

ویرایش شده اسفند 93 توسط مهدی منتظری

[مسجد جامع پیامبر اعظم (ص) 1]

ممنون از دوست خوبمون جناب musio بابت پاسخگویی.

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

موفق باشید.

 

باسلام

دوست عزیز

این کدها به تنهایی کار نمیکنند که!!

شما باید فایل فونت هارو پیدا کنید و در پوشه فونت قرار بدید

و این کدهارو در اول فایل css قرار بدید

هرجا که خواست این فونت ها نشان داده شود باید font-family استفاده کنید

 

یاعلی

از پاسخ هردو عزیز ممنونم

یک لطفی بفرمایید بنده رو در برنامه نویسی "صفر" فرض کنید،

اینطور که متوجه شدم کد fontfamily رو که در فایل html هست هر جا دیدم باید نام فونتی که جلوش نوشته شده رو با نام فونت خودم تغییر بدم

سوال: آیا باید تگِ فرمت فونت رو در جلوی نام قرار بدم یا نیاز نیست؟

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

سوال: اما سوال اینجاست که، آدرس دهی رو باید در کدومیک از فایل های CSS و یا HTML انجام بدم، وهمچنین کجای فایل مورد نظر و بین کدوم تگ و یا کد باید قرارش بدم واگر وجود داشته باشه الان در فایل مورد نظر من، زمانی که در سرور آپلود میکنم فونت ها رو آیا باید آدرس فونت رو در سرور و با ادیتور Cpanel ویرایش بکنم؟

ممنونم از زحمات دوستان که با دلسوزی راهنمایی میکنند.

[musio 346]

باسلام

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

 

خوب شما از هر فونی که تو ویندوزت خوشت میاد میری برش میداری میری تو این سایت و 3 تا فرمت eot , woff , svg رو ازش استخراج میکنی و در یک پوشه به نام fonts ذخیره میکنی

حالا این پوشه رو به طور کامل به این مسیر در هاست منتقل میکنی

هاست-> templates -> پوشه تمپلیت شما

 

خوب حالا میریم سراغ کد گفته شده

دستور font face برای تعریف فونت جدید در css هست

@font-face {
  font-family: "Kufi";
  src: url('../fonts/DroidArabicKufi.eot');
  src: url("../fonts/DroidArabicKufi.eot?#iefix") format("embedded-opentype"),
  url("../fonts/DroidArabicKufi.woff") format("woff"),
  url("../fonts/DroidArabicKufi.ttf") format("truetype"),
  url('../fonts/DroidArabicKufi.svg#open_sansregular') format('svg');
  font-weight: 400;
  font-weight: normal;
  font-style: normal;
}

خوب خط اول که تعریف دستور هست

خط دوم دستور font-family هست که اسم فونتی که میخواهیم بسازیم رو تعیین میکند

این اسم همون اسمی هست که باید به جای tahoma یا Arial استفاده شود

 

خوب حالا نوبت به این میرسه که بگیم برای فونت های جدید از چه نوع فونی میخواهیم استفاده کنیم

خط های 3,4,5,6,7 برای این کار هستند

در اینجا باید در داخل پرانتز آدرس فایل فونتی که آپلود کردیم رو بدیم ، همان رنگ زرد

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

 

دیگه فکر کنم مشکلی نباشه

موفق باشید

یاعلی