آفلاین
user-avatar

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

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

سلام.
من توی پروژه ی خودم، فونت که قرارمیدم، نمیشناسه. فونت ها رو توی 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
حسام موسوی ( 378679 تجربه )
3 سال پیش
تخصص : طراح و برنامه نویس

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

آفلاین
user-avatar
محمد مهدی صادقی ( 222 تجربه )
3 سال پیش
@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 تجربه )
3 سال پیش

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

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

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

@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 تجربه )
3 سال پیش

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

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

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

@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');
}
برای ارسال پاسخ باید وارد سایت شوید