diff --git a/Webfonts/Fa Numral Help.html b/Webfonts/Fa Numral Help.html new file mode 100644 index 0000000..0483ba9 --- /dev/null +++ b/Webfonts/Fa Numral Help.html @@ -0,0 +1,534 @@ + + + + + IranSansX OpenType features in CSS + + + + + + + + + + +
+ +

فارسی کردن اعداد انگلیسی و عربی

+ +

Stylistic alternates (ss01)

+

با فعال کردن استایلستیک سری ss01 اعداد انگلیسی بصورت فارسی نمایش داده می‌شود. در مثال زیر ردیف اول اعداد فارسی است و ردیف دوم اعداد انگلیسی است که فارسی شده است.

+

+.ss01 { + -moz-font-feature-settings: "ss01"; + -webkit-font-feature-settings: "ss01"; + font-feature-settings: "ss01"; +} +
+
+

+۱۲۳۴۵۶۷۸۹۰ +
+1234567890 +

+
+ + +
+

+

هم عرض (monospace) کردن اعداد

+ +

Stylistic alternates (ss03)

+

با فعال کردن استایلستیک سری ss03 اعداد بصورت منو اسپیس تایپ می‌شود یعنی عرض همه اعداد برابر است و مناسب استفاده در لیست‌ها و جداول اطلاعات. +
+در سطر دوم اعداد انگلیسی فارسی و هم‌عرض شده است. +

+

+.ss03 { + -moz-font-feature-settings: "ss03"; + -webkit-font-feature-settings: "ss03"; + font-feature-settings: "ss03"; +} +
+
+

+ ۱۲۳۴۵۶۷۸۹۰ +
+ 1234567890 +

+
+
+ +
+

+

تغییر تراز عمودی اعداد

+ +

Stylistic alternates (ss04)

+

با فعال کردن استایلستیک سری ss04 اعداد کمی پایین‌تر از خط کرسی قرار می‌گیرد تا تراز عمودی در باکس‌های طراحی وسط باشد. +
+در مثال زیر: خط اول تراز اعداد در حالت پیش‌فرض و در خط دوم به کمک استایل ss04 تراز تغییر کرده است.

+

+.ss04 { + -moz-font-feature-settings: "ss04"; + -webkit-font-feature-settings: "ss04"; + font-feature-settings: "ss04"; +} +
+
+

+ ۱۲۳۴۵۶۷۸۹۰ ریال +

+
+

+ ۱۲۳۴۵۶۷۸۹۰ ریال +

+
+
+ + +
+ + + + + + diff --git a/Webfonts/IranSansX.html b/Webfonts/IranSansX.html new file mode 100644 index 0000000..7a68f4f --- /dev/null +++ b/Webfonts/IranSansX.html @@ -0,0 +1,422 @@ + + + + +IRANSansX Family Type face: خانواده فونت ایران‌سنس + + + + + + + + +
+ +
+
+

بِسْمِ اللهِ الرَّحْمَنِ الرَّحِيمِ

+
+
د
+
+
+ ن وَالْقَلَمِ وَ مَا يَسْطُرُون +
+ نون؛ سوگند به قلم و آنچه می نويسند. +
+ Noon. I swear by the pen and what the angels write +
+
+
+
+ +
+ +
+

نکاتی درباره تایپوگرافی وب

+
+ +
ج
+
+

از زمان پیدایش نخستین وب سایت، متن ها یکی از اجزای مهم صفحات وب بودند. هر چند به مرور زمان با ورود تصاویر، صوت و فیلم کمی از بار مسئولیت متون کم شد اما هنوز جایگاه خود را از دست نداده اند و بخش مهمی از کار را به عهده دارند.

+

بسیاری از طراحان وب سایت به صورت تجربی بهترین ترکیب و ظاهر را برای نمایش متن ها انتخاب می کنند. اما اصولی وجود دارد که با رعایت آن ها، تاثیرپذیری و زیبایی سایت چند برابر خواهد شد.

+

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

+
+ + +
+ +
+
+

تاثیر اندازه فونت و سلسله مراتب تگ‌ها

+
+
ن
+
+

فونت های داخل سایت باید به گونه ای قرار گیرند که کاربر به راحتی بتواند آن ها را بخواند. نوع فونت، وزن و کوچک (یا بزرگ) بودن اندازه آن ممکن است تمایل کاربر برای بازگشت به وب سایت را کاهش دهد. قواعد و قوانین زیادی برای انتخاب بهترین فونت وجود دارد.

+

در زیر می توانید ۱۲ وزن مختلف خانواده فونت ایران‌سنس را در شرایط یکسان مشاهده کنید. لازم به ذکر است برای این صفحه از وزن معمولی (Normal) استفاده شده است.

+
+
+ + +
+
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Thin)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (UltraLight)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Light)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Regular)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Medium)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (demiBold)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Bold)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (ExtraBold)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Black)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (ExBlack)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Heavy)
+
+
+ +
+
+ +
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Thin)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (UltraLight)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Light)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Regular)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Medium)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (demiBold)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Bold)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (ExtraBold)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Black)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (ExBlack)
+
بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Heavy)
+
+
+ + +
+
+

تگ‌های هدینگ

+
+
و
+
+

در این بین، استفاده از تگ های هدینگ مناسب و رعایت سلسله مراتب آن ها، هم مفهوم نوشته را بهتر منتقل می کند و هم تاثیر قابل توجهی در نتایج موتورهای جستجو خواهد داشت. این نکته یکی از فاکتورهای مهم در بهینه سازی وب سایت برای موتورهای جستجو (Search Engine Optimization) است.

+

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

+
+
+ +
+
+

(H1) نابرده رنج گنج میسر نمی شود. No gain without pain

+

(H2) نابرده رنج گنج میسر نمی شود. No gain without pain

+

(H3) نابرده رنج گنج میسر نمی شود. No gain without pain

+

(H4) نابرده رنج گنج میسر نمی شود. No gain without pain

+
(H5) نابرده رنج گنج میسر نمی شود. No gain without pain
+
(H6) نابرده رنج گنج میسر نمی شود. No gain without pain
+
+
+ +
+
+

(H1) نابرده رنج گنج میسر نمی شود. No gain without pain

+

(H2) نابرده رنج گنج میسر نمی شود. No gain without pain

+

(H3) نابرده رنج گنج میسر نمی شود. No gain without pain

+

(H4) نابرده رنج گنج میسر نمی شود. No gain without pain

+
(H5) نابرده رنج گنج میسر نمی شود. No gain without pain
+
(H6) نابرده رنج گنج میسر نمی شود. No gain without pain
+
+
+ +
+
+

سطر و ستون بندی

+
+
م
+
+

معمولاً هرگاه مقدار نوشته از یک سطر بیشتر شود ناگزیر به ستون بندی هستیم. و این کار ما را با چند متغییر مواجه خواهد کرد:

+

۱- عرض ستون‌های متنی که حاوی حداقل۷ کلمه باشد بهترین انتخاب است. اگر ستون کوتاه‌تر باشد چشم بیننده در اثر حرکت‌های زود به زود از پایان یک سطر به ابتدای سطر بعدی خسته خواهد شد. علاوه بر این لبه ستون‌هایی با عرض کم نیز همیشه دندانه ای و بی نظم خواهد بود. ستون‌هایی با عرض طولانی هم برای خواننده آزار دهنده است چرا که چشم در حرکت بازگشت از انتهای یک سطر به ابتدای سطر بعدی ممکن است دچار اشتباه شود. + +

۲- لدینگ یا همان فاصله سطر هم در ستون بندی اهمیت دارد. ستون‌های فشرده اگرچه به لحاظ گرافیکی منسجم و زیبا هستند اما عمل خواندن را مختل می کنند و در مقابل، فاصله سطر زیاد نیز باعث نازیبایی و خستگی چشم خواننده می‌شود. فاصله سطر همیشه می تواند با توجه به نوع فونت و عرض ستون‌ها تغییر کند. بدین ترتیب که فونت‌هایی با دندانه‌های بلند‌تر و ستون‌هایی با عرض بیشتر به لدینگ بیشتری نیاز دارند. +

۳- همترازی هم یکی از متغییرهای پر بحث در ستون بندی است. اما به طور کوتاه و خلاصه باید گفت که بهتر است در متن فارسی از همترازی یا همان Justification استفاده نکنید. این عمل اگرچه لبه پاراگراف شما را مرتب خواهد کرد اما تنظیمات فاصله حروف را تغییر خواهد داد و در نتیجه باعث کاهش خوانایی خواهد شد.

+
+ +
+
(IRANSansX Thin)
+
ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX UltraLight)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX Light)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX Regular)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX Mediume)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX DemiBold)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX Bold)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX ExtraBold)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX Black)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX ExtraBlack)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX Heavy)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ + +
+
(IRANSansX Thin)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX UltraLight)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX Light)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX Regular)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX Mediume)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX DemiBold)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX Bold)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX ExtraBold)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX Black)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX ExtraBlack)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
(IRANSansX Heavy)
+
+ایران سن سریف IRANSansX سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلم‌های رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل‌ حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.
+ +
+Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
+
+ +
+
+

اعداد و علائم در فونت فارسی

+
+
ظ
+
+

اعداد فارسی: ۱۲۳۴۵۶۷۸۹۰
+ اعداد عربی: ۱۲۳٤٥٦۷۸۹۰
+ اعداد انگلیسی: 1234567890

+

برای تایپ اعداد فارسی در محیط وب از کیبورد استاندارد فارسی استفاده کنید. در ویندوز ۸ و یا بالاتر این کیبورد، با نام Persian(Standard)Keyboard در لیست کیبوردهای ویندوز وجود دارد. همچنین می توانید از این آدرس آن را دانلود و نصب کنید.

+ +

با استفاده از کیبورد استاندارد می‌توانید ممیز فارسی را تایپ کنید.
+ میانبر این علامت کلیدهای Shift+3 است. به این شکل: ۳٫۱۴
+ ممیز فارسی با علامت اسلش تفاوت دارد :۳/۱۴ +

+

با استفاده از کیبورد استاندارد می‌توانید جداکننده هزارگان فارسی را تایپ کنید.
+ میانبر این علامت کلیدهای Shift+2 است. به این شکل: ۹٬۲۱۰٬۰۰۰
+ این علامت با جدا کننده هزارگان انگلیسی تفاوت دارد : ۹,۲۱۰,۰۰۰ +

+
+
+ +
+
+

نسبت‌های طلایی

+
+
+
+ ۳٫۷۷۷ ÷ ۱٫۶۱۸ = ۲٫۳۳۵ +
+ ۶٫۱۱۲ ÷ ۱٫۶۱۸ = ۳٫۷۷۷ +
+ ۹٫۸۸۹ ÷ ۱٫۶۱۸ = ۶٫۱۱۲ +
+ ۱۶ ÷ ۱٫۶۱۸ = ۹٫۸۸۹ +
+....................................... +
+ ۱۶ × ۱٫۶۱۸ = ۲۵٫۸۸۸ +
+ ۲۵٫۸۸۸ × ۱٫۶۱۸ = ۴۱٫۸۸۷ +
+ ۴۱٫۸۸۷ × ۱٫۶۱۸ = ۶۷٫۷۷۳ +
+ ۶۷٫۷۷۳ × ۱٫۶۱۸ = ۱۰۹٫۶۵۶ +
+
+
+

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

+

برای محاسبه این اعداد می توانیم از سری اعداد متناسب (Modular Scale) استفاده کنیم. در حقیقت از تعدادی عدد پشت سر هم که بر اساس مضرب خاصی تشکیل شده اند برای تنظیمات ارتفاع خط، فاصله ها، ابعاد و ... استفاده می کنیم. نسبت (عدد) طلایی همان مضرب اعداد است.

+

به عنوان مثال می خواهیم از سایز 16px فونت ایران‌سنس به عنوان فونت و سایز اصلی متن صفحات استفاده کنیم. عدد فی (phi) یونانی که معادل ۱٫۶۱۸۰۳۳۹۸۸۷ (به اختصار ۱٫۶۱۸) است را به عنوان نسبت طلایی در نظر می گیریم. بنابراین سری اعدادی به شکل روبرو خواهیم داشت:

+ +

+ به کمک این اعداد و استفاده از آن ها در صفحات وب سایت خود می توانیم خوانایی و زیبایی آن را افزایش دهیم. علاوه بر آن، اگر از واحدهای نسبی مانند em استفاده شود، امکانات بیشتری در اختیار طراح و بازدیدکننده خواهد بود. البته سری اعداد بر مبنای نسبت طلایی فقط در تایپوگرافی وب سایت کاربرد ندارد. + این اعداد می تواند ادامه داشته باشد (۱٬۲۱۵٫۹۸۱ ، ۱٬۹۶۷٫۴۵۷ ، ۳٬۱۸۳٫۳۴۵ و ...). +

+ ایران‌سنس +
+
+ + +
+
+
+در این فایل سعی کردیم همراه با یک مطلب آموزشی کوتاه، نحوه استفاده از خانواده فونت ایران‌سنس و پیش نمایشی از قسمت های مختلف آن را مرور کنیم. +
+برای مشاهده راهنمای نحوه قراردادن فونت ها در وب سایت خود، به این آدرس مراجعه کنید. +
+
+
+
+
ء
+
+ +
+ +
+ + \ No newline at end of file diff --git a/Webfonts/fontiran.css b/Webfonts/fontiran.css new file mode 100644 index 0000000..2345a86 --- /dev/null +++ b/Webfonts/fontiran.css @@ -0,0 +1,109 @@ +/** +* +* Name: IRANSansX Fonts +* Version: 3 +* Author: Moslem Ebrahimi (moslemebrahimi.com) +* Created on: Apr 22, 2021 +* Updated on: Jul 12, 2023 +* Website: http://fontiran.com +* Copyright: Commercial/Proprietary Software +-------------------------------------------------------------------------------------- +فونتایران سنس Xا یک نرم افزار مالکیتی محسوب می شود. جهت آگاهی از قوانین استفاده از این فونت ها لطفا به وب سایت (فونت ایران دات کام) مراجعه نمایید +-------------------------------------------------------------------------------------- +IRANSansX fonts are considered a proprietary software. To gain information about the laws regarding the use of these fonts, please visit www.fontiran.com +-------------------------------------------------------------------------------------- +This set of fonts are used in this project under the license: (.....) +------------------------------------------------------------------------------------- fonts/- +* +**/ + + +@font-face { + font-family: IRANSansX; + font-style: normal; + font-weight: 100; + src: url('fonts/woff/IRANSansX-Thin.woff') format('woff'), + url('fonts/woff2/IRANSansX-Thin.woff2') format('woff2'); +} + +@font-face { + font-family: IRANSansX; + font-style: normal; + font-weight: 200; + src: url('fonts/woff/IRANSansX-UltraLight.woff') format('woff'), + url('fonts/woff2/IRANSansX-UltraLight.woff2') format('woff2'); +} + +@font-face { + font-family: IRANSansX; + font-style: normal; + font-weight: 300; + src: url('fonts/woff/IRANSansX-Light.woff') format('woff'), + url('fonts/woff2/IRANSansX-Light.woff2') format('woff2'); +} + +@font-face { + font-family: IRANSansX; + font-style: normal; + font-weight: 500; + src: url('fonts/woff/IRANSansX-Medium.woff') format('woff'), + url('fonts/woff2/IRANSansX-Medium.woff2') format('woff2'); +} + +@font-face { + font-family: IRANSansX; + font-style: normal; + font-weight: 600; + src: url('fonts/woff/IRANSansX-DemiBold.woff') format('woff'), + url('fonts/woff2/IRANSansX-DemiBold.woff2') format('woff2'); +} + +@font-face { + font-family: IRANSansX; + font-style: normal; + font-weight: 800; + src: url('fonts/woff/IRANSansX-ExtraBold.woff') format('woff'), + url('fonts/woff2/IRANSansX-ExtraBold.woff2') format('woff2'); +} + +@font-face { + font-family: IRANSansX; + font-style: normal; + font-weight: 900; + src: url('fonts/woff/IRANSansX-Black.woff') format('woff'), + url('fonts/woff2/IRANSansX-Black.woff2') format('woff2'); +} + +@font-face { + font-family: IRANSansX; + font-style: normal; + font-weight: 950; + src: url('fonts/woff/IRANSansX-ExtraBlack.woff') format('woff'), + url('fonts/woff2/IRANSansX-ExtraBlack.woff2') format('woff2'); +} + +@font-face { + font-family: IRANSansX; + font-style: normal; + font-weight: 1000; + src: url('fonts/woff/IRANSansX-Heavy.woff') format('woff'), + url('fonts/woff2/IRANSansX-Heavy.woff2') format('woff2'); +} + +@font-face { + font-family: IRANSansX; + font-style: normal; + font-weight: bold; + src: url('fonts/woff/IRANSansX-Bold.woff') format('woff'), + url('fonts/woff2/IRANSansX-Bold.woff2') format('woff2'); +} + +@font-face { + font-family: IRANSansX; + font-style: normal; + font-weight: normal; + src: url('fonts/woff/IRANSansX-Regular.woff') format('woff'), + url('fonts/woff2/IRANSansX-Regular.woff2') format('woff2'); +} + + diff --git a/Webfonts/fonts/woff/IRANSansX-Black.woff b/Webfonts/fonts/woff/IRANSansX-Black.woff new file mode 100644 index 0000000..6326fab Binary files /dev/null and b/Webfonts/fonts/woff/IRANSansX-Black.woff differ diff --git a/Webfonts/fonts/woff/IRANSansX-Bold.woff b/Webfonts/fonts/woff/IRANSansX-Bold.woff new file mode 100644 index 0000000..6dacc61 Binary files /dev/null and b/Webfonts/fonts/woff/IRANSansX-Bold.woff differ diff --git a/Webfonts/fonts/woff/IRANSansX-DemiBold.woff b/Webfonts/fonts/woff/IRANSansX-DemiBold.woff new file mode 100644 index 0000000..5c0d100 Binary files /dev/null and b/Webfonts/fonts/woff/IRANSansX-DemiBold.woff differ diff --git a/Webfonts/fonts/woff/IRANSansX-ExtraBlack.woff b/Webfonts/fonts/woff/IRANSansX-ExtraBlack.woff new file mode 100644 index 0000000..b0d258a Binary files /dev/null and b/Webfonts/fonts/woff/IRANSansX-ExtraBlack.woff differ diff --git a/Webfonts/fonts/woff/IRANSansX-ExtraBold.woff b/Webfonts/fonts/woff/IRANSansX-ExtraBold.woff new file mode 100644 index 0000000..814007e Binary files /dev/null and b/Webfonts/fonts/woff/IRANSansX-ExtraBold.woff differ diff --git a/Webfonts/fonts/woff/IRANSansX-Heavy.woff b/Webfonts/fonts/woff/IRANSansX-Heavy.woff new file mode 100644 index 0000000..3c09602 Binary files /dev/null and b/Webfonts/fonts/woff/IRANSansX-Heavy.woff differ diff --git a/Webfonts/fonts/woff/IRANSansX-Light.woff b/Webfonts/fonts/woff/IRANSansX-Light.woff new file mode 100644 index 0000000..f380d77 Binary files /dev/null and b/Webfonts/fonts/woff/IRANSansX-Light.woff differ diff --git a/Webfonts/fonts/woff/IRANSansX-Medium.woff b/Webfonts/fonts/woff/IRANSansX-Medium.woff new file mode 100644 index 0000000..5b1daf1 Binary files /dev/null and b/Webfonts/fonts/woff/IRANSansX-Medium.woff differ diff --git a/Webfonts/fonts/woff/IRANSansX-Regular.woff b/Webfonts/fonts/woff/IRANSansX-Regular.woff new file mode 100644 index 0000000..51780b3 Binary files /dev/null and b/Webfonts/fonts/woff/IRANSansX-Regular.woff differ diff --git a/Webfonts/fonts/woff/IRANSansX-Thin.woff b/Webfonts/fonts/woff/IRANSansX-Thin.woff new file mode 100644 index 0000000..f023820 Binary files /dev/null and b/Webfonts/fonts/woff/IRANSansX-Thin.woff differ diff --git a/Webfonts/fonts/woff/IRANSansX-UltraLight.woff b/Webfonts/fonts/woff/IRANSansX-UltraLight.woff new file mode 100644 index 0000000..915aef4 Binary files /dev/null and b/Webfonts/fonts/woff/IRANSansX-UltraLight.woff differ diff --git a/Webfonts/fonts/woff2/IRANSansX-Black.woff2 b/Webfonts/fonts/woff2/IRANSansX-Black.woff2 new file mode 100644 index 0000000..d305a66 Binary files /dev/null and b/Webfonts/fonts/woff2/IRANSansX-Black.woff2 differ diff --git a/Webfonts/fonts/woff2/IRANSansX-Bold.woff2 b/Webfonts/fonts/woff2/IRANSansX-Bold.woff2 new file mode 100644 index 0000000..4d1fcc3 Binary files /dev/null and b/Webfonts/fonts/woff2/IRANSansX-Bold.woff2 differ diff --git a/Webfonts/fonts/woff2/IRANSansX-DemiBold.woff2 b/Webfonts/fonts/woff2/IRANSansX-DemiBold.woff2 new file mode 100644 index 0000000..b06754c Binary files /dev/null and b/Webfonts/fonts/woff2/IRANSansX-DemiBold.woff2 differ diff --git a/Webfonts/fonts/woff2/IRANSansX-ExtraBlack.woff2 b/Webfonts/fonts/woff2/IRANSansX-ExtraBlack.woff2 new file mode 100644 index 0000000..f551f0d Binary files /dev/null and b/Webfonts/fonts/woff2/IRANSansX-ExtraBlack.woff2 differ diff --git a/Webfonts/fonts/woff2/IRANSansX-ExtraBold.woff2 b/Webfonts/fonts/woff2/IRANSansX-ExtraBold.woff2 new file mode 100644 index 0000000..e5877bf Binary files /dev/null and b/Webfonts/fonts/woff2/IRANSansX-ExtraBold.woff2 differ diff --git a/Webfonts/fonts/woff2/IRANSansX-Heavy.woff2 b/Webfonts/fonts/woff2/IRANSansX-Heavy.woff2 new file mode 100644 index 0000000..ee76a33 Binary files /dev/null and b/Webfonts/fonts/woff2/IRANSansX-Heavy.woff2 differ diff --git a/Webfonts/fonts/woff2/IRANSansX-Light.woff2 b/Webfonts/fonts/woff2/IRANSansX-Light.woff2 new file mode 100644 index 0000000..8a3ca6c Binary files /dev/null and b/Webfonts/fonts/woff2/IRANSansX-Light.woff2 differ diff --git a/Webfonts/fonts/woff2/IRANSansX-Medium.woff2 b/Webfonts/fonts/woff2/IRANSansX-Medium.woff2 new file mode 100644 index 0000000..b574c9b Binary files /dev/null and b/Webfonts/fonts/woff2/IRANSansX-Medium.woff2 differ diff --git a/Webfonts/fonts/woff2/IRANSansX-Regular.woff2 b/Webfonts/fonts/woff2/IRANSansX-Regular.woff2 new file mode 100644 index 0000000..dd8254e Binary files /dev/null and b/Webfonts/fonts/woff2/IRANSansX-Regular.woff2 differ diff --git a/Webfonts/fonts/woff2/IRANSansX-Thin.woff2 b/Webfonts/fonts/woff2/IRANSansX-Thin.woff2 new file mode 100644 index 0000000..83357cb Binary files /dev/null and b/Webfonts/fonts/woff2/IRANSansX-Thin.woff2 differ diff --git a/Webfonts/fonts/woff2/IRANSansX-UltraLight.woff2 b/Webfonts/fonts/woff2/IRANSansX-UltraLight.woff2 new file mode 100644 index 0000000..95dd601 Binary files /dev/null and b/Webfonts/fonts/woff2/IRANSansX-UltraLight.woff2 differ diff --git a/Webfonts/letter-spacing.png b/Webfonts/letter-spacing.png new file mode 100644 index 0000000..49c76e8 Binary files /dev/null and b/Webfonts/letter-spacing.png differ diff --git a/Webfonts/style.css b/Webfonts/style.css new file mode 100644 index 0000000..febd049 --- /dev/null +++ b/Webfonts/style.css @@ -0,0 +1,244 @@ +@import url(fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */ +body { + font-family: IRANSansX !important; + direction: rtl; + background-color: #cdcdcd; + margin: 0; +} +h1, h2, h3, h4, h5, h6,input, textarea { + font-family: IRANSansX !important; +} +h1 { + font-weight: bold; +} +.wrapper { + max-width: 900px; + margin: 0 auto; +} +.ltr { + direction: ltr; +} +.text-right { + text-align: right; +} +.text-center { + text-align: center; +} +.text-left { + text-align: left; +} +.text-small { + font-size: 0.8em; +} +.text-xsmall { + font-size: 0.6em; +} +.text-large { + font-size: 1.2em; +} +.text-xlarge { + font-size: 1.4em; +} +.text-underline { + text-decoration:underline; +} + +.text-thin { + font-weight: 100; +} +.text-UltraLight { + font-weight: 200; +} +.text-light { + font-weight: 300; +} +.text-regular { + font-weight: normal; +} +.text-medium { + font-weight: 500; +} +.text-demibold { + font-weight: 600; +} +.text-bold { + font-weight: bold; +} + +.text-extrabold { + font-weight: 800; +} +.text-black { + font-weight: 900; +} +.text-extrablack { + font-weight: 950; +} +.text-heavy { + font-weight: 1000; +} + +blockquote { + font-weight: 700; + padding: 10px; + border: 1px dashed #666666; +} + +.mainbox { + width: 100%; + background-color: #EFEFEF; + display: table; + margin-bottom: 30px; + border-right: 8px solid #df79ff; +} + +.mainboxnegativ { + width: 100%; + background-color: #000000; + display: table; + margin-bottom: 30px; + border-right: 8px solid #df79ff; + color: #F9F9F9; +} + +.mainbox2 { + font-size: 1em; + width: 90%; + padding-right: 20px; + padding-top: 10px; + padding-bottom: 10px; +} +.mainboxitalic { + font-size: 1em; + font-style: italic; + width: 90%; + padding-right: 20px; + padding-top: 10px; + padding-bottom: 10px; +} + +.mainbox3 { + width: 100%; + background-color: #DFDFDF; + display: table; + margin-bottom: 30px; + border-right: 8px solid #FF5EAA; +} + +.mainbox2negativ { + font-size: 1em; + color: #F9F9F9; + background-color: #000000; + padding-right: 20px; +} + + +.farsiparagraph { + font-size: 1em; + width: 47%; + float:right; + padding-right: 20px; + padding-top: 10px; + padding-bottom: 10px; + +} + +.farsiparagraph_negativ { + font-size: 1em; + color: #F9F9F9; + background-color: #000000; + width: 47%; + float:right; + padding-right: 20px; + padding-top: 10px; + padding-bottom: 10px; + +} + + +.englishparagraph { + font-size: 1em; + width: 47%; + float: left; + direction:ltr; + padding-left: 20px; + padding-top: 10px; + padding-bottom: 10px; + + +} + +.englishparagraph_negativ { + font-size: 1em; + color: #F9F9F9; + background-color: #000000; + width: 47%; + float: left; + direction:ltr; + padding-left: 20px; + padding-top: 10px; + padding-bottom: 10px; + + +} +.rightbox { + width: 60%; + padding-right: 20px; + padding-left: 5px; + float: right; + margin-left: 10px; + margin-bottom: 0px; + min-width: 0px; + background-color: #F7F7F7; + +} + +.titelbox { + width: 60%; + padding-right: 25px; + padding-left: 0px; + float: right; + margin-left: 10px; + margin-bottom: 0px; + min-width: 0px; + background-color: #d5d5d5; + color: #4B4B4B; +} + + +.lefttbox { + + padding-right: 20px; + padding-left: 4px; + float: right; + margin-bottom: 10px; + min-width: 0px; +} + +.alphabet { + width: 35%; + float: left; + font-size: 20em; + text-align: center; + font-weight: 700; + color: #999999; +} + +.alphabet2 { + width: 35%; + float: left; + direction: ltr; + font-size: 1.6em; + text-align: left; + font-weight: 600; + color: #333333; + margin-top: 100px; +} +.footer { + font-weight: 400; + font-size: 0.7em; + text-align: center; + direction: ltr; + margin-bottom: 0px; + padding-bottom: 0px; +} diff --git a/Webfonts/webfont test.html b/Webfonts/webfont test.html new file mode 100644 index 0000000..36a7a6b --- /dev/null +++ b/Webfonts/webfont test.html @@ -0,0 +1,226 @@ + + + + + IRANSansX + + + + + + +

+ Charset + +   + + +

+ +

10 +چو ایران نَباشَد تَنِ مَن مَباد +بِدين بوم و بَر زنده يِک تَن مَباد +

+ +

11 +چو ایران نَباشَد تَنِ مَن مَباد +بِدين بوم و بَر زنده يِک تَن مَباد +

+ +

12 +چو ایران نَباشَد تَنِ مَن مَباد +بِدين بوم و بَر زنده يِک تَن مَباد +

+ +

13 +چو ایران نَباشَد تَنِ مَن مَباد +بِدين بوم و بَر زنده يِک تَن مَباد +

+ +

14 +چو ایران نَباشَد تَنِ مَن مَباد +بِدين بوم و بَر زنده يِک تَن مَباد +

+ +

15 +چو ایران نَباشَد تَنِ مَن مَباد +بِدين بوم و بَر زنده يِک تَن مَباد +

+ +

16 +چو ایران نَباشَد تَنِ مَن مَباد +بِدين بوم و بَر زنده يِک تَن مَباد +

+ +

17 +چو ایران نَباشَد تَنِ مَن مَباد +بِدين بوم و بَر زنده يِک تَن مَباد +

+ +

18 +چو ایران نَباشَد تَنِ مَن مَباد +بِدين بوم و بَر زنده يِک تَن مَباد +

+ +

چو ایران نَباشَد تَنِ مَن مَباد +بِدين بوم و بَر زنده يِک تَن مَباد +

+ +

چو ایران نَباشَد تَنِ مَن مَباد +بِدين بوم و بَر زنده يِک تَن مَباد +

+ + diff --git a/index.html b/index.html index e4b78ea..d1ce199 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,38 @@ Vite + React + TS + + - +
diff --git a/public/images/GAME1.png b/public/images/GAME1.png new file mode 100644 index 0000000..af0e02c Binary files /dev/null and b/public/images/GAME1.png differ diff --git a/public/images/chat.png b/public/images/chat.png new file mode 100644 index 0000000..8d8d3e3 Binary files /dev/null and b/public/images/chat.png differ diff --git a/public/images/coin.png b/public/images/coin.png new file mode 100644 index 0000000..4f504ea Binary files /dev/null and b/public/images/coin.png differ diff --git a/public/images/endExam.jpg b/public/images/endExam.jpg new file mode 100644 index 0000000..6a42450 Binary files /dev/null and b/public/images/endExam.jpg differ diff --git a/public/images/game.png b/public/images/game.png new file mode 100644 index 0000000..7e58bff Binary files /dev/null and b/public/images/game.png differ diff --git a/public/images/personTest.png b/public/images/personTest.png new file mode 100644 index 0000000..64dae19 Binary files /dev/null and b/public/images/personTest.png differ diff --git a/public/images/sword.png b/public/images/sword.png new file mode 100644 index 0000000..d3726b8 Binary files /dev/null and b/public/images/sword.png differ diff --git a/src/App.css b/src/App.css index b9d355d..346c36a 100644 --- a/src/App.css +++ b/src/App.css @@ -39,4 +39,4 @@ .read-the-docs { color: #888; -} +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index e3603ad..9f4c5f7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,11 @@ import "./App.css"; +import Chat from "./components/chat.tsx"; +import Coin from "./components/coin.tsx"; +import Game from "./components/game"; import Neo from "./components/neoTest.tsx"; +import Person from "./components/personTest.tsx"; import StatisticsCard from "./components/StatisticsCard/StatisticsCard.tsx"; +import Sword from "./components/swordGame.tsx"; import TestCard from "./components/TestCard/TestCard.tsx"; @@ -8,12 +13,27 @@ function App() { return ( <>
- - - + +
+ +
+ +
+ +
+ +
+ +
+ +
+
); } export default App; + + + diff --git a/src/components/StatisticsCard/StatisticsCard.tsx b/src/components/StatisticsCard/StatisticsCard.tsx index 2c413d1..97943a2 100644 --- a/src/components/StatisticsCard/StatisticsCard.tsx +++ b/src/components/StatisticsCard/StatisticsCard.tsx @@ -2,15 +2,11 @@ const StatisticsCard = () => { return ( -
-
- -
-
-

زمان تقریبی

-
-
-

20دقیقه

+
+
+ +

زمان تقریبی

+

20 دقیقه

); diff --git a/src/components/TestCard/TestCard.tsx b/src/components/TestCard/TestCard.tsx index 63007ba..a2b226b 100644 --- a/src/components/TestCard/TestCard.tsx +++ b/src/components/TestCard/TestCard.tsx @@ -1,12 +1,11 @@ - const TestCard = () => { return ( -
-
- اوکانر تست +
+
+ اوکانر تست
-

تست استعداد یابی اوکانر

-
+

تست استعداد یابی اوکانر

+

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

گاردنر بسیار تاثیر گذار بودند. تفکر و استراژی جانسون اوکانر به این

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

@@ -16,4 +15,4 @@ const TestCard = () => {
); }; -export default TestCard; +export default TestCard; \ No newline at end of file diff --git a/src/components/chat.tsx b/src/components/chat.tsx new file mode 100644 index 0000000..a53af3f --- /dev/null +++ b/src/components/chat.tsx @@ -0,0 +1,11 @@ +const Chat = () => { + return ( +
+
+ +
+
+ ); +} + +export default Chat; \ No newline at end of file diff --git a/src/components/coin.tsx b/src/components/coin.tsx new file mode 100644 index 0000000..2142eae --- /dev/null +++ b/src/components/coin.tsx @@ -0,0 +1,13 @@ +const Coin = () => { + return ( +
+
+ +

امتیاز

+

409.5

+
+
+ ); +} + +export default Coin; \ No newline at end of file diff --git a/src/components/game.tsx b/src/components/game.tsx new file mode 100644 index 0000000..a8f92e6 --- /dev/null +++ b/src/components/game.tsx @@ -0,0 +1,11 @@ +const Game = () => { + return ( +
+
+

بازی معمایی پر چالشه اگر دوست داری ذهنت به چالش بکشی

+
+
+ ); +} + +export default Game; \ No newline at end of file diff --git a/src/components/neoTest.tsx b/src/components/neoTest.tsx index 1d753af..5a3b6b8 100644 --- a/src/components/neoTest.tsx +++ b/src/components/neoTest.tsx @@ -1,10 +1,10 @@ const Neo = () => { return ( -
+
آزمون نئو
-

سامانه جامه آزمون نئو

+

سامانه جامع آزمون نئو

میتوانید اطلاعات(NEO)در سامانه جامع آزمون نئو

کاملی در مورد ویژگی های شخصیت 5 گانه یعنی

diff --git a/src/components/personTest.tsx b/src/components/personTest.tsx new file mode 100644 index 0000000..ee2a845 --- /dev/null +++ b/src/components/personTest.tsx @@ -0,0 +1,11 @@ +const Person = ()=>{ + return( +
+
+ +

تست های شخصیت شناسی

+
+
+ ); +} +export default Person; \ No newline at end of file diff --git a/src/components/swordGame.tsx b/src/components/swordGame.tsx new file mode 100644 index 0000000..451db22 --- /dev/null +++ b/src/components/swordGame.tsx @@ -0,0 +1,16 @@ +const Sword = () => { + return ( +
+
+

بازی قلمرو ها

+
+ +
+
+

4 ساعت

+
+
+ ); +} + +export default Sword; \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..fe4b191 --- /dev/null +++ b/style.css @@ -0,0 +1,7 @@ +@font-face { + font-family:IRANSansX ; + src: url(Webfonts/fonts/woff/IRANSansX-Light.woff); +} +.body{ + font-family: IRANSansX ; +} \ No newline at end of file