font + scroll

src/App.tsx

@@ -2,6 +2,7 @@ import { FC, useEffect, useState } from 'react'
 import { BrowserRouter } from 'react-router-dom'
 import 'swiper/swiper-bundle.css';
 import 'rc-rate/assets/index.css';
+import './assets/fonts/roboto/roboto.css'
 import i18next from 'i18next'
 import { I18nextProvider } from 'react-i18next'
 import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
@@ -11,6 +12,7 @@ import { IApiErrorRepsonse } from './types/error.types'
 import MainRouter from './router/Main'
 import AuthRouter from './router/Auth'
 import { Pages } from './config/Pages'
+import useNumberFont from './hooks/useNumberFont';
 
 i18next.init({
   interpolation: { escapeValue: false },
@@ -41,6 +43,8 @@ const queryClient = new QueryClient({
 
 const App: FC = () => {
 
+  useNumberFont()
+
   const [isLogin, setIsLogin] = useState<'checking' | 'isLogin' | 'isNotLogin'>('checking')
   useEffect(() => {
 
@@ -55,6 +59,7 @@ const App: FC = () => {
 
   }, [])
 
+
   return (
     <BrowserRouter>
       <QueryClientProvider client={queryClient}>

src/assets/fonts/roboto/roboto.css

@@ -0,0 +1,143 @@
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-BlackItalic.ttf") format("truetype");
+  font-weight: 900;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-BoldItalic.ttf") format("truetype");
+  font-weight: 700;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-ExtraBold.ttf") format("truetype");
+  font-weight: 800;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-ExtraBoldItalic.ttf") format("truetype");
+  font-weight: 800;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-ExtraLight.ttf") format("truetype");
+  font-weight: 200;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-ExtraLightItalic.ttf") format("truetype");
+  font-weight: 200;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-Italic.ttf") format("truetype");
+  font-weight: 400;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-LightItalic.ttf") format("truetype");
+  font-weight: 300;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-MediumItalic.ttf") format("truetype");
+  font-weight: 500;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-SemiBoldItalic.ttf") format("truetype");
+  font-weight: 600;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-Thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-ThinItalic.ttf") format("truetype");
+  font-weight: 100;
+  font-style: italic;
+  unicode-range: U+30-39;
+}

src/hooks/useNumberFont.ts

@@ -0,0 +1,82 @@
+import { useEffect } from "react";
+
+const useDetectLatinAndNumbers = () => {
+  useEffect(() => {
+    // تابعی برای اضافه کردن کلاس‌ها
+    const addClassIfContainsLatinOrNumbers = (element: HTMLElement) => {
+      element.childNodes.forEach((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          const textContent = node.nodeValue;
+          if (textContent) {
+            // اگر عدد داشت
+            if (/\d/.test(textContent)) {
+              element.classList.add("has-number");
+            }
+            // اگر حرف لاتین داشت
+            if (/[a-zA-Z]/.test(textContent)) {
+              element.classList.add("has-latin");
+            }
+          }
+        } else if (node.nodeType === Node.ELEMENT_NODE) {
+          const el = node as HTMLElement;
+
+          // بررسی `input` و `textarea`
+          if (
+            el instanceof HTMLInputElement ||
+            el instanceof HTMLTextAreaElement
+          ) {
+            const checkAndApplyClasses = () => {
+              // با استفاده از requestAnimationFrame برای جلوگیری از به‌هم‌ریختگی در سافاری
+              requestAnimationFrame(() => {
+                if (/\d/.test(el.value)) {
+                  el.classList.add("has-number");
+                } else {
+                  el.classList.remove("has-number");
+                }
+
+                if (/[a-zA-Z]/.test(el.value)) {
+                  el.classList.add("has-latin");
+                } else {
+                  el.classList.remove("has-latin");
+                }
+              });
+            };
+
+            // مقدار اولیه را بررسی کنیم
+            checkAndApplyClasses();
+
+            // هر تغییری را بررسی کنیم
+            el.addEventListener("input", checkAndApplyClasses);
+          }
+
+          // باز هم اضافه کردن کلاس به سایر عناصر
+          addClassIfContainsLatinOrNumbers(el);
+        }
+      });
+    };
+
+    // استفاده از MutationObserver برای نظارت بر تغییرات DOM
+    const observer = new MutationObserver((mutationsList) => {
+      mutationsList.forEach((mutation: any) => {
+        // تایپ دقیق‌تر برای جلوگیری از خطا در تایپ‌اسکریپت
+        if (
+          mutation.type === "childList" ||
+          mutation.type === "subtree" ||
+          mutation.type === "attributes"
+        ) {
+          addClassIfContainsLatinOrNumbers(mutation.target as HTMLElement);
+        }
+      });
+    });
+
+    // شروع به نظارت بر تمام تغییرات در بدنه صفحه
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    // در نهایت، پاکسازی اثرات هنگام خروج از کامپوننت
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+};
+
+export default useDetectLatinAndNumbers;

src/index.css

@@ -5,6 +5,7 @@
 html {
   direction: rtl;
   overflow: hidden;
+  max-width: 100%;
 }
 
 body {
@@ -17,7 +18,16 @@ body {
   background: #eceef6;
   font-weight: 300;
   overflow: hidden;
+  font-feature-settings: "lnum"; /* اطمینان از نمایش اعداد انگلیسی */
 }
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden !important; /* اعمال overflow: hidden با !important */
+}
+
 html,
 body,
 #root {
@@ -183,3 +193,9 @@ tbody tr {
     clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
   }
 }
+
+.has-latin,
+.number,
+.has-number {
+  font-family: Roboto !important;
+}