محمد مهدی صادقی
4 سال پیش توسط محمد مهدی صادقی مطرح شد
7 پاسخ

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

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


reactjs
تگ‌های محبوب
لاراول
php
laravel
متفرقه
reactjs
عمومی
html_css
nodejs
vuejs
وردپرس
پایتون
css
فلاتر
react
javascript
ثبت پرسش جدید
محمد مهدی صادقی
@sadeghi1376mms 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');
}

حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 4 سال پیش مطرح شد
-2

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


محمد مهدی صادقی
@sadeghi1376mms 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');
}

محمد مهدی صادقی
@sadeghi1376mms 4 سال پیش آپدیت شد
1

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

.font-irs{
    font-family: "IRANSans_LFN"!important;
}

حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 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');
}

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


محمد مهدی صادقی
@sadeghi1376mms 4 سال پیش مطرح شد
0

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


محمد مهدی صادقی
@sadeghi1376mms 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');
}

aminghorbani
@mohammadhasanghorbani 1 سال پیش آپدیت شد
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 ایمپورت کردم و فایده ای نداشت


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام