اعمال نشدن فونت در react js

9 ماه پیش توسط aminghorbani آپدیت شد
آفلاین
user-avatar
محمد مهدی صادقی ( 222 تجربه )
4 سال پیش

لینک کوتاه اشتراک گذاری

0

سلام.
من توی پروژه ی خودم، فونت که قرارمیدم، نمیشناسه. فونت ها رو توی src قرارمیدم و font-face رو توی App.css و این فایل css رو توی App.js فراخوانی میکنم. اگر فونت یک متن انتخابی رو تغییر بدم، فونت پیش فرض react از بین میره ولی فونت من اعمال نمیشه.
میشه راهنمایی کنید؟ با چند نوع فونت امتحان کردم، نشد

بهترین پاسخ
آفلاین
user-avatar

سلام. اشتباه از نحوه ی آدرس دهی بود. آدرس دهی درست بود ها ولی نمیشناخت.
باید دقیقا مثل زیر باشه. بدون هیچ نقطه ای در پشت سر آدرس.

@font-face {
  font-family:'IRANSans_LFN';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/eot/IRANSansWeb(FaNum)_Light.eot');
  src: local('IRANSans_LFN');
  src: url('/fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
  url('/fonts/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
  url('/fonts/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
  url('/fonts/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}
آفلاین
user-avatar
حسام موسوی ( 473667 تجربه )
4 سال پیش
تخصص : طراح و برنامه نویس

لینک کوتاه اشتراک گذاری

-2

سلام یعنی چی در src میزارید
بخشی از کدتون رو ارسال کنید در اینجا لطفا

آفلاین
user-avatar
محمد مهدی صادقی ( 222 تجربه )
4 سال پیش

لینک کوتاه اشتراک گذاری

1
@font-face {
  font-family: "IRANSans_LFN";
  font-style: normal;
  font-weight: 300;
  src: url('../src/fonts/eot/IRANSansWeb(FaNum)_Light.eot');
    src: local("IRANSans_LFN");
  src: url('../src/fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
  url('../src/fonts/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
  url('../src/fonts/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
  url('../src/fonts/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}
آفلاین
user-avatar
محمد مهدی صادقی ( 222 تجربه )
4 سال پیش

لینک کوتاه اشتراک گذاری

1

وبا این کلاس ، فونت رو سعی دارم که به متن دلخواه اعمال کنم

.font-irs{
    font-family: "IRANSans_LFN"!important;
}
آفلاین
user-avatar
حسام موسوی ( 473667 تجربه )
4 سال پیش
تخصص : طراح و برنامه نویس

لینک کوتاه اشتراک گذاری

1

این رو به این شکل بنویسید

@font-face {
  font-family: "IRANSans_LFN";
  font-style: normal;
  font-weight: 300;
  src: url('./../src/fonts/eot/IRANSansWeb(FaNum)_Light.eot');
    src: local("IRANSans_LFN");
  src: url('./../src/fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
  url('./../src/fonts/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
  url('./../src/fonts/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
  url('./../src/fonts/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}

البته اگر بازم نشد ببینید دقیقا چه اروری میده
یا اصلا ارور میده

آفلاین
user-avatar
محمد مهدی صادقی ( 222 تجربه )
4 سال پیش

لینک کوتاه اشتراک گذاری

0

ممنون که وقت میذارید.
با این روشی که گفتید هم درست نشد. ارور هم نمیده.

آفلاین
user-avatar
محمد مهدی صادقی ( 222 تجربه )
4 سال پیش

لینک کوتاه اشتراک گذاری

0

سلام. اشتباه از نحوه ی آدرس دهی بود. آدرس دهی درست بود ها ولی نمیشناخت.
باید دقیقا مثل زیر باشه. بدون هیچ نقطه ای در پشت سر آدرس.

@font-face {
  font-family:'IRANSans_LFN';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/eot/IRANSansWeb(FaNum)_Light.eot');
  src: local('IRANSans_LFN');
  src: url('/fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
  url('/fonts/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
  url('/fonts/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
  url('/fonts/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}
آفلاین
user-avatar
aminghorbani ( 50 تجربه )
9 ماه پیش

لینک کوتاه اشتراک گذاری

0

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

@font-face {
  font-family: 'DotGothic16-Regular';
    src: local('DotGothic16-Regular'),url('/src/DotGothic16-Regular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
  }

هیچ اروریم نداره و همه چی به نظر درست میرسه , فونت ها رو هم در پوشه src ریختم چون وقتی داخل public بود ارور میداد این فایل هم داخل index.js ایمپورت کردم و فایده ای نداشت

برای ارسال پاسخ لازم است، ابتدا وارد سایت شوید.