diff --git a/app/app.css b/app/app.css index 9202430..275372a 100644 --- a/app/app.css +++ b/app/app.css @@ -1,7 +1,5 @@ @import "tailwindcss"; - -/* Persian/Farsi font support */ -@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap"); +@import url(/font/fontiran.css); @theme { --font-sans: @@ -49,6 +47,17 @@ body { } } + +body { + font-family: IRANYekanX !important; + direction: rtl; + background-color: #cdcdcd; + margin: 0; +} +h1, h2, h3, h4, h5, h6,input, textarea { + font-family: IRANYekanX !important; +} + /* RTL Support */ html[dir="rtl"] { direction: rtl; @@ -251,7 +260,7 @@ html[dir="rtl"] body { /* Persian/Farsi font class */ .font-persian { - font-family: "Vazirmatn", "Inter", ui-sans-serif, system-ui, sans-serif; + font-family: IRANYekanX; } /* Custom utility classes */ diff --git a/app/components/auth/login-form.tsx b/app/components/auth/login-form.tsx index 718c489..3cc0549 100644 --- a/app/components/auth/login-form.tsx +++ b/app/components/auth/login-form.tsx @@ -179,7 +179,7 @@ export function LoginForm({ onSuccess }: LoginFormProps) {
updateField("rememberMe", checked)} disabled={isLoading} diff --git a/app/components/dashboard/header.tsx b/app/components/dashboard/header.tsx index c6cf7f9..a39310e 100644 --- a/app/components/dashboard/header.tsx +++ b/app/components/dashboard/header.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import { useAuth } from "~/contexts/auth-context"; import { Link } from "react-router"; import { cn } from "~/lib/utils"; @@ -12,6 +12,7 @@ import { Menu, ChevronDown, Server, + ChevronLeft , } from "lucide-react"; import apiService from "~/lib/api"; @@ -20,12 +21,14 @@ interface HeaderProps { onToggleSidebar?: () => void; className?: string; title?: string; + titleIcon?: React.ComponentType<{ className?: string }> | null; } export function Header({ onToggleSidebar, className, title = "صفحه اول", + titleIcon, }: HeaderProps) { const { user } = useAuth(); const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false); @@ -65,7 +68,24 @@ export function Header({ {/* Page Title */}

- {title} + {/* Right-side icon for current page */} + {titleIcon ? ( +
+ {React.createElement(titleIcon, { className: "w-5 h-5 " })} +
+ ) : ( + + )} + {title.includes("-") ? ( + + {title.split("-")[0]} + + {title.split("-")[1]} + +) : ( + title +)} +

@@ -89,9 +109,7 @@ export function Header({ onClick={() => setIsProfileMenuOpen(!isProfileMenuOpen)} className="flex items-center gap-2 text-gray-300" > -
- -
+
{user?.name} {user?.family} @@ -100,7 +118,9 @@ export function Header({ {user?.username}
- +
+ +
{/* Profile Dropdown */} diff --git a/app/components/dashboard/layout.tsx b/app/components/dashboard/layout.tsx index adcbb16..6268188 100644 --- a/app/components/dashboard/layout.tsx +++ b/app/components/dashboard/layout.tsx @@ -19,6 +19,8 @@ export function DashboardLayout({ const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false); const [isStrategicAlignmentPopupOpen, setIsStrategicAlignmentPopupOpen] = useState(false); + const [currentTitle, setCurrentTitle] = useState(title ?? "صفحه اول"); + const [currentTitleIcon, setCurrentTitleIcon] = useState | null | undefined>(undefined); const toggleSidebarCollapse = () => { setIsSidebarCollapsed(!isSidebarCollapsed); @@ -61,6 +63,10 @@ export function DashboardLayout({ onToggleCollapse={toggleSidebarCollapse} className="h-full flex-shrink-0 relative z-10" onStrategicAlignmentClick={() => setIsStrategicAlignmentPopupOpen(true)} + onTitleChange={(info) => { + setCurrentTitle(info.title); + setCurrentTitleIcon(info.icon ?? null); + }} /> @@ -71,7 +77,8 @@ export function DashboardLayout({
{/* Main content */} diff --git a/app/components/dashboard/project-management/green-innovation-page.tsx b/app/components/dashboard/project-management/green-innovation-page.tsx index 3673c21..47beffa 100644 --- a/app/components/dashboard/project-management/green-innovation-page.tsx +++ b/app/components/dashboard/project-management/green-innovation-page.tsx @@ -813,7 +813,7 @@ export function GreenInnovationPage() {
{Object.entries(recycleParams).map((el, index) => { return ( -
+
{el[1].icon} diff --git a/app/components/dashboard/project-management/process-innovation-page.tsx b/app/components/dashboard/project-management/process-innovation-page.tsx index b7a3748..a366fef 100644 --- a/app/components/dashboard/project-management/process-innovation-page.tsx +++ b/app/components/dashboard/project-management/process-innovation-page.tsx @@ -587,10 +587,10 @@ export function ProcessInnovationPage() { return ( -
+
{/* Stats Cards */}
-
+
{/* Stats Grid */}
{loading || statsLoading diff --git a/app/components/dashboard/project-management/product-innovation-page.tsx b/app/components/dashboard/project-management/product-innovation-page.tsx index da18932..6c29c46 100644 --- a/app/components/dashboard/project-management/product-innovation-page.tsx +++ b/app/components/dashboard/project-management/product-innovation-page.tsx @@ -15,12 +15,13 @@ import { UsersIcon, Wrench, } from "lucide-react"; -import moment from "moment-jalaali"; import { useCallback, useEffect, useRef, useState } from "react"; import toast from "react-hot-toast"; import { Badge } from "~/components/ui/badge"; import { Button } from "~/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"; +import { MetricCard } from "~/components/ui/metric-card"; +import { BaseCard } from "~/components/ui/base-card"; import { Checkbox } from "~/components/ui/checkbox"; import { Bar, BarChart, LabelList } from "recharts" import { @@ -54,7 +55,6 @@ import { DashboardLayout } from "../layout"; import { Skeleton } from "~/components/ui/skeleton"; import { Tooltip as TooltipSh, TooltipTrigger, TooltipContent } from "~/components/ui/tooltip"; -moment.loadPersian({ usePersianDigits: true }); interface ProjectData { project_no: string; @@ -608,25 +608,25 @@ export function ProductInnovationPage() { size="sm" onClick={() => { handleProjectDetails(item)}} - className="text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 p-2 h-auto" + className="text-emerald-400 underline underline-offset-4 font-ligth text-base hover:bg-emerald-500/20 p-2 h-auto" > جزئیات بیشتر ); case "project_no": return ( - + {String(value)} ); case "title": - return {String(value)}; + return {String(value)}; case "project_status": return ( -
+
{formatNumber(String(value))} ); default: - return {String(value) || "-"}; + return {String(value) || "-"}; } }; @@ -670,87 +670,86 @@ export function ProductInnovationPage() {
{/* Stats Grid */}
- {loading || statsLoading - ? // Loading skeleton for stats cards - matching new design - Array.from({ length: 3 }).map((_, index) => ( - - -
-
-
-
-
+ {loading || statsLoading ? ( + // Loading skeleton for stats cards - matching new design + Array.from({ length: 3 }).map((_, index) => ( + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + )) + ) : ( + <> + {/* First card (Metric/Matrix style) - span two columns */} +
+
-
-
-
-
-
+ + {/* Second card */} +
+ +
+
+
+

{stateCard.newProductExports.value}

+
{stateCard.newProductExports.description}
+
+
+
+
- - - )) - : Object.entries(stateCard).map(([key, card], index) => ( - - -
-
-

- {card.title} -

-
+ + {/* Third card - basic BaseCard */} +
+ +
+
+
+

{stateCard.impactOnImports.value}

+
{stateCard.impactOnImports.description}
+
+
+
+
-
-
-

- {card.value} - -

-

- {card.description} -

-
- {card?.percent && /} - {card?.percent &&
-

- {card?.percent} - -

-

- {card.descriptionPercent} -

-
} -
- - - ))} + + )}
{/* Funnel Chart */} - + ( {column.sortable ? ( @@ -891,10 +890,10 @@ export function ProductInnovationPage() { {/* Footer */} -
+
-
+
کل پروژه ها :{formatNumber(stats?.count_innovation_construction_inside_projects)}
@@ -907,8 +906,8 @@ export function ProductInnovationPage() {
-
میانگین :‌
-
+
میانگین :‌
+
{formatNumber( ((stats.average_project_score ?? 0) as number).toFixed?.(1) ?? 0 )} @@ -924,7 +923,7 @@ export function ProductInnovationPage() { - + شرح پروژه @@ -934,17 +933,17 @@ export function ProductInnovationPage() {
{/* Stats Cards */}
-

{selectedProjectDetails?.title}

+

{selectedProjectDetails?.title}

{selectedProjectDetails?.project_description}

{/* Technical Knowledge */}
-

دانش فنی محصول جدید

+

دانش فنی محصول جدید

- توسعه درونزا + توسعه درونزا
- همکاری فناورانه + همکاری فناورانه
- سایر + سایر -

+

استانداردهای ملی و بین‌المللی اخذ شده

@@ -985,7 +984,7 @@ export function ProductInnovationPage() { ).map((standard, index) => (
- {standard} + {standard}
))}
@@ -997,21 +996,21 @@ export function ProductInnovationPage() {
{/* Knowledge-based Certificate Button */} -
+
{selectedProjectDetails?.knowledge_based_certificate_obtained === "خیر" ? ( -
-
) : ( - + @@ -1070,237 +1069,89 @@ export function ProductInnovationPage() {
) : (
- {/* Project Description */} -
- - -
-
-

- میزان صادارت محصول جدید -

- -
- -
-

- {formatNumber(Math.round(popupStats?.new_products_export > 0 ? popupStats?.new_products_export : 0)) || formatNumber(0)} -

-

- میلیون ریال -

-
- / -
-

- {formatNumber(Math.round(popupStats?.new_products_export_percent > 0 ? popupStats?.new_products_export_percent : 0)) || formatNumber(0)}% -

-

- درصد به کل صادرات -

-
-
- - + {/* Project Description - two MetricCards side by side */} +
+ 0 ? popupStats?.new_products_export : 0)} + percentValue={Math.round(popupStats?.new_products_export_percent > 0 ? popupStats?.new_products_export_percent : 0)} + valueLabel="میلیون ریال" + percentLabel="درصد به کل صادرات" + /> - - -
-
-

- تاثیر در واردات -

- -
- -
-

- {formatNumber(Math.round(popupStats?.import_impact > 0 ? popupStats?.import_impact : 0)) || formatNumber(0)} -

-

- میلیون ریال -

-
- / -
-

- {formatNumber(Math.round(popupStats?.import_impact_percent > 0 ? popupStats?.import_impact_percent : 0)) || formatNumber(0)}% -

-

- درصد صرفه جویی -

-
-
- - + 0 ? popupStats?.import_impact : 0)} + percentValue={Math.round(popupStats?.import_impact_percent > 0 ? popupStats?.import_impact_percent : 0)} + valueLabel="میلیون ریال" + percentLabel="درصد صرفه جویی" + /> +
- - -
- - {/* Export Revenue Bar Chart */} -
-

ظرفیت صادر شده

-
- {popupLoading ? ( -
-
در حال بارگذاری...
-
- ) : exportChartData.length > 0 ? ( - - - - `${value.split(" ")[0]} ${formatNumber(value.split(" ")[1]).replaceAll('٬','')}`} - /> - `${formatNumber(value)} میلیون`}/> - - `${formatNumber(value)}`} - position="top" - offset={15} - fill="F9FAFB" - className="fill-foreground" - fontSize={16} + {/* Export Revenue Bar Chart */} +
+

ظرفیت صادر شده

+
+ {exportChartData.length > 0 ? ( + + + + `${value.split(" ")[0]} ${formatNumber(value.split(" ")[1]).replaceAll('٬','')}`} + fontSize={11} /> - - - - - ) : ( -
- داده‌ای برای نمایش وجود ندارد -
- )} -
-
+ `${formatNumber(value)} میلیون`} /> + + `${formatNumber(value)}`} position="top" offset={15} fill="F9FAFB" className="fill-foreground" fontSize={16} /> + + + + ) : ( +
داده‌ای برای نمایش وجود ندارد
+ )} +
+
- {/* Export Revenue Line Chart */} -
-

ظرفیت صادر شده

-
- {popupLoading ? ( -
-
در حال بارگذاری...
-
- ) : allExportData.length > 0 ? ( - - - - ( - - - {payload.value} - - - )} - /> - `${formatNumber(value)} میلیون`} // 👈 اضافه کردن M کنار اعداد - /> - - `${formatNumber(value)} میلیون`} - contentStyle={{ - backgroundColor: "#1F2937", - border: "1px solid #374151", - borderRadius: "6px", - padding: "6px 10px", - fontSize: "11px", - color: "#F9FAFB", - }} - /> - - - {[...new Set(allExportData.map((item) => item.product_title))] - .slice(0, 5) - .map((product, index) => { - const colors = ["#10B981", "#EF4444", "#3B82F6", "#F59E0B", "#8B5CF6"]; - return ( - - ); - })} - - - - ) : ( -
- داده‌ای برای نمایش وجود ندارد -
- )} + {/* Export Revenue Line Chart */} +
+

ظرفیت صادر شده

+
+ {allExportData.length > 0 ? ( + + + + ( + + {(payload as any).value} + + )} /> + `${formatNumber(value)} میلیون`} /> + `${formatNumber(value)} میلیون`} contentStyle={{ backgroundColor: "#1F2937", border: "1px solid #374151", borderRadius: "6px", padding: "6px 10px", fontSize: "11px", color: "#F9FAFB" }} /> + + {[...new Set(allExportData.map((item) => item.product_title))].slice(0, 5).map((product, index) => { + const colors = ["#10B981", "#EF4444", "#3B82F6", "#F59E0B", "#8B5CF6"]; + return ; + })} + + + ) : ( +
داده‌ای برای نمایش وجود ندارد
+ )} +
-
- )} + )}
diff --git a/app/components/dashboard/sidebar.tsx b/app/components/dashboard/sidebar.tsx index 75fc0ac..ab0f8c1 100644 --- a/app/components/dashboard/sidebar.tsx +++ b/app/components/dashboard/sidebar.tsx @@ -15,18 +15,28 @@ import { Settings, Star, Workflow, - DiscAlbum + DiscAlbum, + House, + ListTodo, + LightbulbIcon, + Radar } from "lucide-react"; import React, { useState } from "react"; import { Link, useLocation } from "react-router"; import { useAuth } from "~/contexts/auth-context"; import { cn } from "~/lib/utils"; +interface TitleInfo { + title: string; + icon?: React.ComponentType<{ className?: string }> | null; +} + interface SidebarProps { isCollapsed?: boolean; onToggleCollapse?: () => void; className?: string; onStrategicAlignmentClick?: () => void; + onTitleChange?: (info: TitleInfo) => void; } interface MenuItem { @@ -43,48 +53,48 @@ const menuItems: MenuItem[] = [ { id: "dashboard", label: "صفحه اصلی", - icon: LayoutDashboard, + icon: House, href: "/dashboard", }, { id: "project-management", label: "مدیریت اجرای پروژه‌ها", - icon: FolderKanban, + icon: ListTodo, href: "/dashboard/project-management", }, { id: "innovation-basket", label: "سبد فناوری و نوآوری", - icon: Box, + icon: LightbulbIcon, children: [ { id: "product-innovation", label: "نوآوری در محصول", - icon: Package, + icon: null, href: "/dashboard/innovation-basket/product-innovation", }, { id: "process-innovation", label: "نوآوری در فرآیند", - icon: Workflow, + icon: null, href: "/dashboard/innovation-basket/process-innovation", }, { id: "digital-innovation", label: "نوآوری دیجیتال", - icon: MonitorSmartphone, + icon: null, href: "/dashboard/innovation-basket/digital-innovation", }, { id: "green-innovation", label: "نوآوری سبز", - icon: Leaf, + icon: null, href: "/dashboard/innovation-basket/green-innovation", }, { id: "internal-innovation", label: "نوآوری ساخت داخل", - icon: Building2, + icon: null, href: "/dashboard/innovation-basket/internal-innovation", }, ], @@ -92,13 +102,13 @@ const menuItems: MenuItem[] = [ { id: "ecosystem", label: "زیست بوم فناوری و نوآوری", - icon: Globe, + icon: Radar, href: "/dashboard/ecosystem", }, { id: "ideas", label: "ایده‌های فناوری و نوآوری", - icon: Lightbulb, + icon: House, href: "/dashboard/manage-ideas-tech", }, { @@ -136,6 +146,7 @@ export function Sidebar({ onToggleCollapse, className, onStrategicAlignmentClick, + onTitleChange, }: SidebarProps) { const location = useLocation(); const [expandedItems, setExpandedItems] = useState([]); @@ -158,6 +169,29 @@ export function Sidebar({ }); setExpandedItems(newExpandedItems); + // Update header title based on current route + // If a child route is active, use that child's label prefixed by parent label + let activeTitle: string | undefined = undefined; + let activeIcon: React.ComponentType<{ className?: string }> | null | undefined = undefined; + menuItems.forEach((item) => { + if (item.children) { + const activeChild = item.children.find( + (child) => child.href && location.pathname === child.href + ); + if (activeChild) { + activeTitle = `${item.label}-${activeChild.label}`; + // prefer child icon for the page; fallback to parent + activeIcon = activeChild.icon ?? item.icon ?? null; + } + } + if (!activeTitle && item.href && location.pathname === item.href) { + activeTitle = item.label; + activeIcon = item.icon ?? null; + } + }); + if (onTitleChange) { + onTitleChange({ title: activeTitle ?? "صفحه اول", icon: activeIcon ?? null }); + } }; autoExpandParents(); @@ -207,8 +241,13 @@ export function Sidebar({ const ItemIcon = item.icon; const handleClick = () => { + // Only update header title for navigable items (those with href) + if (item.href && item.href !== "#") { + const icon = item.icon ?? null; + onTitleChange?.({ title: item.label, icon }); + } + if (item.id === "strategic-alignment") { - console.log("test") onStrategicAlignmentClick?.(); } else if (item.id === "logout") { logout(); @@ -222,7 +261,7 @@ export function Sidebar({
- )} + )} */}
); } diff --git a/app/components/ui/funnel-chart.tsx b/app/components/ui/funnel-chart.tsx index 87e4e83..2327755 100644 --- a/app/components/ui/funnel-chart.tsx +++ b/app/components/ui/funnel-chart.tsx @@ -24,18 +24,18 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) { return (
{title && ( -

+

{title}

)} -
+
{/* Start Process Line */} -
-
ابتدا فرآیند
+
+
ابتدا فرآیند
-
۱۰۰%
+
۱۰۰%
@@ -50,7 +50,7 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) { return (
-
+
{item.label}
@@ -60,7 +60,7 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) { className="bg-[#3BC47A] h-8 rounded-2xl flex items-center justify-center text-lg relative" style={{ width: `${barWidth}%` }} > - + {item.value.toLocaleString('fa-IR')}
@@ -73,15 +73,15 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
{/* End Process Line */} -
-
انتها فرآیند
+
+
انتها فرآیند
{(() => { const lastValue = data[data.length - 1]?.value ?? 0; const percent = toPercent(lastValue); return (
-
{formatNumber(percent)}%
+
{formatNumber(percent)}%
diff --git a/public/font/Fa Numral Help.html b/public/font/Fa Numral Help.html new file mode 100644 index 0000000..878dd26 --- /dev/null +++ b/public/font/Fa Numral Help.html @@ -0,0 +1,536 @@ + + + + + IranSansX OpenType features in CSS + + + + + + + + + + +
+ +

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

+ +

Stylistic alternates (ss02)

+

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

+ 

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

+۱۲۳۴۵۶۷۸۹ +
+123456789 +

+
+ + +
+

+

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

+ +

Stylistic alternates (ss03)

+

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

+ 

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

+ ۱۲۳۴۵۶۷۸۹ +
+ 123456789 +

+
+
+ + +
+
+

حروف جایگزین

+ +

Stylistic alternates (ss04)

+

با فعال کردن استایلستیک سری ss04 می‌توانید بعضی حروف را به حالت دوم تغییر دهید.

+ 

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

+ + کهنه‌گی +

+

+ کهنه‌گی +

+
+
+ + + + + +
+ +
+ + To use this font, it is necessary to obtain the license from www.fontiran.com +
+ + + + diff --git a/public/font/IranYekanX.html b/public/font/IranYekanX.html new file mode 100644 index 0000000..99e89eb --- /dev/null +++ b/public/font/IranYekanX.html @@ -0,0 +1,426 @@ + + + + +IRANYekanX Family Type face: خانواده فونت ایران‌سنس + + + + + + + + +
+ +
+
+

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

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

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

+
+ +
ج
+
+

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

+

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

+

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

+
+ + +
+ +
+
+

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

+
+
ن
+
+

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

+

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

+
+
+ + +
+
+
من نه آنم که زبونی کشم از چرخ فلک (Thin)
+
من نه آنم که زبونی کشم از چرخ فلک (UltraLight)
+
من نه آنم که زبونی کشم از چرخ فلک (Light)
+
من نه آنم که زبونی کشم از چرخ فلک (Regular)
+
من نه آنم که زبونی کشم از چرخ فلک (Medium)
+
من نه آنم که زبونی کشم از چرخ فلک (demiBold)
+
من نه آنم که زبونی کشم از چرخ فلک (Bold)
+
من نه آنم که زبونی کشم از چرخ فلک (ExtraBold)
+
من نه آنم که زبونی کشم از چرخ فلک (Black)
+
من نه آنم که زبونی کشم از چرخ فلک (ExtraBlack)
+
من نه آنم که زبونی کشم از چرخ فلک (Heavy)
+
+
+ +
+
+ +
من نه آنم که زبونی کشم از چرخ فلک (Thin)
+
من نه آنم که زبونی کشم از چرخ فلک (UltraLight)
+
من نه آنم که زبونی کشم از چرخ فلک (Light)
+
من نه آنم که زبونی کشم از چرخ فلک (Regular)
+
من نه آنم که زبونی کشم از چرخ فلک (Medium)
+
من نه آنم که زبونی کشم از چرخ فلک (demiBold)
+
من نه آنم که زبونی کشم از چرخ فلک (Bold)
+
من نه آنم که زبونی کشم از چرخ فلک (ExtraBold)
+
من نه آنم که زبونی کشم از چرخ فلک (Black)
+
من نه آنم که زبونی کشم از چرخ فلک (ExtraBlack)
+
من نه آنم که زبونی کشم از چرخ فلک (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 استفاده نکنید. این عمل اگرچه لبه پاراگراف شما را مرتب خواهد کرد اما تنظیمات فاصله حروف را تغییر خواهد داد و در نتیجه باعث کاهش خوانایی خواهد شد.

+
+ +
+
(IRANYekanX Thin)
+
ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX UltraLight)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX Light)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX Regular)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX Mediume)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX DemiBold)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX Bold)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX ExtraBold)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX Black)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ + +
+
(IRANYekanX ExtraBlack)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX Heavy)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ + + + +
+
(IRANYekanX Thin)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX UltraLight)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX Light)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX Regular)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX Mediume)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX DemiBold)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX Bold)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX ExtraBold)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX Black)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX ExtraBlack)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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.
+
+ +
+
(IRANYekanX Heavy)
+
+ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا 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 استفاده شود، امکانات بیشتری در اختیار طراح و بازدیدکننده خواهد بود. البته سری اعداد بر مبنای نسبت طلایی فقط در تایپوگرافی وب سایت کاربرد ندارد. + این اعداد می تواند ادامه داشته باشد (۱٬۲۱۵٫۹۸۱ ، ۱٬۹۶۷٫۴۵۷ ، ۳٬۱۸۳٫۳۴۵ و ...). +

+ +
+
+ + +
+
+
+در این فایل سعی کردیم همراه با یک مطلب آموزشی کوتاه، نحوه استفاده از خانواده فونت ایران‌سنس و پیش نمایشی از قسمت های مختلف آن را مرور کنیم. +
+برای مشاهده راهنمای نحوه قراردادن فونت ها در وب سایت خود، به این آدرس مراجعه کنید. +
+
+
+
+
+
+
ء
+
+ +
+
+ Copyright (c) 2021 by www.fontiran.com (Moslem Ebrahimi). All rights reserved. +
+ To use this font, it is necessary to obtain the license from www.fontiran.com + +
+
+ + \ No newline at end of file diff --git a/public/font/fontiran.css b/public/font/fontiran.css new file mode 100644 index 0000000..3aca736 --- /dev/null +++ b/public/font/fontiran.css @@ -0,0 +1,108 @@ +/** +* +* Name: IRANYekanX Fonts +* Version: 2.4 +* Author: Moslem Ebrahimi (moslemebrahimi.com) +* Created on: Aug 02, 2022 +* Updated on: Aug 02, 2022 +* Website: http://fontiran.com +* Copyright: Commercial/Proprietary Software +-------------------------------------------------------------------------------------- +فونت ایران یکان X یک نرم افزار مالکیتی محسوب می شود. جهت آگاهی از قوانین استفاده از این فونت ها لطفا به وب سایت (فونت ایران دات کام) مراجعه نمایید +-------------------------------------------------------------------------------------- +IRANYekanX 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: IRANYekanX; + font-style: normal; + font-weight: 100; + src: url('woff/IRANYekanX-Thin.woff') format('woff'), + url('woff2/IRANYekanX-Thin.woff2') format('woff2'); +} + +@font-face { + font-family: IRANYekanX; + font-style: normal; + font-weight: 200; + src: url('woff/IRANYekanX-UltraLight.woff') format('woff'), + url('woff2/IRANYekanX-UltraLight.woff2') format('woff2'); +} + +@font-face { + font-family: IRANYekanX; + font-style: normal; + font-weight: 300; + src: url('woff/IRANYekanX-Light.woff') format('woff'), + url('woff2/IRANYekanX-Light.woff2') format('woff2'); +} + +@font-face { + font-family: IRANYekanX; + font-style: normal; + font-weight: 500; + src: url('woff/IRANYekanX-Medium.woff') format('woff'), + url('woff2/IRANYekanX-Medium.woff2') format('woff2'); +} + +@font-face { + font-family: IRANYekanX; + font-style: normal; + font-weight: 600; + src: url('woff/IRANYekanX-DemiBold.woff') format('woff'), + url('woff2/IRANYekanX-DemiBold.woff2') format('woff2'); +} + +@font-face { + font-family: IRANYekanX; + font-style: normal; + font-weight: 800; + src: url('woff/IRANYekanX-ExtraBold.woff') format('woff'), + url('woff2/IRANYekanX-ExtraBold.woff2') format('woff2'); +} + +@font-face { + font-family: IRANYekanX; + font-style: normal; + font-weight: 900; + src: url('woff/IRANYekanX-Black.woff') format('woff'), + url('woff2/IRANYekanX-Black.woff2') format('woff2'); +} +@font-face { + font-family: IRANYekanX; + font-style: normal; + font-weight: 950; + src: url('woff/IRANYekanX-ExtraBlack.woff') format('woff'), + url('woff2/IRANYekanX-ExtraBlack.woff2') format('woff2'); +} + +@font-face { + font-family: IRANYekanX; + font-style: normal; + font-weight: 1000; + src: url('woff/IRANYekanX-Heavy.woff') format('woff'), + url('woff2/IRANYekanX-Heavy.woff2') format('woff2'); +} + +@font-face { + font-family: IRANYekanX; + font-style: normal; + font-weight: bold; + src: url('woff/IRANYekanX-Bold.woff') format('woff'), + url('woff2/IRANYekanX-Bold.woff2') format('woff2'); +} + +@font-face { + font-family: IRANYekanX; + font-style: normal; + font-weight: normal; + src: url('woff/IRANYekanX-Regular.woff') format('woff'), + url('woff2/IRANYekanX-Regular.woff2') format('woff2'); +} + + diff --git a/public/font/fonttest.html b/public/font/fonttest.html new file mode 100644 index 0000000..0503f3f --- /dev/null +++ b/public/font/fonttest.html @@ -0,0 +1,463 @@ + + + + + IRANYekanX + + + +
+
+
+ +
+ +
+
+

+ Charset + Lat1 +   + woff + woff2 +   + 🔲 +

+

font-feature-settings: "kern" on, "liga" on, "calt" on;

+
+
+
+

08 

+

09 

+

10 

+

11 

+

12 

+

13 

+

14 

+

15 

+

16 

+

+

+
+
+ + +

+ Ctrl-R: Reset Charset. Ctrl-L: Latin1. Ctrl-J: LTR/RTL. Ctrl-comma/period: step through fonts. Pull mouse across this note to make it disappear. +

+ + + diff --git a/public/font/letter-spacing-1.psd b/public/font/letter-spacing-1.psd new file mode 100644 index 0000000..9a3d62e Binary files /dev/null and b/public/font/letter-spacing-1.psd differ diff --git a/public/font/style.css b/public/font/style.css new file mode 100644 index 0000000..640e2cc --- /dev/null +++ b/public/font/style.css @@ -0,0 +1,243 @@ +@import url(fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */ +body { + font-family: IRANYekanX !important; + direction: rtl; + background-color: #cdcdcd; + margin: 0; +} +h1, h2, h3, h4, h5, h6,input, textarea { + font-family: IRANYekanX !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 #00adb5; +} + +.mainboxnegativ { + width: 100%; + background-color: #303841; + display: table; + margin-bottom: 30px; + border-right: 8px solid #00adb5; + 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/public/font/woff/IRANYekanX-Black.woff b/public/font/woff/IRANYekanX-Black.woff new file mode 100644 index 0000000..595fa18 Binary files /dev/null and b/public/font/woff/IRANYekanX-Black.woff differ diff --git a/public/font/woff/IRANYekanX-Bold.woff b/public/font/woff/IRANYekanX-Bold.woff new file mode 100644 index 0000000..c5f285f Binary files /dev/null and b/public/font/woff/IRANYekanX-Bold.woff differ diff --git a/public/font/woff/IRANYekanX-DemiBold.woff b/public/font/woff/IRANYekanX-DemiBold.woff new file mode 100644 index 0000000..9af6375 Binary files /dev/null and b/public/font/woff/IRANYekanX-DemiBold.woff differ diff --git a/public/font/woff/IRANYekanX-ExtraBlack.woff b/public/font/woff/IRANYekanX-ExtraBlack.woff new file mode 100644 index 0000000..99cc655 Binary files /dev/null and b/public/font/woff/IRANYekanX-ExtraBlack.woff differ diff --git a/public/font/woff/IRANYekanX-ExtraBold.woff b/public/font/woff/IRANYekanX-ExtraBold.woff new file mode 100644 index 0000000..6087a52 Binary files /dev/null and b/public/font/woff/IRANYekanX-ExtraBold.woff differ diff --git a/public/font/woff/IRANYekanX-Heavy.woff b/public/font/woff/IRANYekanX-Heavy.woff new file mode 100644 index 0000000..bdc053e Binary files /dev/null and b/public/font/woff/IRANYekanX-Heavy.woff differ diff --git a/public/font/woff/IRANYekanX-Light.woff b/public/font/woff/IRANYekanX-Light.woff new file mode 100644 index 0000000..0477cd5 Binary files /dev/null and b/public/font/woff/IRANYekanX-Light.woff differ diff --git a/public/font/woff/IRANYekanX-Medium.woff b/public/font/woff/IRANYekanX-Medium.woff new file mode 100644 index 0000000..f8013a3 Binary files /dev/null and b/public/font/woff/IRANYekanX-Medium.woff differ diff --git a/public/font/woff/IRANYekanX-Regular.woff b/public/font/woff/IRANYekanX-Regular.woff new file mode 100644 index 0000000..e3d9200 Binary files /dev/null and b/public/font/woff/IRANYekanX-Regular.woff differ diff --git a/public/font/woff/IRANYekanX-Thin.woff b/public/font/woff/IRANYekanX-Thin.woff new file mode 100644 index 0000000..6041db1 Binary files /dev/null and b/public/font/woff/IRANYekanX-Thin.woff differ diff --git a/public/font/woff/IRANYekanX-UltraLight.woff b/public/font/woff/IRANYekanX-UltraLight.woff new file mode 100644 index 0000000..c043340 Binary files /dev/null and b/public/font/woff/IRANYekanX-UltraLight.woff differ diff --git a/public/font/woff2/IRANYekanX-Black.woff2 b/public/font/woff2/IRANYekanX-Black.woff2 new file mode 100644 index 0000000..e67c520 Binary files /dev/null and b/public/font/woff2/IRANYekanX-Black.woff2 differ diff --git a/public/font/woff2/IRANYekanX-Bold.woff2 b/public/font/woff2/IRANYekanX-Bold.woff2 new file mode 100644 index 0000000..dd3fc16 Binary files /dev/null and b/public/font/woff2/IRANYekanX-Bold.woff2 differ diff --git a/public/font/woff2/IRANYekanX-DemiBold.woff2 b/public/font/woff2/IRANYekanX-DemiBold.woff2 new file mode 100644 index 0000000..f1f6750 Binary files /dev/null and b/public/font/woff2/IRANYekanX-DemiBold.woff2 differ diff --git a/public/font/woff2/IRANYekanX-ExtraBlack.woff2 b/public/font/woff2/IRANYekanX-ExtraBlack.woff2 new file mode 100644 index 0000000..03a0682 Binary files /dev/null and b/public/font/woff2/IRANYekanX-ExtraBlack.woff2 differ diff --git a/public/font/woff2/IRANYekanX-ExtraBold.woff2 b/public/font/woff2/IRANYekanX-ExtraBold.woff2 new file mode 100644 index 0000000..c041d78 Binary files /dev/null and b/public/font/woff2/IRANYekanX-ExtraBold.woff2 differ diff --git a/public/font/woff2/IRANYekanX-Heavy.woff2 b/public/font/woff2/IRANYekanX-Heavy.woff2 new file mode 100644 index 0000000..ea16307 Binary files /dev/null and b/public/font/woff2/IRANYekanX-Heavy.woff2 differ diff --git a/public/font/woff2/IRANYekanX-Light.woff2 b/public/font/woff2/IRANYekanX-Light.woff2 new file mode 100644 index 0000000..8d9534c Binary files /dev/null and b/public/font/woff2/IRANYekanX-Light.woff2 differ diff --git a/public/font/woff2/IRANYekanX-Medium.woff2 b/public/font/woff2/IRANYekanX-Medium.woff2 new file mode 100644 index 0000000..cdb4ce0 Binary files /dev/null and b/public/font/woff2/IRANYekanX-Medium.woff2 differ diff --git a/public/font/woff2/IRANYekanX-Regular.woff2 b/public/font/woff2/IRANYekanX-Regular.woff2 new file mode 100644 index 0000000..89ae517 Binary files /dev/null and b/public/font/woff2/IRANYekanX-Regular.woff2 differ diff --git a/public/font/woff2/IRANYekanX-Thin.woff2 b/public/font/woff2/IRANYekanX-Thin.woff2 new file mode 100644 index 0000000..c5a9409 Binary files /dev/null and b/public/font/woff2/IRANYekanX-Thin.woff2 differ diff --git a/public/font/woff2/IRANYekanX-UltraLight.woff2 b/public/font/woff2/IRANYekanX-UltraLight.woff2 new file mode 100644 index 0000000..cb42c16 Binary files /dev/null and b/public/font/woff2/IRANYekanX-UltraLight.woff2 differ diff --git a/react-router.config.ts b/react-router.config.ts index 6ff16f9..3afb75a 100644 --- a/react-router.config.ts +++ b/react-router.config.ts @@ -1,7 +1,5 @@ import type { Config } from "@react-router/dev/config"; export default { - // Config options... - // Server-side render by default, to enable SPA mode set this to `false` - ssr: true, + ssr: false, } satisfies Config;