petboom-fixresponse+svg
This commit is contained in:
579
webfonts/DANA.html
Normal file
579
webfonts/DANA.html
Normal file
@@ -0,0 +1,579 @@
|
||||
<!doctype html>
|
||||
<html lang="fa">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>DANA Family Type face: خانواده فونت دانا</title>
|
||||
|
||||
<meta name="fontiran.com:license" content="کد 6 رقمی لایسنس">
|
||||
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
|
||||
<body dir="rtl">
|
||||
<div class="wrapper">
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="titelbox">
|
||||
<h1>بِسْمِ اللهِ الرَّحْمَنِ الرَّحِيمِ</h1>
|
||||
</div>
|
||||
<div class="alphabet" style="line-height:155px" > ت </div>
|
||||
<div class="rightbox">
|
||||
<br>
|
||||
<span class="text-xlarge">ن وَالْقَلَمِ وَ مَا يَسْطُرُون</span>
|
||||
<br>
|
||||
<span class="text-xlarge"> نون؛ سوگند به قلم و آنچه می نويسند. </span>
|
||||
<br>
|
||||
<span class="text-large"> Noon. I swear by the pen and what the angels write </span>
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
|
||||
<div class="titelbox" style="letter-spacing: 0px">
|
||||
<h1>نکاتی درباره تایپوگرافی وب</h1>
|
||||
</div>
|
||||
|
||||
<div class="alphabet" style="line-height:200px" > ج </div>
|
||||
<div class="rightbox">
|
||||
<p>از زمان پیدایش نخستین وب سایت، متن ها یکی از اجزای مهم صفحات وب بودند. هر چند به مرور زمان با ورود تصاویر، صوت و فیلم کمی از بار مسئولیت متون کم شد اما هنوز جایگاه خود را از دست نداده اند و بخش مهمی از کار را به عهده دارند.</p>
|
||||
<p>بسیاری از طراحان وب سایت به صورت تجربی بهترین ترکیب و ظاهر را برای نمایش متن ها انتخاب می کنند. اما اصولی وجود دارد که با رعایت آن ها، تاثیرپذیری و زیبایی سایت چند برابر خواهد شد.</p>
|
||||
<p>در ادامه مطلب قصد داریم تعدادی از اصول مقدماتی تایپوگرافی را به اختصار مرور کنیم. هرچند بسیاری از دوستان با این نکات آشنا هستند؛ اما شاید مرور آن ها خالی از لطف نباشد.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="titelbox" style="letter-spacing: 0px">
|
||||
<h1>تاثیر اندازه فونت و سلسله مراتب تگها</h1>
|
||||
</div>
|
||||
<div class="alphabet" style="line-height:140px"> ن </div>
|
||||
<div class="rightbox">
|
||||
<p>فونت های داخل سایت باید به گونه ای قرار گیرند که کاربر به راحتی بتواند آن ها را بخواند. نوع فونت، وزن و کوچک (یا بزرگ) بودن اندازه آن ممکن است تمایل کاربر برای بازگشت به وب سایت را کاهش دهد. قواعد و قوانین زیادی برای انتخاب بهترین فونت وجود دارد.</p>
|
||||
<p>در زیر می توانید ۱۲ وزن مختلف <strong>خانواده فونت دانا</strong> را در شرایط یکسان مشاهده کنید. لازم به ذکر است برای این صفحه از وزن معمولی (Normal) استفاده شده است.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2">
|
||||
<div class="text-hireline" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Hireline)</div>
|
||||
<div class="text-thin" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Thin)</div>
|
||||
<div class="text-uktralight" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (uktralight)</div>
|
||||
<div class="text-light" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Light)</div>
|
||||
<div class="text-regular" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Regular)</div>
|
||||
<div class="text-medium" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Medium)</div>
|
||||
<div class="text-demibold" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (demiBold)</div>
|
||||
<div class="text-bold" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Bold)</div>
|
||||
<div class="text-extrabold" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (ExtraBold)</div>
|
||||
<div class="text-black" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Black)</div>
|
||||
<div class="text-extrablack" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (ExBlack)</div>
|
||||
<div class="text-heavy" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Heavy)</div>
|
||||
<div class="text-fat" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Fat)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2">
|
||||
|
||||
<div class="text-thin" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Thin)</div>
|
||||
<div class="text-uktralight" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (uktralight)</div>
|
||||
<div class="text-light" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Light)</div>
|
||||
<div class="text-regular" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Regular)</div>
|
||||
<div class="text-medium" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Medium)</div>
|
||||
<div class="text-demibold" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (demiBold)</div>
|
||||
<div class="text-bold" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Bold)</div>
|
||||
<div class="text-extrabold" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (ExtraBold)</div>
|
||||
<div class="text-black" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Black)</div>
|
||||
<div class="text-extrablack" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (ExBlack)</div>
|
||||
<div class="text-heavy" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Heavy)</div>
|
||||
<div class="text-fat" style="font-size:1.3em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Fat)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="titelbox" style="letter-spacing: 0px">
|
||||
<h1>تگهای هدینگ</h1>
|
||||
</div>
|
||||
<div class="alphabet" style="line-height:280px"> د </div>
|
||||
<div class="rightbox">
|
||||
<p>در این بین، استفاده از تگ های هدینگ مناسب و رعایت سلسله مراتب آن ها، هم مفهوم نوشته را بهتر منتقل می کند و هم تاثیر قابل توجهی در نتایج موتورهای جستجو خواهد داشت. این نکته یکی از فاکتورهای مهم در بهینه سازی وب سایت برای موتورهای جستجو (Search Engine Optimization) است.</p>
|
||||
<p>نمونه ای از خروجی تگ های هدینگ با سایز استاندارد مربوطه به فونت های <a href="http://fontiran.com" target="_blank">فونت دانا</a> را در زیر مشاهده می کنید.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2">
|
||||
<h1>(H1) نابرده رنج گنج میسر نمی شود. No gain without pain </h1>
|
||||
<h2>(H2) نابرده رنج گنج میسر نمی شود. No gain without pain</h2>
|
||||
<h3>(H3) نابرده رنج گنج میسر نمی شود. No gain without pain</h3>
|
||||
<h4>(H4) نابرده رنج گنج میسر نمی شود. No gain without pain </h4>
|
||||
<h5>(H5) نابرده رنج گنج میسر نمی شود. No gain without pain</h5>
|
||||
<h6>(H6) نابرده رنج گنج میسر نمی شود. No gain without pain</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2">
|
||||
<h1>(H1) نابرده رنج گنج میسر نمی شود. No gain without pain </h1>
|
||||
<h2>(H2) نابرده رنج گنج میسر نمی شود. No gain without pain</h2>
|
||||
<h3>(H3) نابرده رنج گنج میسر نمی شود. No gain without pain</h3>
|
||||
<h4>(H4) نابرده رنج گنج میسر نمی شود. No gain without pain </h4>
|
||||
<h5>(H5) نابرده رنج گنج میسر نمی شود. No gain without pain</h5>
|
||||
<h6>(H6) نابرده رنج گنج میسر نمی شود. No gain without pain</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="titelbox" style="letter-spacing: 0px">
|
||||
<h1>سطر و ستون بندی</h1>
|
||||
</div>
|
||||
<div class="alphabet" style="line-height:200px"> م </div>
|
||||
<div class="rightbox">
|
||||
<p>معمولاً هرگاه مقدار نوشته از یک سطر بیشتر شود ناگزیر به ستون بندی هستیم. و این کار ما را با چند متغییر مواجه خواهد کرد:</p>
|
||||
<p>۱- <strong>عرض ستونهای متنی</strong> که حاوی حداقل۷ کلمه باشد بهترین انتخاب است. اگر ستون کوتاهتر باشد چشم بیننده در اثر حرکتهای زود به زود از پایان یک سطر به ابتدای سطر بعدی خسته خواهد شد. علاوه بر این لبه ستونهایی با عرض کم نیز همیشه دندانه ای و بی نظم خواهد بود. ستونهایی با عرض طولانی هم برای خواننده آزار دهنده است چرا که چشم در حرکت بازگشت از انتهای یک سطر به ابتدای سطر بعدی ممکن است دچار اشتباه شود.
|
||||
|
||||
<p>۲- <strong>لدینگ یا همان فاصله سطر </strong> هم در ستون بندی اهمیت دارد. ستونهای فشرده اگرچه به لحاظ گرافیکی منسجم و زیبا هستند اما عمل خواندن را مختل می کنند و در مقابل، فاصله سطر زیاد نیز باعث نازیبایی و خستگی چشم خواننده میشود. فاصله سطر همیشه می تواند با توجه به نوع فونت و عرض ستونها تغییر کند. بدین ترتیب که فونتهایی با دندانههای بلندتر و ستونهایی با عرض بیشتر به لدینگ بیشتری نیاز دارند.
|
||||
<p>۳- <strong>همترازی </strong> هم یکی از متغییرهای پر بحث در ستون بندی است. اما به طور کوتاه و خلاصه باید گفت که بهتر است در متن فارسی از همترازی یا همان Justification استفاده نکنید. این عمل اگرچه لبه پاراگراف شما را مرتب خواهد کرد اما تنظیمات فاصله حروف را تغییر خواهد داد و در نتیجه باعث کاهش خوانایی خواهد شد. </div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2negativ">(Dana Hireline)</div>
|
||||
<div class="farsiparagraph"><span class="text-hireline">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-hireline">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2negativ">(Dana Thin)</div>
|
||||
<div class="farsiparagraph"><span class="text-thin">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-thin">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2negativ">(Dana UltraLight)</div>
|
||||
<div class="farsiparagraph"><span class="text-ultralight">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-ultralight">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2negativ">(Dana Light)</div>
|
||||
<div class="farsiparagraph"><span class="text-light">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-light">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2negativ">(Dana Regular)</div>
|
||||
<div class="farsiparagraph"><span class="text-regular">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-regular">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2negativ">(Dana Mediume)</div>
|
||||
<div class="farsiparagraph"><span class="text-medium">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-medium">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2negativ">(Dana DemiBold)</div>
|
||||
<div class="farsiparagraph"><span class="text-demibold">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-demibold">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2negativ">(Dana Bold)</div>
|
||||
<div class="farsiparagraph"><span class="text-bold">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-bold">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2negativ">(Dana ExtraBold)</div>
|
||||
<div class="farsiparagraph"><span class="text-extrabold">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-extrabold">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2negativ">(Dana Black)</div>
|
||||
<div class="farsiparagraph"><span class="text-black">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-black">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2negativ">(Dana ExtraBlack)</div>
|
||||
<div class="farsiparagraph"><span class="text-extrablack">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-extrablack">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2negativ">(Dana Heavy)</div>
|
||||
<div class="farsiparagraph"><span class="text-heavy">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-heavy">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="mainbox2negativ">(Dana Fat)</div>
|
||||
<div class="farsiparagraph"><span class="text-fat">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-fat">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2negativ">(Dana Hireline)</div>
|
||||
<div class="farsiparagraph"><span class="text-hireline">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-hireline">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2negativ">(Dana Thin)</div>
|
||||
<div class="farsiparagraph"><span class="text-thin">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-thin">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2negativ">(Dana UltraLight)</div>
|
||||
<div class="farsiparagraph"><span class="text-ultralight">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-ulxtralight">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2negativ">(Dana Light)</div>
|
||||
<div class="farsiparagraph"><span class="text-light">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-light">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2negativ">(Dana Regular)</div>
|
||||
<div class="farsiparagraph"><span class="text-regular">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-regular">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2negativ">(Dana Mediume)</div>
|
||||
<div class="farsiparagraph"><span class="text-medium">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-medium">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2negativ">(Dana DemiBold)</div>
|
||||
<div class="farsiparagraph"><span class="text-demibold">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-demibold">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2negativ">(Dana Bold)</div>
|
||||
<div class="farsiparagraph"><span class="text-bold">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-bold">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2negativ">(Dana ExtraBold)</div>
|
||||
<div class="farsiparagraph"><span class="text-extrabold">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-extrabold">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2negativ">(Dana Black)</div>
|
||||
<div class="farsiparagraph"><span class="text-black">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-black">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2negativ">(Dana ExtraBlack)</div>
|
||||
<div class="farsiparagraph"><span class="text-extrablack">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-extrablack">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2negativ">(Dana Heavy)</div>
|
||||
<div class="farsiparagraph"><span class="text-heavy">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-heavy">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainboxnegativ">
|
||||
<div class="mainbox2negativ">(Dana Fat)</div>
|
||||
<div class="farsiparagraph"><span class="text-fat">
|
||||
در فونت دانا Dana حروف بر اساس قواعد هندسی طراحی شده است اما از نحوه نوشتن حروف به سبک نسخ نیز دور نشده است.
|
||||
مزیت فونتهای سبک نسخ این است که به چشم فارسی زبانها آشناست و خواندن آن آسانتر است. و مزیت فونتهای هندسی این است که برای فضای مدرن و سبکهای مینیمال (مانند طراحی تبلیغات تجاری و طراحی وب و نرم افزار) مناسبتر است.
|
||||
در فونت دانا بخشی از مزایای هر دو گروه گرد آمده است. </span></div>
|
||||
|
||||
<div class="englishparagraph"><span class="text-fat">
|
||||
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public, Barlow shares qualities with the state's car plates, highway signs, busses, and trains.
|
||||
This is the Normal family, which is part of the superfamily along with Semi Condensed and Condensed, each with 9 weights in Roman and Italic.
|
||||
The Barlow project is led by Jeremy Tribby, a designer based in San Francisco, USA.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="titelbox" style="letter-spacing: 0px">
|
||||
<h1>اعداد و علائم در فونت فارسی</h1>
|
||||
</div>
|
||||
<div class="alphabet" style="line-height:470px"> ظ </div>
|
||||
<div class="rightbox">
|
||||
<p><span class="text-xlarge">اعداد فارسی: <strong>۱۲۳۴۵۶۷۸۹۰</strong></span><br>
|
||||
<span class="text-xlarge">اعداد عربی: <strong>۱۲۳٤٥٦۷۸۹۰</strong></span><br>
|
||||
<span class="text-xlarge">اعداد انگلیسی: <strong>1234567890</strong></span></p>
|
||||
<p>برای تایپ اعداد فارسی در محیط وب از <a href="http://fontiran.com/%d9%86%d8%b5%d8%a8-%da%a9%db%8c%d8%a8%d9%88%d8%b1%d8%af-%d9%81%d8%a7%d8%b1%d8%b3%db%8c-%d8%a7%d8%b3%d8%aa%d8%a7%d9%86%d8%af%d8%a7%d8%b1%d8%af-%d8%af%d8%b1-%d9%88%db%8c%d9%86%d8%af%d9%88%d8%b28-%d9%88/">کیبورد استاندارد فارسی</a> استفاده کنید. در ویندوز ۸ و یا بالاتر این کیبورد، با نام Persian(Standard)Keyboard در لیست کیبوردهای ویندوز وجود دارد. همچنین می توانید از <a href="http://persian-computing.ir/download/Iranian_Standard_Persian_Keyboard_(ISIRI_9147)_(Version_2.0).zip">این آدرس</a> آن را دانلود و نصب کنید.</p>
|
||||
<span>
|
||||
<p>با استفاده از کیبورد استاندارد میتوانید ممیز فارسی را تایپ کنید.<br>
|
||||
<span>میانبر این علامت کلیدهای <span class="text-medium">Shift+3</span> است. به این شکل: <strong class="text-xlarge">۳٫۱۴</strong></span><br>
|
||||
<span >ممیز فارسی با علامت اسلش تفاوت دارد :<strong class="text-xlarge">۳/۱۴</strong></span>
|
||||
</p>
|
||||
<p>با استفاده از کیبورد استاندارد میتوانید جداکننده هزارگان فارسی را تایپ کنید.<br>
|
||||
<span>میانبر این علامت کلیدهای <strong>Shift+2</strong> است. به این شکل: <strong class="text-xlarge">۹٬۲۱۰٬۰۰۰</strong></span><br>
|
||||
<span >این علامت با جدا کننده هزارگان انگلیسی تفاوت دارد : <strong class="text-xlarge">۹,۲۱۰,۰۰۰</strong></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="titelbox" style="letter-spacing: 0px">
|
||||
<h1> نسبتهای طلایی</h1>
|
||||
</div>
|
||||
<div class="alphabet2">
|
||||
<div style="padding-left:20px">
|
||||
۳٫۷۷۷ ÷ ۱٫۶۱۸ = <span class="text-regular text-underline">۲٫۳۳۵</span>
|
||||
<br>
|
||||
۶٫۱۱۲ ÷ ۱٫۶۱۸ = <span class="text-regular text-underline">۳٫۷۷۷</span>
|
||||
<br>
|
||||
۹٫۸۸۹ ÷ ۱٫۶۱۸ = <span class="text-regular text-underline">۶٫۱۱۲</span>
|
||||
<br>
|
||||
۱۶ ÷ ۱٫۶۱۸ = <span class="text-regular text-underline">۹٫۸۸۹</span>
|
||||
<br>
|
||||
.......................................
|
||||
<br>
|
||||
۱۶ × ۱٫۶۱۸ = <span class="text-regular text-underline">۲۵٫۸۸۸</span>
|
||||
<br>
|
||||
۲۵٫۸۸۸ × ۱٫۶۱۸ = <span class="text-regular text-underline">۴۱٫۸۸۷</span>
|
||||
<br>
|
||||
۴۱٫۸۸۷ × ۱٫۶۱۸ = <span class="text-regular text-underline">۶۷٫۷۷۳</span>
|
||||
<br>
|
||||
۶۷٫۷۷۳ × ۱٫۶۱۸ = <span class="text-regular text-underline">۱۰۹٫۶۵۶</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightbox">
|
||||
<p>اهمیت اندازه فونت در خوانایی و زیبا شدن صفحه وب سایت بر کسی پوشیده نیست. در کنار این بحث، موارد دیگری مانند ارتفاع خطوط، فاصله ها، ابعاد قسمت های مختلف و ... نیز در بحث تایپوگرافی اهمیت زیادی دارند.</p>
|
||||
<p>برای محاسبه این اعداد می توانیم از سری اعداد متناسب (Modular Scale) استفاده کنیم. در حقیقت از تعدادی عدد پشت سر هم که بر اساس مضرب خاصی تشکیل شده اند برای تنظیمات ارتفاع خط، فاصله ها، ابعاد و ... استفاده می کنیم. نسبت (عدد) طلایی همان مضرب اعداد است.</p>
|
||||
<p>به عنوان مثال می خواهیم از سایز 16px <strong>فونت دانا</strong> به عنوان فونت و سایز اصلی متن صفحات استفاده کنیم. عدد فی (phi) یونانی که معادل ۱٫۶۱۸۰۳۳۹۸۸۷ (به اختصار ۱٫۶۱۸) است را به عنوان نسبت طلایی در نظر می گیریم. بنابراین سری اعدادی به شکل روبرو خواهیم داشت:</p>
|
||||
|
||||
<p>
|
||||
به کمک این اعداد و استفاده از آن ها در صفحات وب سایت خود می توانیم خوانایی و زیبایی آن را افزایش دهیم. علاوه بر آن، اگر از واحدهای نسبی مانند em استفاده شود، امکانات بیشتری در اختیار طراح و بازدیدکننده خواهد بود. البته <strong>سری اعداد بر مبنای نسبت طلایی</strong> فقط در تایپوگرافی وب سایت کاربرد ندارد.
|
||||
این اعداد می تواند ادامه داشته باشد (<span class="text-regular text-underline">۱٬۲۱۵٫۹۸۱</span> ، <span class="text-regular text-underline">۱٬۹۶۷٫۴۵۷</span> ، <span class="text-regular text-underline">۳٬۱۸۳٫۳۴۵</span> و ...).
|
||||
</p>
|
||||
دانا
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="titelbox" style="letter-spacing: 0px"><h1>خوانایی لینکها</h1> </div>
|
||||
<div class="alphabet" style="line-height:470px"> غ </div>
|
||||
<div class="rightbox">
|
||||
<p>شاید بتوانیم از لینک ها (hyperlinks) به عنوان مهم ترین بخش وب سایت ها در ارتباط با سئو (SEO) و نیز یکی از پرکاربردترین اجزای وب سایت نام ببریم. بنابراین بازدیدکننده باید بتواند به راحتی آن ها را از سایر محتوای صفحه تشخیص داده و متن لینک شده را به سرعت و بدون مزاحمت مشاهده کند.</p>
|
||||
<p>به صورت پیش فرض، متن هایی که داخل یک هایپرلینک قرار می گیرند، زیر خط دار یا underline می شوند (مانند این <a href="http://fontiran.com" target="_blank">لینک یا پیوند به صفحه اصلی فونت ایران</a>). در بسیاری از فونت های فارسی، این خط روی متن و نقطه ها قرار می گیرد (مانند این <a href="http://fontiran.com" target="_blank" style="font-family: Tahoma;">لینک یا پیوند به صفحه اصلی فونت ایران با فونت تاهوما</a>).</p>
|
||||
<p>در صورت بروز این مشکل، یا باید خط زیرین تمام تگ های «a» غیر فعال شود و یا با ترفندهایی به شکل دیگر ایجاد شود (مانند قرار دادن border-bottom برای تگ های «a»).</p>
|
||||
<p>همچنین پیشنهاد می کنیم از قراردادن افکت ها و transition های آزاردهنده روی لینک ها پرهیز کرده و برای راحتی کاربر از padding و color با کانتراست مناسب نسبت به زمینه استفاده کنید.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="mainbox">
|
||||
<div class="rightbox">
|
||||
<br>
|
||||
در این فایل سعی کردیم همراه با یک مطلب آموزشی کوتاه، نحوه استفاده از خانواده فونت دانا و پیش نمایشی از قسمت های مختلف آن را مرور کنیم.
|
||||
<br>
|
||||
برای مشاهده راهنمای نحوه قراردادن فونت ها در وب سایت خود، به <a href="http://fontiran.com/%d9%86%d8%b5%d8%a8-%d9%81%d9%88%d9%86%d8%aa-%d8%a7%db%8c%d8%b1%d8%a7%d9%86-%d8%b3%d9%86%d8%b3-iransans-%d8%b1%d9%88%db%8c-%d9%88%d8%a8%d8%b3%d8%a7%db%8c%d8%aa/" target="_blank">این آدرس</a> مراجعه کنید.
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
<div class="alphabet" style="line-height:100px">ء</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="footer">
|
||||
Copyright (c) 2019 by <a href="http://fontiran.com">www.fontiran.com</a> (Moslem Ebrahimi). All rights reserved.
|
||||
<br>
|
||||
To use this font, it is necessary to obtain the license from www.fontiran.com
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
500
webfonts/Fa Numral Help.html
Normal file
500
webfonts/Fa Numral Help.html
Normal file
File diff suppressed because one or more lines are too long
BIN
webfonts/Farsi numerals/DanaFaNum-Black.ttf
Normal file
BIN
webfonts/Farsi numerals/DanaFaNum-Black.ttf
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/DanaFaNum-Bold.ttf
Normal file
BIN
webfonts/Farsi numerals/DanaFaNum-Bold.ttf
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/DanaFaNum-DemiBold.ttf
Normal file
BIN
webfonts/Farsi numerals/DanaFaNum-DemiBold.ttf
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/DanaFaNum-ExtraBlack.ttf
Normal file
BIN
webfonts/Farsi numerals/DanaFaNum-ExtraBlack.ttf
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/DanaFaNum-ExtraBold.ttf
Normal file
BIN
webfonts/Farsi numerals/DanaFaNum-ExtraBold.ttf
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/DanaFaNum-Fat.ttf
Normal file
BIN
webfonts/Farsi numerals/DanaFaNum-Fat.ttf
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/DanaFaNum-Hairline.ttf
Normal file
BIN
webfonts/Farsi numerals/DanaFaNum-Hairline.ttf
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/DanaFaNum-Heavy.ttf
Normal file
BIN
webfonts/Farsi numerals/DanaFaNum-Heavy.ttf
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/DanaFaNum-Light.ttf
Normal file
BIN
webfonts/Farsi numerals/DanaFaNum-Light.ttf
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/DanaFaNum-Medium.ttf
Normal file
BIN
webfonts/Farsi numerals/DanaFaNum-Medium.ttf
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/DanaFaNum-Regular.ttf
Normal file
BIN
webfonts/Farsi numerals/DanaFaNum-Regular.ttf
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/DanaFaNum-Thin.ttf
Normal file
BIN
webfonts/Farsi numerals/DanaFaNum-Thin.ttf
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/DanaFaNum-UltraLight.ttf
Normal file
BIN
webfonts/Farsi numerals/DanaFaNum-UltraLight.ttf
Normal file
Binary file not shown.
472
webfonts/Farsi numerals/Webfonts/fonttest.html
Normal file
472
webfonts/Farsi numerals/Webfonts/fonttest.html
Normal file
@@ -0,0 +1,472 @@
|
||||
<head>
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=9" />
|
||||
<title>Dana</title>
|
||||
<style type="text/css" media="screen">
|
||||
@font-face { font-family: 'WOFF2 DanaFaNum-Hairline'; src: url('woff2/DanaFaNum-Hairline.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 DanaFaNum-Thin'; src: url('woff2/DanaFaNum-Thin.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 DanaFaNum-UltraLight'; src: url('woff2/DanaFaNum-UltraLight.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 DanaFaNum-Light'; src: url('woff2/DanaFaNum-Light.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 DanaFaNum-Regular'; src: url('woff2/DanaFaNum-Regular.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 DanaFaNum-Medium'; src: url('woff2/DanaFaNum-Medium.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 DanaFaNum-DemiBold'; src: url('woff2/DanaFaNum-DemiBold.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 DanaFaNum-Bold'; src: url('woff2/DanaFaNum-Bold.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 DanaFaNum-ExtraBold'; src: url('woff2/DanaFaNum-ExtraBold.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 DanaFaNum-Black'; src: url('woff2/DanaFaNum-Black.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 DanaFaNum-ExtraBlack'; src: url('woff2/DanaFaNum-ExtraBlack.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 DanaFaNum-Heavy'; src: url('woff2/DanaFaNum-Heavy.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 DanaFaNum-fat'; src: url('woff2/DanaFaNum-fat.woff2'); }
|
||||
|
||||
@font-face { font-family: 'WOFF DanaFaNum-Hairline'; src: url('woff/DanaFaNum-Hairline.woff'); }
|
||||
@font-face { font-family: 'WOFF DanaFaNum-Thin'; src: url('WOFF/DanaFaNum-Thin.WOFF'); }
|
||||
@font-face { font-family: 'WOFF DanaFaNum-UltraLight'; src: url('WOFF/DanaFaNum-UltraLight.WOFF'); }
|
||||
@font-face { font-family: 'WOFF DanaFaNum-Light'; src: url('WOFF/DanaFaNum-Light.WOFF'); }
|
||||
@font-face { font-family: 'WOFF DanaFaNum-Regular'; src: url('WOFF/DanaFaNum-Regular.WOFF'); }
|
||||
@font-face { font-family: 'WOFF DanaFaNum-Medium'; src: url('WOFF/DanaFaNum-Medium.WOFF'); }
|
||||
@font-face { font-family: 'WOFF DanaFaNum-DemiBold'; src: url('WOFF/DanaFaNum-DemiBold.WOFF'); }
|
||||
@font-face { font-family: 'WOFF DanaFaNum-Bold'; src: url('WOFF/DanaFaNum-Bold.WOFF'); }
|
||||
@font-face { font-family: 'WOFF DanaFaNum-ExtraBold'; src: url('WOFF/DanaFaNum-ExtraBold.WOFF'); }
|
||||
@font-face { font-family: 'WOFF DanaFaNum-Black'; src: url('WOFF/DanaFaNum-Black.WOFF'); }
|
||||
@font-face { font-family: 'WOFF DanaFaNum-ExtraBlack'; src: url('WOFF/DanaFaNum-ExtraBlack.WOFF'); }
|
||||
@font-face { font-family: 'WOFF DanaFaNum-Heavy'; src: url('WOFF/DanaFaNum-Heavy.WOFF'); }
|
||||
@font-face { font-family: 'WOFF DanaFaNum-fat'; src: url('WOFF/DanaFaNum-fat.WOFF'); }
|
||||
|
||||
body {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
.features, .label, a, #controls {
|
||||
font: normal normal normal small sans-serif;
|
||||
}
|
||||
.features .emojiButton {
|
||||
vertical-align: -5%;
|
||||
font-size: small;
|
||||
}
|
||||
.emojiButton {
|
||||
cursor: pointer;
|
||||
}
|
||||
#flexbox {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
}
|
||||
#controls {
|
||||
flex: 0 1 auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
border: 0px solid transparent;
|
||||
height: auto;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
#metricsLine {
|
||||
background-color: #EEE;
|
||||
border-top: 1px solid #AAA;
|
||||
border-bottom: 1px solid #AAA;
|
||||
width: 100%;
|
||||
margin: 0.2em 0;
|
||||
padding: 0 0;
|
||||
font-size: 2em;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
text-overflow: none;
|
||||
display: none;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
}
|
||||
#metricsLine::-webkit-scrollbar { /* WebKit */
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
#waterfall {
|
||||
flex: 1 1 auto;
|
||||
border: 0 solid transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
color: black;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
font-family: "WOFF2 DanaFaNum-Hairline";
|
||||
font-feature-settings: "kern" on, "liga" on, "calt" on;
|
||||
-moz-font-feature-settings: "kern" on, "liga" on, "calt" on;
|
||||
-webkit-font-feature-settings: "kern" on, "liga" on, "calt" on;
|
||||
-ms-font-feature-settings: "kern" on, "liga" on, "calt" on;
|
||||
-o-font-feature-settings: "kern" on, "liga" on, "calt" on;
|
||||
}
|
||||
div, p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#waterfall p {
|
||||
margin-bottom: 0.8em;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.○ .sampletext {
|
||||
-webkit-text-stroke: 1px black;
|
||||
-webkit-text-fill-color: #FFF0;
|
||||
}
|
||||
.features, .label, a {
|
||||
color: #888;
|
||||
}
|
||||
.label {
|
||||
background-color: #ddd;
|
||||
padding: 2px 3px;
|
||||
}
|
||||
|
||||
span#p08 { font-size: 08pt; padding: 08pt 0; }
|
||||
span#p09 { font-size: 09pt; padding: 09pt 0; }
|
||||
span#p10 { font-size: 10pt; padding: 10pt 0; }
|
||||
span#p11 { font-size: 11pt; padding: 11pt 0; }
|
||||
span#p12 { font-size: 12pt; padding: 12pt 0; }
|
||||
span#p13 { font-size: 13pt; padding: 13pt 0; }
|
||||
span#p14 { font-size: 14pt; padding: 14pt 0; }
|
||||
span#p15 { font-size: 15pt; padding: 15pt 0; }
|
||||
span#p16 { font-size: 16pt; padding: 16pt 0; }
|
||||
span#largeParagraph { font-size: 32pt; padding: 32pt 0; }
|
||||
span#veryLargeParagraph { font-size: 100pt; padding: 100pt 0; }
|
||||
|
||||
.otFeatureLabel {
|
||||
color: #666;
|
||||
background-color: #ddd;
|
||||
padding: 0.2em 0.5em 0.3em 0.5em;
|
||||
margin: 0 .04em;
|
||||
line-height: 2em;
|
||||
border-radius: 0.3em;
|
||||
border: 0;
|
||||
text-align:center;
|
||||
}
|
||||
.otFeatureLabel, .otFeature {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.otFeatureLabel {
|
||||
padding: 0.2em 0.5em 0.3em 0.5em;
|
||||
margin: 0 .04em;
|
||||
line-height: 2em;
|
||||
color: #666;
|
||||
background-color: #ddd;
|
||||
border-radius: 0.3em;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
z-index: 6;
|
||||
}
|
||||
.wrapper {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
border: 0 solid transparent;
|
||||
}
|
||||
select {
|
||||
float: left;
|
||||
margin: 0 0.5em 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
input[type=text] {
|
||||
border: 1px solid #999;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.features {
|
||||
clear: left;
|
||||
}
|
||||
input[type=checkbox]:checked + label {
|
||||
visibility: visible;
|
||||
color: #fff;
|
||||
background-color: #888;
|
||||
}
|
||||
.otFeature {
|
||||
visibility: collapse;
|
||||
margin: 0 -1em 0 0;
|
||||
}
|
||||
.otFeatureLabel .tooltip {
|
||||
visibility: hidden;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 0px 5px;
|
||||
top: -2em;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
}
|
||||
.otFeatureLabel:hover .tooltip {
|
||||
visibility: visible;
|
||||
}
|
||||
#featureLine {
|
||||
display: none;
|
||||
border-bottom: 1px solid #999;
|
||||
padding: 0.5em 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* Footer paragraph: */
|
||||
#helptext {
|
||||
color: black;
|
||||
background-color: #ddd;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding: 2px;
|
||||
width: 100%;
|
||||
font: x-small sans-serif;
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: #333;
|
||||
}
|
||||
.features, .label, a, body, p, #metricsLine {
|
||||
color: white;
|
||||
}
|
||||
.label {
|
||||
background-color: black;
|
||||
padding: 2px 3px;
|
||||
}
|
||||
.otFeatureLabel, input[type=text] {
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
input[type=checkbox]:checked + label {
|
||||
color: black;
|
||||
background-color: #aaa;
|
||||
}
|
||||
#helptext {
|
||||
background-color: #777;
|
||||
}
|
||||
.○ .sampletext {
|
||||
-webkit-text-stroke: 1px white;
|
||||
-webkit-text-fill-color: #0000;
|
||||
}
|
||||
#metricsLine {
|
||||
background-color: #222;
|
||||
border-color: #777;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="document.getElementById('textInput').focus();setCharset();">
|
||||
<div id="flexbox">
|
||||
<div id="controls">
|
||||
<div>
|
||||
<select size="1" id="fontFamilySelector" name="fontFamilySelector" onchange="changeFont()">
|
||||
<option value="woff2/DanaFaNum-Hairline.woff2">WOFF2 DanaFaNum-Hairline</option>
|
||||
<option value="woff2/DanaFaNum-Thin.woff2">WOFF2 DanaFaNum-Thin</option>
|
||||
<option value="woff2/DanaFaNum-UltraLight.woff2">WOFF2 DanaFaNum-UltraLight</option>
|
||||
<option value="woff2/DanaFaNum-Light.woff2">WOFF2 DanaFaNum-Light</option>
|
||||
<option value="woff2/DanaFaNum-Regular.woff2">WOFF2 DanaFaNum-Regular</option>
|
||||
<option value="woff2/DanaFaNum-Medium.woff2">WOFF2 DanaFaNum-Medium</option>
|
||||
<option value="woff2/DanaFaNum-DemiBold.woff2">WOFF2 DanaFaNum-DemiBold</option>
|
||||
<option value="woff2/DanaFaNum-Bold.woff2">WOFF2 DanaFaNum-Bold</option>
|
||||
<option value="woff2/DanaFaNum-ExtraBold.woff2">WOFF2 DanaFaNum-ExtraBold</option>
|
||||
<option value="woff2/DanaFaNum-Black.woff2">WOFF2 DanaFaNum-Black</option>
|
||||
<option value="woff2/DanaFaNum-ExtraBlack.woff2">WOFF2 DanaFaNum-ExtraBlack</option>
|
||||
<option value="woff2/DanaFaNum-Heavy.woff2">WOFF2 DanaFaNum-Heavy</option>
|
||||
<option value="woff2/DanaFaNum-fat.woff2">WOFF2 DanaFaNum-fat</option>
|
||||
|
||||
<option value="WOFF/DanaFaNum-Hairline.WOFF">WOFF DanaFaNum-Hairline</option>
|
||||
<option value="WOFF/DanaFaNum-Thin.WOFF">WOFF DanaFaNum-Thin</option>
|
||||
<option value="WOFF/DanaFaNum-UltraLight.WOFF">WOFF DanaFaNum-UltraLight</option>
|
||||
<option value="WOFF/DanaFaNum-Light.WOFF">WOFF DanaFaNum-Light</option>
|
||||
<option value="WOFF/DanaFaNum-Regular.WOFF">WOFF DanaFaNum-Regular</option>
|
||||
<option value="WOFF/DanaFaNum-Medium.WOFF">WOFF DanaFaNum-Medium</option>
|
||||
<option value="WOFF/DanaFaNum-DemiBold.WOFF">WOFF DanaFaNum-DemiBold</option>
|
||||
<option value="WOFF/DanaFaNum-Bold.WOFF">WOFF DanaFaNum-Bold</option>
|
||||
<option value="WOFF/DanaFaNum-ExtraBold.WOFF">WOFF DanaFaNum-ExtraBold</option>
|
||||
<option value="WOFF/DanaFaNum-Black.WOFF">WOFF DanaFaNum-Black</option>
|
||||
<option value="WOFF/DanaFaNum-ExtraBlack.WOFF">WOFF DanaFaNum-ExtraBlack</option>
|
||||
<option value="WOFF/DanaFaNum-Heavy.WOFF">WOFF DanaFaNum-Heavy</option>
|
||||
<option value="WOFF/DanaFaNum-fat.WOFF">WOFF DanaFaNum-fat</option>
|
||||
</select>
|
||||
<div class="wrapper" spellcheck="false">
|
||||
<input type="text" value="Type Text Here." id="textInput" onclick="this.select();" onkeyup="updateParagraph()" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="features">
|
||||
<a href="javascript:setCharset();">Charset</a>
|
||||
<a href="javascript:setLat1();">Lat1</a>
|
||||
 
|
||||
<a href="https://caniuse.com/#feat=woff">woff</a>
|
||||
<a href="https://caniuse.com/#feat=woff2">woff2</a>
|
||||
 
|
||||
<a onclick="toggleInverse();" id="invert" class="emojiButton">🔲</a>
|
||||
<label><input type="checkbox" id="kern" value="kern" class="otFeature" onchange="updateFeatures()" checked><label for="kern" class="otFeatureLabel">kern</label>
|
||||
<label><input type="checkbox" id="liga" value="liga" class="otFeature" onchange="updateFeatures()" checked><label for="liga" class="otFeatureLabel">liga/clig</label>
|
||||
<label><input type="checkbox" id="calt" value="calt" class="otFeature" onchange="updateFeatures()" checked><label for="calt" class="otFeatureLabel">calt</label>
|
||||
<input type="checkbox" id="subs" value="subs" class="otFeature" onchange="updateFeatures()"><label for="subs" class="otFeatureLabel">subs</label>
|
||||
<input type="checkbox" id="sinf" value="sinf" class="otFeature" onchange="updateFeatures()"><label for="sinf" class="otFeatureLabel">sinf</label>
|
||||
<input type="checkbox" id="sups" value="sups" class="otFeature" onchange="updateFeatures()"><label for="sups" class="otFeatureLabel">sups</label>
|
||||
<input type="checkbox" id="numr" value="numr" class="otFeature" onchange="updateFeatures()"><label for="numr" class="otFeatureLabel">numr</label>
|
||||
<input type="checkbox" id="dnom" value="dnom" class="otFeature" onchange="updateFeatures()"><label for="dnom" class="otFeatureLabel">dnom</label>
|
||||
<input type="checkbox" id="frac" value="frac" class="otFeature" onchange="updateFeatures()"><label for="frac" class="otFeatureLabel">frac</label>
|
||||
<input type="checkbox" id="init" value="init" class="otFeature" onchange="updateFeatures()"><label for="init" class="otFeatureLabel">init</label>
|
||||
<input type="checkbox" id="medi" value="medi" class="otFeature" onchange="updateFeatures()"><label for="medi" class="otFeatureLabel">medi</label>
|
||||
<input type="checkbox" id="fina" value="fina" class="otFeature" onchange="updateFeatures()"><label for="fina" class="otFeatureLabel">fina</label>
|
||||
<input type="checkbox" id="rlig" value="rlig" class="otFeature" onchange="updateFeatures()"><label for="rlig" class="otFeatureLabel">rlig</label>
|
||||
<input type="checkbox" id="dlig" value="dlig" class="otFeature" onchange="updateFeatures()"><label for="dlig" class="otFeatureLabel">dlig</label>
|
||||
<input type="checkbox" id="ss02" value="ss02" class="otFeature" onchange="updateFeatures()"><label for="ss02" class="otFeatureLabel">ss02</label>
|
||||
<input type="checkbox" id="ss03" value="ss03" class="otFeature" onchange="updateFeatures()"><label for="ss03" class="otFeatureLabel">ss03</label>
|
||||
<label><input type="checkbox" value="show" onchange="updateFeatures();document.getElementById('featureLine').style.display=this.checked?'block':'none'">CSS</label>
|
||||
<label><input type="checkbox" value="show" onchange="updateFeatures();document.getElementById('metricsLine').style.display=this.checked?'block':'none'">Metrics</label>
|
||||
</p>
|
||||
<p class="features" id="featureLine">font-feature-settings: "kern" on, "liga" on, "calt" on;</p>
|
||||
</div>
|
||||
<div id="waterfall" class="●">
|
||||
<div id="metricsLine"></div>
|
||||
<p><span class="label">08</span> <span class="sampletext" id="p08"></span></p>
|
||||
<p><span class="label">09</span> <span class="sampletext" id="p09"></span></p>
|
||||
<p><span class="label">10</span> <span class="sampletext" id="p10"></span></p>
|
||||
<p><span class="label">11</span> <span class="sampletext" id="p11"></span></p>
|
||||
<p><span class="label">12</span> <span class="sampletext" id="p12"></span></p>
|
||||
<p><span class="label">13</span> <span class="sampletext" id="p13"></span></p>
|
||||
<p><span class="label">14</span> <span class="sampletext" id="p14"></span></p>
|
||||
<p><span class="label">15</span> <span class="sampletext" id="p15"></span></p>
|
||||
<p><span class="label">16</span> <span class="sampletext" id="p16"></span></p>
|
||||
<p><span class="sampletext" id="largeParagraph"></span></p>
|
||||
<p><span class="sampletext" id="veryLargeParagraph"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Disclaimer -->
|
||||
<p id="helptext" onmouseleave="vanish(this);">
|
||||
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.
|
||||
</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
const selector = document.getElementById("fontFamilySelector");
|
||||
const selectorOptions = selector.options;
|
||||
const selectorLength = selectorOptions.length;
|
||||
|
||||
document.addEventListener('keyup', keyAnalysis);
|
||||
|
||||
function keyAnalysis(event) {
|
||||
if (event.ctrlKey) {
|
||||
if (event.code == 'KeyR') {
|
||||
setCharset();
|
||||
} else if (event.code == 'KeyL') {
|
||||
setLat1();
|
||||
} else if (event.code == 'KeyJ') {
|
||||
toggleLeftRight();
|
||||
} else if (event.code == 'Period') {
|
||||
selector.selectedIndex = (selector.selectedIndex + 1) % selectorLength;
|
||||
changeFont();
|
||||
} else if (event.code == 'Comma') {
|
||||
var newIndex = selector.selectedIndex - 1;
|
||||
if (newIndex<0) {
|
||||
newIndex = selectorLength - 1;
|
||||
}
|
||||
selector.selectedIndex = newIndex;
|
||||
changeFont();
|
||||
}
|
||||
}
|
||||
}
|
||||
function updateParagraph() {
|
||||
// update paragraph text based on user input:
|
||||
const txt = document.getElementById('textInput');
|
||||
const paragraphs = document.getElementsByClassName('sampletext');
|
||||
for (i = 0; i < paragraphs.length; i++) {
|
||||
paragraph = paragraphs[i];
|
||||
paragraph.textContent = txt.value;
|
||||
}
|
||||
|
||||
// update other elements:
|
||||
document.getElementById('metricsLine').textContent = txt.value;
|
||||
}
|
||||
function updateFeatures() {
|
||||
// update features based on user input:
|
||||
// first, get feature on/off line:
|
||||
var cssCode = "";
|
||||
var codeLine = "";
|
||||
var checkboxes = document.getElementsByClassName("otFeature")
|
||||
for (i = 0; i < checkboxes.length; i++) {
|
||||
var checkbox = checkboxes[i];
|
||||
codeLine += '"'+checkbox.id+'" ';
|
||||
codeLine += checkbox.checked ? 'on, ' : 'off, ';
|
||||
if (checkbox.name=="kern") {
|
||||
cssCode += "font-kerning: "
|
||||
cssCode += checkbox.checked ? 'normal; ' : 'none; ';
|
||||
} else if (checkbox.name=="liga") {
|
||||
codeLine += '"clig" '
|
||||
codeLine += checkbox.checked ? 'on, ' : 'off, ';
|
||||
cssCode += "font-variant-ligatures: "
|
||||
cssCode += checkbox.checked ? 'common-ligatures contextual; ' : 'no-common-ligatures no-contextual; ';
|
||||
} else if (checkbox.name=="dlig") {
|
||||
cssCode += "font-variant-ligatures: "
|
||||
cssCode += checkbox.checked ? 'discretionary-ligatures; ' : 'no-discretionary-ligatures; ';
|
||||
} else if (checkbox.name=="hlig") {
|
||||
cssCode += "font-variant-ligatures: "
|
||||
cssCode += checkbox.checked ? 'historical-ligatures; ' : 'no-historical-ligatures; ';
|
||||
}
|
||||
}
|
||||
codeLine = codeLine.slice(0, -2)
|
||||
|
||||
// then, apply line for every browser:
|
||||
const prefixes = ["","-moz-","-webkit-","-ms-","-o-",];
|
||||
const suffix = "font-feature-settings: "
|
||||
for (i = 0; i < prefixes.length; i++) {
|
||||
var prefix = prefixes[i];
|
||||
cssCode += prefix
|
||||
cssCode += suffix
|
||||
cssCode += codeLine
|
||||
cssCode += "; "
|
||||
}
|
||||
|
||||
document.getElementById('waterfall').style.cssText = cssCode;
|
||||
document.getElementById('featureLine').innerHTML = cssCode.replace(/;/g,";<br/>");
|
||||
changeFont();
|
||||
}
|
||||
function changeFont() {
|
||||
var selected_index = selector.selectedIndex;
|
||||
var selected_option_text = selector.options[selected_index].text;
|
||||
document.getElementById('waterfall').style.fontFamily = selected_option_text;
|
||||
}
|
||||
function setDefaultText(defaultText) {
|
||||
document.getElementById('textInput').value = decodeEntities(defaultText);
|
||||
updateParagraph();
|
||||
}
|
||||
function setLat1() {
|
||||
const lat1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØŒÞÙÚÛÜÝŸ àáâãäåæçèéêëìíîïðñòóôõöøœþßùúûüýÿ .,:;·…¿?¡!«»‹› /|¦\()[]{}_-–—‚„‘’“”"' #&§@•­*†‡¶ +×÷±=<>¬μ ^~´`ˆ¯˜¨¸ ¥€£$¢¤ƒ ™®© 1234567890 ªº°%‰ ¹²³¼½¾";
|
||||
return setDefaultText(lat1);
|
||||
}
|
||||
function setCharset() {
|
||||
const completeCharSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzءاﺎأﺄإﺈآﺂٱﭑٮبﺐﺒﺑپﭗﭙﭘتﺖﺘﺗثﺚﺜﺛٹﭧﭩﭨجﺞﺠﺟچﭻﭽﭼحﺢﺤﺣخﺦﺨﺧدﺪذﺬڈﮉرﺮزﺰڑﮍڕژﮋسﺲﺴﺳشﺶﺸﺷصﺺﺼﺻضﺾﻀﺿطﻂﻄﻃظﻆﻈﻇعﻊﻌﻋغﻎﻐﻏفﻒﻔﻓڤﭫﭭﭬڡٯقﻖﻘﻗكﻚﻜﻛکﮏﮑﮐگﮓﮕﮔڪلﻞﻠﻟڵمﻢﻤﻣنﻦﻨﻧںﮟهﻪﻬﻫۀﮥہﮧﮩﮨۂھﮫﮭﮬةﺔۃوﻮؤﺆۆﯚۇﯘۉﯣىﻰيﻲﻴﻳئﺊﺌﺋێیےﮯۓﮱەـﻻﻼﻷﻸﻹﻺﻵﻶﷲ٫٬٠١٢٣٤٥٦٧٨٩۰۱۲۳۴۵۶۷۸۹0123456789₀₁₂₃₄₅₆₇₈₉⁰¹²³⁴⁵⁶⁷⁸⁹⁄½¼¾
    ​﮲﮳﮴﮵﮹﮶۔،؛؟٭﴾﴿.,:;…!?•*#/\-_(){}[]„“”‘’«»‹›"'﷼٪@&©®™°′″|¦$+−×÷=≠><≥≤±≈~¬^∞∫∏∑√µ∂%∕ ‎ ‏ ‍ ‌ ؕ ٰ ٖ ٔ ٕ ً ٌ ٍ َ ُ ِ ّ ْ ٓ ٘ ٚ ٛ';
|
||||
setDefaultText(completeCharSet);
|
||||
}
|
||||
function decodeEntities(string){
|
||||
var elem = document.createElement('div');
|
||||
elem.innerHTML = string;
|
||||
return elem.textContent;
|
||||
}
|
||||
function vanish(item) {
|
||||
item.style.setProperty("display", "none");
|
||||
}
|
||||
function toggleLeftRight() {
|
||||
const waterfall = document.getElementById("waterfall");
|
||||
if (waterfall.dir != "rtl") {
|
||||
waterfall.dir = "rtl";
|
||||
waterfall.align = "right";
|
||||
} else {
|
||||
waterfall.dir = "";
|
||||
waterfall.align = "";
|
||||
}
|
||||
}
|
||||
function toggleInverse() {
|
||||
const testText = document.getElementById("waterfall");
|
||||
if (testText) {
|
||||
const link = document.getElementById("invert");
|
||||
if (testText.className == "●") {
|
||||
testText.className = "○";
|
||||
link.textContent = "🔳";
|
||||
} else {
|
||||
testText.className = "●";
|
||||
link.textContent = "🔲";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
BIN
webfonts/Farsi numerals/Webfonts/letter-spacing.png
Normal file
BIN
webfonts/Farsi numerals/Webfonts/letter-spacing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Black.woff
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Black.woff
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Bold.woff
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Bold.woff
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-DemiBold.woff
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-DemiBold.woff
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-ExtraBlack.woff
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-ExtraBlack.woff
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-ExtraBold.woff
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-ExtraBold.woff
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Hairline.woff
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Hairline.woff
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Heavy.woff
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Heavy.woff
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Light.woff
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Light.woff
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Medium.woff
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Medium.woff
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Regular.woff
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Regular.woff
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Thin.woff
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-Thin.woff
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-UltraLight.woff
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-UltraLight.woff
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-fat.woff
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff/DanaFaNum-fat.woff
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Black.woff2
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Black.woff2
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Bold.woff2
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Bold.woff2
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-DemiBold.woff2
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-DemiBold.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-ExtraBold.woff2
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-ExtraBold.woff2
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Hairline.woff2
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Hairline.woff2
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Heavy.woff2
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Heavy.woff2
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Light.woff2
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Light.woff2
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Medium.woff2
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Medium.woff2
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Regular.woff2
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Regular.woff2
Normal file
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Thin.woff2
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-Thin.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-fat.woff2
Normal file
BIN
webfonts/Farsi numerals/Webfonts/woff2/DanaFaNum-fat.woff2
Normal file
Binary file not shown.
112
webfonts/css/fontiran.css
Normal file
112
webfonts/css/fontiran.css
Normal file
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
*
|
||||
* Name: DANA Fonts
|
||||
* Version: 3.0
|
||||
* Author: Moslem Ebrahimi (moslemebrahimi.com)
|
||||
* Created on: nov 12, 2021
|
||||
* Updated on: nov 12, 2021
|
||||
* Website: http://fontiran.com
|
||||
* Copyright: Commercial/Proprietary Software
|
||||
--------------------------------------------------------------------------------------
|
||||
فونت دانا یک نرم افزار مالکیتی محسوب می شود. جهت آگاهی از قوانین استفاده از این فونت ها لطفا به وب سایت (فونت ایران دات کام) مراجعه نمایید
|
||||
--------------------------------------------------------------------------------------
|
||||
DANA 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: dana;
|
||||
font-style: normal;
|
||||
font-weight: 10;
|
||||
src: url('../woff2/Dana-Hairline.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
|
||||
url('../woff/Dana-Hairline.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||
}
|
||||
@font-face {
|
||||
font-family: dana;
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
src: url('../woff2/Dana-Thin.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
|
||||
url('../woff/Dana-Thin.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||
}
|
||||
@font-face {
|
||||
font-family: dana;
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
src: url('../woff2/Dana-UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
|
||||
url('../woff/Dana-UltraLight.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||
}
|
||||
@font-face {
|
||||
font-family: dana;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url('../woff2/Dana-Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
|
||||
url('../woff/Dana-Light.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||
}
|
||||
@font-face {
|
||||
font-family: dana;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: url('../woff2/Dana-Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
|
||||
url('../woff/Dana-Medium.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||
}
|
||||
@font-face {
|
||||
font-family: dana;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url('../woff2/Dana-DemiBold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
|
||||
url('../woff/Dana-DemiBold.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||
}
|
||||
@font-face {
|
||||
font-family: dana;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
src: url('../woff2/Dana-ExtraBold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
|
||||
url('../woff/Dana-ExtraBold.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||
}
|
||||
@font-face {
|
||||
font-family: dana;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url('../woff2/Dana-Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
|
||||
url('../woff/Dana-Black.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||
}
|
||||
@font-face {
|
||||
font-family: dana;
|
||||
font-style: normal;
|
||||
font-weight: 930;
|
||||
src: url('../woff2/Dana-ExtraBlack.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
|
||||
url('../woff/Dana-ExtraBlack.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||
}
|
||||
@font-face {
|
||||
font-family: dana;
|
||||
font-style: normal;
|
||||
font-weight: 960;
|
||||
src: url('../woff2/Dana-Heavy.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
|
||||
url('../woff/Dana-Heavy.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||
}
|
||||
@font-face {
|
||||
font-family: dana;
|
||||
font-style: normal;
|
||||
font-weight: 990;
|
||||
src: url('../woff2/Dana-Fat.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
|
||||
url('../woff/Dana-Fat.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||
}
|
||||
@font-face {
|
||||
font-family: dana;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
src: url('../woff2/Dana-Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
|
||||
url('../woff/Dana-Bold.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||
}
|
||||
@font-face {
|
||||
font-family: dana;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: url('../woff2/Dana-Regular.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
|
||||
url('../woff/Dana-Regular.woff') format('woff'); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||
}
|
||||
|
||||
|
||||
248
webfonts/css/style.css
Normal file
248
webfonts/css/style.css
Normal file
@@ -0,0 +1,248 @@
|
||||
@import url(fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */
|
||||
body {
|
||||
font-family: dana !important;
|
||||
direction: rtl;
|
||||
background-color: #cdcdcd;
|
||||
margin: 0;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6,input, textarea {
|
||||
font-family: dana !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-hireline {
|
||||
font-weight: 10;
|
||||
}
|
||||
.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: 930;
|
||||
}
|
||||
.text-heavy {
|
||||
font-weight: 960;
|
||||
}
|
||||
.text-fat {
|
||||
font-weight: 990;
|
||||
}
|
||||
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 #c5ccad;
|
||||
}
|
||||
|
||||
.mainboxnegativ {
|
||||
width: 100%;
|
||||
background-color: #000000;
|
||||
display: table;
|
||||
margin-bottom: 30px;
|
||||
border-right: 8px solid #c5ccad;
|
||||
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: 21em;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
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;
|
||||
}
|
||||
472
webfonts/fonttest.html
Normal file
472
webfonts/fonttest.html
Normal file
@@ -0,0 +1,472 @@
|
||||
<head>
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=9" />
|
||||
<title>Dana</title>
|
||||
<style type="text/css" media="screen">
|
||||
@font-face { font-family: 'WOFF2 Dana-Hairline'; src: url('woff2/Dana-Hairline.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 Dana-Thin'; src: url('woff2/Dana-Thin.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 Dana-UltraLight'; src: url('woff2/Dana-UltraLight.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 Dana-Light'; src: url('woff2/Dana-Light.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 Dana-Regular'; src: url('woff2/Dana-Regular.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 Dana-Medium'; src: url('woff2/Dana-Medium.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 Dana-DemiBold'; src: url('woff2/Dana-DemiBold.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 Dana-Bold'; src: url('woff2/Dana-Bold.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 Dana-ExtraBold'; src: url('woff2/Dana-ExtraBold.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 Dana-Black'; src: url('woff2/Dana-Black.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 Dana-ExtraBlack'; src: url('woff2/Dana-ExtraBlack.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 Dana-Heavy'; src: url('woff2/Dana-Heavy.woff2'); }
|
||||
@font-face { font-family: 'WOFF2 Dana-fat'; src: url('woff2/Dana-fat.woff2'); }
|
||||
|
||||
@font-face { font-family: 'WOFF Dana-Hairline'; src: url('woff/Dana-Hairline.woff'); }
|
||||
@font-face { font-family: 'WOFF Dana-Thin'; src: url('WOFF/Dana-Thin.WOFF'); }
|
||||
@font-face { font-family: 'WOFF Dana-UltraLight'; src: url('WOFF/Dana-UltraLight.WOFF'); }
|
||||
@font-face { font-family: 'WOFF Dana-Light'; src: url('WOFF/Dana-Light.WOFF'); }
|
||||
@font-face { font-family: 'WOFF Dana-Regular'; src: url('WOFF/Dana-Regular.WOFF'); }
|
||||
@font-face { font-family: 'WOFF Dana-Medium'; src: url('WOFF/Dana-Medium.WOFF'); }
|
||||
@font-face { font-family: 'WOFF Dana-DemiBold'; src: url('WOFF/Dana-DemiBold.WOFF'); }
|
||||
@font-face { font-family: 'WOFF Dana-Bold'; src: url('WOFF/Dana-Bold.WOFF'); }
|
||||
@font-face { font-family: 'WOFF Dana-ExtraBold'; src: url('WOFF/Dana-ExtraBold.WOFF'); }
|
||||
@font-face { font-family: 'WOFF Dana-Black'; src: url('WOFF/Dana-Black.WOFF'); }
|
||||
@font-face { font-family: 'WOFF Dana-ExtraBlack'; src: url('WOFF/Dana-ExtraBlack.WOFF'); }
|
||||
@font-face { font-family: 'WOFF Dana-Heavy'; src: url('WOFF/Dana-Heavy.WOFF'); }
|
||||
@font-face { font-family: 'WOFF Dana-fat'; src: url('WOFF/Dana-fat.WOFF'); }
|
||||
|
||||
body {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
.features, .label, a, #controls {
|
||||
font: normal normal normal small sans-serif;
|
||||
}
|
||||
.features .emojiButton {
|
||||
vertical-align: -5%;
|
||||
font-size: small;
|
||||
}
|
||||
.emojiButton {
|
||||
cursor: pointer;
|
||||
}
|
||||
#flexbox {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
}
|
||||
#controls {
|
||||
flex: 0 1 auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
border: 0px solid transparent;
|
||||
height: auto;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
#metricsLine {
|
||||
background-color: #EEE;
|
||||
border-top: 1px solid #AAA;
|
||||
border-bottom: 1px solid #AAA;
|
||||
width: 100%;
|
||||
margin: 0.2em 0;
|
||||
padding: 0 0;
|
||||
font-size: 2em;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
text-overflow: none;
|
||||
display: none;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
}
|
||||
#metricsLine::-webkit-scrollbar { /* WebKit */
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
#waterfall {
|
||||
flex: 1 1 auto;
|
||||
border: 0 solid transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
color: black;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
font-family: "WOFF2 Dana-Hairline";
|
||||
font-feature-settings: "kern" on, "liga" on, "calt" on;
|
||||
-moz-font-feature-settings: "kern" on, "liga" on, "calt" on;
|
||||
-webkit-font-feature-settings: "kern" on, "liga" on, "calt" on;
|
||||
-ms-font-feature-settings: "kern" on, "liga" on, "calt" on;
|
||||
-o-font-feature-settings: "kern" on, "liga" on, "calt" on;
|
||||
}
|
||||
div, p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#waterfall p {
|
||||
margin-bottom: 0.8em;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.○ .sampletext {
|
||||
-webkit-text-stroke: 1px black;
|
||||
-webkit-text-fill-color: #FFF0;
|
||||
}
|
||||
.features, .label, a {
|
||||
color: #888;
|
||||
}
|
||||
.label {
|
||||
background-color: #ddd;
|
||||
padding: 2px 3px;
|
||||
}
|
||||
|
||||
span#p08 { font-size: 08pt; padding: 08pt 0; }
|
||||
span#p09 { font-size: 09pt; padding: 09pt 0; }
|
||||
span#p10 { font-size: 10pt; padding: 10pt 0; }
|
||||
span#p11 { font-size: 11pt; padding: 11pt 0; }
|
||||
span#p12 { font-size: 12pt; padding: 12pt 0; }
|
||||
span#p13 { font-size: 13pt; padding: 13pt 0; }
|
||||
span#p14 { font-size: 14pt; padding: 14pt 0; }
|
||||
span#p15 { font-size: 15pt; padding: 15pt 0; }
|
||||
span#p16 { font-size: 16pt; padding: 16pt 0; }
|
||||
span#largeParagraph { font-size: 32pt; padding: 32pt 0; }
|
||||
span#veryLargeParagraph { font-size: 100pt; padding: 100pt 0; }
|
||||
|
||||
.otFeatureLabel {
|
||||
color: #666;
|
||||
background-color: #ddd;
|
||||
padding: 0.2em 0.5em 0.3em 0.5em;
|
||||
margin: 0 .04em;
|
||||
line-height: 2em;
|
||||
border-radius: 0.3em;
|
||||
border: 0;
|
||||
text-align:center;
|
||||
}
|
||||
.otFeatureLabel, .otFeature {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.otFeatureLabel {
|
||||
padding: 0.2em 0.5em 0.3em 0.5em;
|
||||
margin: 0 .04em;
|
||||
line-height: 2em;
|
||||
color: #666;
|
||||
background-color: #ddd;
|
||||
border-radius: 0.3em;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
z-index: 6;
|
||||
}
|
||||
.wrapper {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
border: 0 solid transparent;
|
||||
}
|
||||
select {
|
||||
float: left;
|
||||
margin: 0 0.5em 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
input[type=text] {
|
||||
border: 1px solid #999;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.features {
|
||||
clear: left;
|
||||
}
|
||||
input[type=checkbox]:checked + label {
|
||||
visibility: visible;
|
||||
color: #fff;
|
||||
background-color: #888;
|
||||
}
|
||||
.otFeature {
|
||||
visibility: collapse;
|
||||
margin: 0 -1em 0 0;
|
||||
}
|
||||
.otFeatureLabel .tooltip {
|
||||
visibility: hidden;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 0px 5px;
|
||||
top: -2em;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
}
|
||||
.otFeatureLabel:hover .tooltip {
|
||||
visibility: visible;
|
||||
}
|
||||
#featureLine {
|
||||
display: none;
|
||||
border-bottom: 1px solid #999;
|
||||
padding: 0.5em 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* Footer paragraph: */
|
||||
#helptext {
|
||||
color: black;
|
||||
background-color: #ddd;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding: 2px;
|
||||
width: 100%;
|
||||
font: x-small sans-serif;
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: #333;
|
||||
}
|
||||
.features, .label, a, body, p, #metricsLine {
|
||||
color: white;
|
||||
}
|
||||
.label {
|
||||
background-color: black;
|
||||
padding: 2px 3px;
|
||||
}
|
||||
.otFeatureLabel, input[type=text] {
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
input[type=checkbox]:checked + label {
|
||||
color: black;
|
||||
background-color: #aaa;
|
||||
}
|
||||
#helptext {
|
||||
background-color: #777;
|
||||
}
|
||||
.○ .sampletext {
|
||||
-webkit-text-stroke: 1px white;
|
||||
-webkit-text-fill-color: #0000;
|
||||
}
|
||||
#metricsLine {
|
||||
background-color: #222;
|
||||
border-color: #777;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="document.getElementById('textInput').focus();setCharset();">
|
||||
<div id="flexbox">
|
||||
<div id="controls">
|
||||
<div>
|
||||
<select size="1" id="fontFamilySelector" name="fontFamilySelector" onchange="changeFont()">
|
||||
<option value="woff2/Dana-Hairline.woff2">WOFF2 Dana-Hairline</option>
|
||||
<option value="woff2/Dana-Thin.woff2">WOFF2 Dana-Thin</option>
|
||||
<option value="woff2/Dana-UltraLight.woff2">WOFF2 Dana-UltraLight</option>
|
||||
<option value="woff2/Dana-Light.woff2">WOFF2 Dana-Light</option>
|
||||
<option value="woff2/Dana-Regular.woff2">WOFF2 Dana-Regular</option>
|
||||
<option value="woff2/Dana-Medium.woff2">WOFF2 Dana-Medium</option>
|
||||
<option value="woff2/Dana-DemiBold.woff2">WOFF2 Dana-DemiBold</option>
|
||||
<option value="woff2/Dana-Bold.woff2">WOFF2 Dana-Bold</option>
|
||||
<option value="woff2/Dana-ExtraBold.woff2">WOFF2 Dana-ExtraBold</option>
|
||||
<option value="woff2/Dana-Black.woff2">WOFF2 Dana-Black</option>
|
||||
<option value="woff2/Dana-ExtraBlack.woff2">WOFF2 Dana-ExtraBlack</option>
|
||||
<option value="woff2/Dana-Heavy.woff2">WOFF2 Dana-Heavy</option>
|
||||
<option value="woff2/Dana-fat.woff2">WOFF2 Dana-fat</option>
|
||||
|
||||
<option value="WOFF/Dana-Hairline.WOFF">WOFF Dana-Hairline</option>
|
||||
<option value="WOFF/Dana-Thin.WOFF">WOFF Dana-Thin</option>
|
||||
<option value="WOFF/Dana-UltraLight.WOFF">WOFF Dana-UltraLight</option>
|
||||
<option value="WOFF/Dana-Light.WOFF">WOFF Dana-Light</option>
|
||||
<option value="WOFF/Dana-Regular.WOFF">WOFF Dana-Regular</option>
|
||||
<option value="WOFF/Dana-Medium.WOFF">WOFF Dana-Medium</option>
|
||||
<option value="WOFF/Dana-DemiBold.WOFF">WOFF Dana-DemiBold</option>
|
||||
<option value="WOFF/Dana-Bold.WOFF">WOFF Dana-Bold</option>
|
||||
<option value="WOFF/Dana-ExtraBold.WOFF">WOFF Dana-ExtraBold</option>
|
||||
<option value="WOFF/Dana-Black.WOFF">WOFF Dana-Black</option>
|
||||
<option value="WOFF/Dana-ExtraBlack.WOFF">WOFF Dana-ExtraBlack</option>
|
||||
<option value="WOFF/Dana-Heavy.WOFF">WOFF Dana-Heavy</option>
|
||||
<option value="WOFF/Dana-fat.WOFF">WOFF Dana-fat</option>
|
||||
</select>
|
||||
<div class="wrapper" spellcheck="false">
|
||||
<input type="text" value="Type Text Here." id="textInput" onclick="this.select();" onkeyup="updateParagraph()" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="features">
|
||||
<a href="javascript:setCharset();">Charset</a>
|
||||
<a href="javascript:setLat1();">Lat1</a>
|
||||
 
|
||||
<a href="https://caniuse.com/#feat=woff">woff</a>
|
||||
<a href="https://caniuse.com/#feat=woff2">woff2</a>
|
||||
 
|
||||
<a onclick="toggleInverse();" id="invert" class="emojiButton">🔲</a>
|
||||
<label><input type="checkbox" id="kern" value="kern" class="otFeature" onchange="updateFeatures()" checked><label for="kern" class="otFeatureLabel">kern</label>
|
||||
<label><input type="checkbox" id="liga" value="liga" class="otFeature" onchange="updateFeatures()" checked><label for="liga" class="otFeatureLabel">liga/clig</label>
|
||||
<label><input type="checkbox" id="calt" value="calt" class="otFeature" onchange="updateFeatures()" checked><label for="calt" class="otFeatureLabel">calt</label>
|
||||
<input type="checkbox" id="subs" value="subs" class="otFeature" onchange="updateFeatures()"><label for="subs" class="otFeatureLabel">subs</label>
|
||||
<input type="checkbox" id="sinf" value="sinf" class="otFeature" onchange="updateFeatures()"><label for="sinf" class="otFeatureLabel">sinf</label>
|
||||
<input type="checkbox" id="sups" value="sups" class="otFeature" onchange="updateFeatures()"><label for="sups" class="otFeatureLabel">sups</label>
|
||||
<input type="checkbox" id="numr" value="numr" class="otFeature" onchange="updateFeatures()"><label for="numr" class="otFeatureLabel">numr</label>
|
||||
<input type="checkbox" id="dnom" value="dnom" class="otFeature" onchange="updateFeatures()"><label for="dnom" class="otFeatureLabel">dnom</label>
|
||||
<input type="checkbox" id="frac" value="frac" class="otFeature" onchange="updateFeatures()"><label for="frac" class="otFeatureLabel">frac</label>
|
||||
<input type="checkbox" id="init" value="init" class="otFeature" onchange="updateFeatures()"><label for="init" class="otFeatureLabel">init</label>
|
||||
<input type="checkbox" id="medi" value="medi" class="otFeature" onchange="updateFeatures()"><label for="medi" class="otFeatureLabel">medi</label>
|
||||
<input type="checkbox" id="fina" value="fina" class="otFeature" onchange="updateFeatures()"><label for="fina" class="otFeatureLabel">fina</label>
|
||||
<input type="checkbox" id="rlig" value="rlig" class="otFeature" onchange="updateFeatures()"><label for="rlig" class="otFeatureLabel">rlig</label>
|
||||
<input type="checkbox" id="dlig" value="dlig" class="otFeature" onchange="updateFeatures()"><label for="dlig" class="otFeatureLabel">dlig</label>
|
||||
<input type="checkbox" id="ss02" value="ss02" class="otFeature" onchange="updateFeatures()"><label for="ss02" class="otFeatureLabel">ss02</label>
|
||||
<input type="checkbox" id="ss03" value="ss03" class="otFeature" onchange="updateFeatures()"><label for="ss03" class="otFeatureLabel">ss03</label>
|
||||
<label><input type="checkbox" value="show" onchange="updateFeatures();document.getElementById('featureLine').style.display=this.checked?'block':'none'">CSS</label>
|
||||
<label><input type="checkbox" value="show" onchange="updateFeatures();document.getElementById('metricsLine').style.display=this.checked?'block':'none'">Metrics</label>
|
||||
</p>
|
||||
<p class="features" id="featureLine">font-feature-settings: "kern" on, "liga" on, "calt" on;</p>
|
||||
</div>
|
||||
<div id="waterfall" class="●">
|
||||
<div id="metricsLine"></div>
|
||||
<p><span class="label">08</span> <span class="sampletext" id="p08"></span></p>
|
||||
<p><span class="label">09</span> <span class="sampletext" id="p09"></span></p>
|
||||
<p><span class="label">10</span> <span class="sampletext" id="p10"></span></p>
|
||||
<p><span class="label">11</span> <span class="sampletext" id="p11"></span></p>
|
||||
<p><span class="label">12</span> <span class="sampletext" id="p12"></span></p>
|
||||
<p><span class="label">13</span> <span class="sampletext" id="p13"></span></p>
|
||||
<p><span class="label">14</span> <span class="sampletext" id="p14"></span></p>
|
||||
<p><span class="label">15</span> <span class="sampletext" id="p15"></span></p>
|
||||
<p><span class="label">16</span> <span class="sampletext" id="p16"></span></p>
|
||||
<p><span class="sampletext" id="largeParagraph"></span></p>
|
||||
<p><span class="sampletext" id="veryLargeParagraph"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Disclaimer -->
|
||||
<p id="helptext" onmouseleave="vanish(this);">
|
||||
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.
|
||||
</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
const selector = document.getElementById("fontFamilySelector");
|
||||
const selectorOptions = selector.options;
|
||||
const selectorLength = selectorOptions.length;
|
||||
|
||||
document.addEventListener('keyup', keyAnalysis);
|
||||
|
||||
function keyAnalysis(event) {
|
||||
if (event.ctrlKey) {
|
||||
if (event.code == 'KeyR') {
|
||||
setCharset();
|
||||
} else if (event.code == 'KeyL') {
|
||||
setLat1();
|
||||
} else if (event.code == 'KeyJ') {
|
||||
toggleLeftRight();
|
||||
} else if (event.code == 'Period') {
|
||||
selector.selectedIndex = (selector.selectedIndex + 1) % selectorLength;
|
||||
changeFont();
|
||||
} else if (event.code == 'Comma') {
|
||||
var newIndex = selector.selectedIndex - 1;
|
||||
if (newIndex<0) {
|
||||
newIndex = selectorLength - 1;
|
||||
}
|
||||
selector.selectedIndex = newIndex;
|
||||
changeFont();
|
||||
}
|
||||
}
|
||||
}
|
||||
function updateParagraph() {
|
||||
// update paragraph text based on user input:
|
||||
const txt = document.getElementById('textInput');
|
||||
const paragraphs = document.getElementsByClassName('sampletext');
|
||||
for (i = 0; i < paragraphs.length; i++) {
|
||||
paragraph = paragraphs[i];
|
||||
paragraph.textContent = txt.value;
|
||||
}
|
||||
|
||||
// update other elements:
|
||||
document.getElementById('metricsLine').textContent = txt.value;
|
||||
}
|
||||
function updateFeatures() {
|
||||
// update features based on user input:
|
||||
// first, get feature on/off line:
|
||||
var cssCode = "";
|
||||
var codeLine = "";
|
||||
var checkboxes = document.getElementsByClassName("otFeature")
|
||||
for (i = 0; i < checkboxes.length; i++) {
|
||||
var checkbox = checkboxes[i];
|
||||
codeLine += '"'+checkbox.id+'" ';
|
||||
codeLine += checkbox.checked ? 'on, ' : 'off, ';
|
||||
if (checkbox.name=="kern") {
|
||||
cssCode += "font-kerning: "
|
||||
cssCode += checkbox.checked ? 'normal; ' : 'none; ';
|
||||
} else if (checkbox.name=="liga") {
|
||||
codeLine += '"clig" '
|
||||
codeLine += checkbox.checked ? 'on, ' : 'off, ';
|
||||
cssCode += "font-variant-ligatures: "
|
||||
cssCode += checkbox.checked ? 'common-ligatures contextual; ' : 'no-common-ligatures no-contextual; ';
|
||||
} else if (checkbox.name=="dlig") {
|
||||
cssCode += "font-variant-ligatures: "
|
||||
cssCode += checkbox.checked ? 'discretionary-ligatures; ' : 'no-discretionary-ligatures; ';
|
||||
} else if (checkbox.name=="hlig") {
|
||||
cssCode += "font-variant-ligatures: "
|
||||
cssCode += checkbox.checked ? 'historical-ligatures; ' : 'no-historical-ligatures; ';
|
||||
}
|
||||
}
|
||||
codeLine = codeLine.slice(0, -2)
|
||||
|
||||
// then, apply line for every browser:
|
||||
const prefixes = ["","-moz-","-webkit-","-ms-","-o-",];
|
||||
const suffix = "font-feature-settings: "
|
||||
for (i = 0; i < prefixes.length; i++) {
|
||||
var prefix = prefixes[i];
|
||||
cssCode += prefix
|
||||
cssCode += suffix
|
||||
cssCode += codeLine
|
||||
cssCode += "; "
|
||||
}
|
||||
|
||||
document.getElementById('waterfall').style.cssText = cssCode;
|
||||
document.getElementById('featureLine').innerHTML = cssCode.replace(/;/g,";<br/>");
|
||||
changeFont();
|
||||
}
|
||||
function changeFont() {
|
||||
var selected_index = selector.selectedIndex;
|
||||
var selected_option_text = selector.options[selected_index].text;
|
||||
document.getElementById('waterfall').style.fontFamily = selected_option_text;
|
||||
}
|
||||
function setDefaultText(defaultText) {
|
||||
document.getElementById('textInput').value = decodeEntities(defaultText);
|
||||
updateParagraph();
|
||||
}
|
||||
function setLat1() {
|
||||
const lat1 = "تَوانا بُوَد هرکه دانا بُوَد";
|
||||
return setDefaultText(lat1);
|
||||
}
|
||||
function setCharset() {
|
||||
const completeCharSet = 'تَوانا بُوَد هرکه دانا بُوَد';
|
||||
setDefaultText(completeCharSet);
|
||||
}
|
||||
function decodeEntities(string){
|
||||
var elem = document.createElement('div');
|
||||
elem.innerHTML = string;
|
||||
return elem.textContent;
|
||||
}
|
||||
function vanish(item) {
|
||||
item.style.setProperty("display", "none");
|
||||
}
|
||||
function toggleLeftRight() {
|
||||
const waterfall = document.getElementById("waterfall");
|
||||
if (waterfall.dir != "rtl") {
|
||||
waterfall.dir = "rtl";
|
||||
waterfall.align = "right";
|
||||
} else {
|
||||
waterfall.dir = "";
|
||||
waterfall.align = "";
|
||||
}
|
||||
}
|
||||
function toggleInverse() {
|
||||
const testText = document.getElementById("waterfall");
|
||||
if (testText) {
|
||||
const link = document.getElementById("invert");
|
||||
if (testText.className == "●") {
|
||||
testText.className = "○";
|
||||
link.textContent = "🔳";
|
||||
} else {
|
||||
testText.className = "●";
|
||||
link.textContent = "🔲";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
BIN
webfonts/letter-spacing.png
Normal file
BIN
webfonts/letter-spacing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
webfonts/woff/Dana-Black.woff
Normal file
BIN
webfonts/woff/Dana-Black.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/Dana-Bold.woff
Normal file
BIN
webfonts/woff/Dana-Bold.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/Dana-DemiBold.woff
Normal file
BIN
webfonts/woff/Dana-DemiBold.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/Dana-ExtraBlack.woff
Normal file
BIN
webfonts/woff/Dana-ExtraBlack.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/Dana-ExtraBold.woff
Normal file
BIN
webfonts/woff/Dana-ExtraBold.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/Dana-Hairline.woff
Normal file
BIN
webfonts/woff/Dana-Hairline.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/Dana-Heavy.woff
Normal file
BIN
webfonts/woff/Dana-Heavy.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/Dana-Light.woff
Normal file
BIN
webfonts/woff/Dana-Light.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/Dana-Medium.woff
Normal file
BIN
webfonts/woff/Dana-Medium.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/Dana-Regular.woff
Normal file
BIN
webfonts/woff/Dana-Regular.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/Dana-Thin.woff
Normal file
BIN
webfonts/woff/Dana-Thin.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/Dana-UltraLight.woff
Normal file
BIN
webfonts/woff/Dana-UltraLight.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/Dana-fat.woff
Normal file
BIN
webfonts/woff/Dana-fat.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Black.ttf
Normal file
BIN
webfonts/woff/DanaFaNum-Black.ttf
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Black.woff
Normal file
BIN
webfonts/woff/DanaFaNum-Black.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Bold.ttf
Normal file
BIN
webfonts/woff/DanaFaNum-Bold.ttf
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Bold.woff
Normal file
BIN
webfonts/woff/DanaFaNum-Bold.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-DemiBold.ttf
Normal file
BIN
webfonts/woff/DanaFaNum-DemiBold.ttf
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-DemiBold.woff
Normal file
BIN
webfonts/woff/DanaFaNum-DemiBold.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-ExtraBlack.ttf
Normal file
BIN
webfonts/woff/DanaFaNum-ExtraBlack.ttf
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-ExtraBlack.woff
Normal file
BIN
webfonts/woff/DanaFaNum-ExtraBlack.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-ExtraBold.ttf
Normal file
BIN
webfonts/woff/DanaFaNum-ExtraBold.ttf
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-ExtraBold.woff
Normal file
BIN
webfonts/woff/DanaFaNum-ExtraBold.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Fat.ttf
Normal file
BIN
webfonts/woff/DanaFaNum-Fat.ttf
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Hairline.ttf
Normal file
BIN
webfonts/woff/DanaFaNum-Hairline.ttf
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Hairline.woff
Normal file
BIN
webfonts/woff/DanaFaNum-Hairline.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Heavy.ttf
Normal file
BIN
webfonts/woff/DanaFaNum-Heavy.ttf
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Heavy.woff
Normal file
BIN
webfonts/woff/DanaFaNum-Heavy.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Light.ttf
Normal file
BIN
webfonts/woff/DanaFaNum-Light.ttf
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Light.woff
Normal file
BIN
webfonts/woff/DanaFaNum-Light.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Medium.ttf
Normal file
BIN
webfonts/woff/DanaFaNum-Medium.ttf
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Medium.woff
Normal file
BIN
webfonts/woff/DanaFaNum-Medium.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Regular.ttf
Normal file
BIN
webfonts/woff/DanaFaNum-Regular.ttf
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Regular.woff
Normal file
BIN
webfonts/woff/DanaFaNum-Regular.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Thin.ttf
Normal file
BIN
webfonts/woff/DanaFaNum-Thin.ttf
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-Thin.woff
Normal file
BIN
webfonts/woff/DanaFaNum-Thin.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-UltraLight.ttf
Normal file
BIN
webfonts/woff/DanaFaNum-UltraLight.ttf
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-UltraLight.woff
Normal file
BIN
webfonts/woff/DanaFaNum-UltraLight.woff
Normal file
Binary file not shown.
BIN
webfonts/woff/DanaFaNum-fat.woff
Normal file
BIN
webfonts/woff/DanaFaNum-fat.woff
Normal file
Binary file not shown.
BIN
webfonts/woff2/Dana-Black.woff2
Normal file
BIN
webfonts/woff2/Dana-Black.woff2
Normal file
Binary file not shown.
BIN
webfonts/woff2/Dana-Bold.woff2
Normal file
BIN
webfonts/woff2/Dana-Bold.woff2
Normal file
Binary file not shown.
BIN
webfonts/woff2/Dana-DemiBold.woff2
Normal file
BIN
webfonts/woff2/Dana-DemiBold.woff2
Normal file
Binary file not shown.
BIN
webfonts/woff2/Dana-ExtraBlack.woff2
Normal file
BIN
webfonts/woff2/Dana-ExtraBlack.woff2
Normal file
Binary file not shown.
BIN
webfonts/woff2/Dana-ExtraBold.woff2
Normal file
BIN
webfonts/woff2/Dana-ExtraBold.woff2
Normal file
Binary file not shown.
BIN
webfonts/woff2/Dana-Hairline.woff2
Normal file
BIN
webfonts/woff2/Dana-Hairline.woff2
Normal file
Binary file not shown.
BIN
webfonts/woff2/Dana-Heavy.woff2
Normal file
BIN
webfonts/woff2/Dana-Heavy.woff2
Normal file
Binary file not shown.
BIN
webfonts/woff2/Dana-Light.woff2
Normal file
BIN
webfonts/woff2/Dana-Light.woff2
Normal file
Binary file not shown.
BIN
webfonts/woff2/Dana-Medium.woff2
Normal file
BIN
webfonts/woff2/Dana-Medium.woff2
Normal file
Binary file not shown.
BIN
webfonts/woff2/Dana-Regular.woff2
Normal file
BIN
webfonts/woff2/Dana-Regular.woff2
Normal file
Binary file not shown.
BIN
webfonts/woff2/Dana-Thin.woff2
Normal file
BIN
webfonts/woff2/Dana-Thin.woff2
Normal file
Binary file not shown.
BIN
webfonts/woff2/Dana-UltraLight.woff2
Normal file
BIN
webfonts/woff2/Dana-UltraLight.woff2
Normal file
Binary file not shown.
BIN
webfonts/woff2/Dana-fat.woff2
Normal file
BIN
webfonts/woff2/Dana-fat.woff2
Normal file
Binary file not shown.
BIN
webfonts/woff2/DanaFaNum-Black.woff2
Normal file
BIN
webfonts/woff2/DanaFaNum-Black.woff2
Normal file
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user