reza changed gitignore

temp
Reza_ashrafi 3 years ago
parent 0b2c4e4ab1
commit 888d26a69e
  1. 1
      .gitignore
  2. BIN
      src/assets/font/IranSansX/Farsi/Black.ttf
  3. BIN
      src/assets/font/IranSansX/Farsi/Bold.ttf
  4. BIN
      src/assets/font/IranSansX/Farsi/DemiBold.ttf
  5. BIN
      src/assets/font/IranSansX/Farsi/ExtraBold.ttf
  6. BIN
      src/assets/font/IranSansX/Farsi/Light.ttf
  7. BIN
      src/assets/font/IranSansX/Farsi/Medium.ttf
  8. BIN
      src/assets/font/IranSansX/Farsi/Otf fonts/IRANSansXFaNum-Black.otf
  9. BIN
      src/assets/font/IranSansX/Farsi/Otf fonts/IRANSansXFaNum-Bold.otf
  10. BIN
      src/assets/font/IranSansX/Farsi/Otf fonts/IRANSansXFaNum-DemiBold.otf
  11. BIN
      src/assets/font/IranSansX/Farsi/Otf fonts/IRANSansXFaNum-ExtraBold.otf
  12. BIN
      src/assets/font/IranSansX/Farsi/Otf fonts/IRANSansXFaNum-Light.otf
  13. BIN
      src/assets/font/IranSansX/Farsi/Otf fonts/IRANSansXFaNum-Medium.otf
  14. BIN
      src/assets/font/IranSansX/Farsi/Otf fonts/IRANSansXFaNum-Regular.otf
  15. BIN
      src/assets/font/IranSansX/Farsi/Otf fonts/IRANSansXFaNum-Thin.otf
  16. BIN
      src/assets/font/IranSansX/Farsi/Otf fonts/IRANSansXFaNum-UltraLight.otf
  17. BIN
      src/assets/font/IranSansX/Farsi/Regular.ttf
  18. BIN
      src/assets/font/IranSansX/Farsi/Thin.ttf
  19. BIN
      src/assets/font/IranSansX/Farsi/UltraLight.ttf
  20. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff/IRANSansXFaNum-Black.woff
  21. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff/IRANSansXFaNum-Bold.woff
  22. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff/IRANSansXFaNum-DemiBold.woff
  23. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff/IRANSansXFaNum-ExtraBold.woff
  24. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff/IRANSansXFaNum-Light.woff
  25. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff/IRANSansXFaNum-Medium.woff
  26. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff/IRANSansXFaNum-Regular.woff
  27. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff/IRANSansXFaNum-Thin.woff
  28. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff/IRANSansXFaNum-UltraLight.woff
  29. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff2/IRANSansXFaNum-Black.woff2
  30. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff2/IRANSansXFaNum-Bold.woff2
  31. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff2/IRANSansXFaNum-DemiBold.woff2
  32. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff2/IRANSansXFaNum-ExtraBold.woff2
  33. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff2/IRANSansXFaNum-Light.woff2
  34. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff2/IRANSansXFaNum-Medium.woff2
  35. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff2/IRANSansXFaNum-Regular.woff2
  36. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff2/IRANSansXFaNum-Thin.woff2
  37. BIN
      src/assets/font/IranSansX/Farsi/Webfonts/Woff2/IRANSansXFaNum-UltraLight.woff2
  38. 448
      src/assets/font/IranSansX/Farsi/Webfonts/fonttest.html
  39. BIN
      src/assets/font/IranSansX/Helps/alternateHelp.png
  40. BIN
      src/assets/font/IranSansX/Helps/stylestic set.gif
  41. BIN
      src/assets/font/IranSansX/IranSansX fonts.pdf
  42. BIN
      src/assets/font/IranSansX/NonEnglish/IRANSansXNoEn-Black.ttf
  43. BIN
      src/assets/font/IranSansX/NonEnglish/IRANSansXNoEn-Bold.ttf
  44. BIN
      src/assets/font/IranSansX/NonEnglish/IRANSansXNoEn-DemiBold.ttf
  45. BIN
      src/assets/font/IranSansX/NonEnglish/IRANSansXNoEn-ExtraBold.ttf
  46. BIN
      src/assets/font/IranSansX/NonEnglish/IRANSansXNoEn-Light.ttf
  47. BIN
      src/assets/font/IranSansX/NonEnglish/IRANSansXNoEn-Medium.ttf
  48. BIN
      src/assets/font/IranSansX/NonEnglish/IRANSansXNoEn-Regular.ttf
  49. BIN
      src/assets/font/IranSansX/NonEnglish/IRANSansXNoEn-Thin.ttf
  50. BIN
      src/assets/font/IranSansX/NonEnglish/IRANSansXNoEn-UltraLight.ttf
  51. 447
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/fonttest.html
  52. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff/IRANSansXNoEn-Black.woff
  53. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff/IRANSansXNoEn-Bold.woff
  54. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff/IRANSansXNoEn-DemiBold.woff
  55. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff/IRANSansXNoEn-ExtraBold.woff
  56. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff/IRANSansXNoEn-Light.woff
  57. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff/IRANSansXNoEn-Medium.woff
  58. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff/IRANSansXNoEn-Regular.woff
  59. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff/IRANSansXNoEn-Thin.woff
  60. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff/IRANSansXNoEn-UltraLight.woff
  61. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff2/IRANSansXNoEn-Black.woff2
  62. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff2/IRANSansXNoEn-Bold.woff2
  63. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff2/IRANSansXNoEn-DemiBold.woff2
  64. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff2/IRANSansXNoEn-ExtraBold.woff2
  65. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff2/IRANSansXNoEn-Light.woff2
  66. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff2/IRANSansXNoEn-Medium.woff2
  67. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff2/IRANSansXNoEn-Regular.woff2
  68. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff2/IRANSansXNoEn-Thin.woff2
  69. BIN
      src/assets/font/IranSansX/NonEnglish/Webfont NonEn/woff2/IRANSansXNoEn-UltraLight.woff2
  70. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/About_Different_formats.pdf
  71. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/About_Different_formats.png
  72. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/English to Farsi numbers help.pdf
  73. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/Farsi_numerals.png
  74. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/IRANSans(FaNum).ttf
  75. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/IRANSans(FaNum)_Black.ttf
  76. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/IRANSans(FaNum)_Bold.ttf
  77. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/IRANSans(FaNum)_Light.ttf
  78. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/IRANSans(FaNum)_Medium.ttf
  79. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/IRANSans(FaNum)_UltraLight.ttf
  80. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/MobileFonts/IRANSansMobile(FaNum).ttf
  81. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/MobileFonts/IRANSansMobile(FaNum)_Black.ttf
  82. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/MobileFonts/IRANSansMobile(FaNum)_Bold.ttf
  83. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/MobileFonts/IRANSansMobile(FaNum)_Light.ttf
  84. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/MobileFonts/IRANSansMobile(FaNum)_Medium.ttf
  85. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/MobileFonts/IRANSansMobile(FaNum)_UltraLight.ttf
  86. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/MobileFonts/MobileFonts.png
  87. 281
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/webFonts/IRANSans.html
  88. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/webFonts/WebFonts.png
  89. 78
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/webFonts/css/fontiran.css
  90. 190
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/webFonts/css/style.css
  91. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/webFonts/fonts/eot/IRANSansWeb(FaNum).eot
  92. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/webFonts/fonts/eot/IRANSansWeb(FaNum)_Black.eot
  93. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/webFonts/fonts/eot/IRANSansWeb(FaNum)_Bold.eot
  94. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/webFonts/fonts/eot/IRANSansWeb(FaNum)_Light.eot
  95. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/webFonts/fonts/eot/IRANSansWeb(FaNum)_Medium.eot
  96. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/webFonts/fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot
  97. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/webFonts/fonts/ttf/IRANSansWeb(FaNum).ttf
  98. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/webFonts/fonts/ttf/IRANSansWeb(FaNum)_Black.ttf
  99. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/webFonts/fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf
  100. BIN
      src/assets/font/IranSansX/Old version/IRANSans5.5 (No support)/Farsi_numerals/webFonts/fonts/ttf/IRANSansWeb(FaNum)_Light.ttf
  101. Some files were not shown because too many files have changed in this diff Show More

1
.gitignore vendored

@ -7,7 +7,6 @@
# testing
/coverage
/src/assets/font
# production
/build

@ -0,0 +1,448 @@
<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>IRANSansXFaNum</title>
<style type="text/css" media="screen">
@font-face { font-family: 'WOFF IRANSansXFaNum-Thin'; src: url('woff/IRANSansXFaNum-Thin.woff'); }
@font-face { font-family: 'WOFF IRANSansXFaNum-UltraLight'; src: url('woff/IRANSansXFaNum-UltraLight.woff'); }
@font-face { font-family: 'WOFF IRANSansXFaNum-Light'; src: url('woff/IRANSansXFaNum-Light.woff'); }
@font-face { font-family: 'WOFF IRANSansXFaNum-Regular'; src: url('woff/IRANSansXFaNum-Regular.woff'); }
@font-face { font-family: 'WOFF IRANSansXFaNum-Medium'; src: url('woff/IRANSansXFaNum-Medium.woff'); }
@font-face { font-family: 'WOFF IRANSansXFaNum-DemiBold'; src: url('woff/IRANSansXFaNum-DemiBold.woff'); }
@font-face { font-family: 'WOFF IRANSansXFaNum-Bold'; src: url('woff/IRANSansXFaNum-Bold.woff'); }
@font-face { font-family: 'WOFF IRANSansXFaNum-ExtraBold'; src: url('woff/IRANSansXFaNum-ExtraBold.woff'); }
@font-face { font-family: 'WOFF IRANSansXFaNum-Black'; src: url('woff/IRANSansXFaNum-Black.woff'); }
@font-face { font-family: 'WOFF2 IRANSansXFaNum-Thin'; src: url('woff2/IRANSansXFaNum-Thin.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXFaNum-UltraLight'; src: url('woff2/IRANSansXFaNum-UltraLight.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXFaNum-Light'; src: url('woff2/IRANSansXFaNum-Light.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXFaNum-Regular'; src: url('woff2/IRANSansXFaNum-Regular.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXFaNum-Medium'; src: url('wof2f/IRANSansXFaNum-Medium.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXFaNum-DemiBold'; src: url('woff2/IRANSansXFaNum-DemiBold.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXFaNum-Bold'; src: url('woff2/IRANSansXFaNum-Bold.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXFaNum-ExtraBold'; src: url('woff2/IRANSansXFaNum-ExtraBold.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXFaNum-Black'; src: url('woff2/IRANSansXFaNum-Black.woff2'); }
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: "WOFF IRANSansXFaNum-Thin";
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="IRANSansXFaNum-Thin.woff">WOFF IRANSansXFaNum-Thin</option>
<option value="IRANSansXFaNum-UltraLight.woff">WOFF IRANSansXFaNum-UltraLight</option>
<option value="IRANSansXFaNum-Light.woff">WOFF IRANSansXFaNum-Light</option>
<option value="IRANSansXFaNum-Regular.woff">WOFF IRANSansXFaNum-Regular</option>
<option value="IRANSansXFaNum-Medium.woff">WOFF IRANSansXFaNum-Medium</option>
<option value="IRANSansXFaNum-DemiBold.woff">WOFF IRANSansXFaNum-DemiBold</option>
<option value="IRANSansXFaNum-Bold.woff">WOFF IRANSansXFaNum-Bold</option>
<option value="IRANSansXFaNum-ExtraBold.woff">WOFF IRANSansXFaNum-ExtraBold</option>
<option value="IRANSansXFaNum-Black.woff">WOFF IRANSansXFaNum-Black</option>
<option value="IRANSansXFaNum-Thin.woff2">WOFF2 IRANSansXFaNum-Thin</option>
<option value="IRANSansXFaNum-UltraLight.woff2">WOFF2 IRANSansXFaNum-UltraLight</option>
<option value="IRANSansXFaNum-Light.woff2">WOFF2 IRANSansXFaNum-Light</option>
<option value="IRANSansXFaNum-Regular.woff2">WOFF2 IRANSansXFaNum-Regular</option>
<option value="IRANSansXFaNum-Medium.woff2">WOFF2 IRANSansXFaNum-Medium</option>
<option value="IRANSansXFaNum-DemiBold.woff2">WOFF2 IRANSansXFaNum-DemiBold</option>
<option value="IRANSansXFaNum-Bold.woff2">WOFF2 IRANSansXFaNum-Bold</option>
<option value="IRANSansXFaNum-ExtraBold.woff2">WOFF2 IRANSansXFaNum-ExtraBold</option>
<option value="IRANSansXFaNum-Black.woff2">WOFF2 IRANSansXFaNum-Black</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>
&ensp;
<a href="https://caniuse.com/#feat=woff">woff</a>
<a href="https://caniuse.com/#feat=woff2">woff2</a>
&ensp;
<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="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>&nbsp;<span class="sampletext" id="p08"></span></p>
<p><span class="label">09</span>&nbsp;<span class="sampletext" id="p09"></span></p>
<p><span class="label">10</span>&nbsp;<span class="sampletext" id="p10"></span></p>
<p><span class="label">11</span>&nbsp;<span class="sampletext" id="p11"></span></p>
<p><span class="label">12</span>&nbsp;<span class="sampletext" id="p12"></span></p>
<p><span class="label">13</span>&nbsp;<span class="sampletext" id="p13"></span></p>
<p><span class="label">14</span>&nbsp;<span class="sampletext" id="p14"></span></p>
<p><span class="label">15</span>&nbsp;<span class="sampletext" id="p15"></span></p>
<p><span class="label">16</span>&nbsp;<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 &Agrave;&Aacute;&Acirc;&Atilde;&Auml;&Aring;&AElig;&Ccedil;&Egrave;&Eacute;&Ecirc;&Euml;&Igrave;&Iacute;&Icirc;&Iuml;&ETH;&Ntilde;&Ograve;&Oacute;&Ocirc;&Otilde;&Ouml;&Oslash;&OElig;&THORN;&Ugrave;&Uacute;&Ucirc;&Uuml;&Yacute;&Yuml; &agrave;&aacute;&acirc;&atilde;&auml;&aring;&aelig;&ccedil;&egrave;&eacute;&ecirc;&euml;&igrave;&iacute;&icirc;&iuml;&eth;&ntilde;&ograve;&oacute;&ocirc;&otilde;&ouml;&oslash;&oelig;&thorn;&szlig;&ugrave;&uacute;&ucirc;&uuml;&yacute;&yuml; .,:;&middot;&hellip;&iquest;?&iexcl;!&laquo;&raquo;&lsaquo;&rsaquo; /|&brvbar;\()[]{}_-&ndash;&mdash;&sbquo;&bdquo;&lsquo;&rsquo;&ldquo;&rdquo;&quot;&#x27; #&amp;&sect;@&bull;&shy;*&dagger;&Dagger;&para; +&times;&divide;&plusmn;=&lt;&gt;&not;&mu; ^~&acute;`&circ;&macr;&tilde;&uml;&cedil; &yen;&euro;&pound;$&cent;&curren;&fnof; &trade;&reg;&copy; 1234567890 &ordf;&ordm;&deg;%&permil; &sup1;&sup2;&sup3;&frac14;&frac12;&frac34;";
return setDefaultText(lat1);
}
function setCharset() {
const completeCharSet = '&#x0041;&#x0042;&#x0043;&#x0044;&#x0045;&#x0046;&#x0047;&#x0048;&#x0049;&#x004A;&#x004B;&#x004C;&#x004D;&#x004E;&#x004F;&#x0050;&#x0051;&#x0052;&#x0053;&#x0054;&#x0055;&#x0056;&#x0057;&#x0058;&#x0059;&#x005A;&#x0061;&#x0062;&#x0063;&#x0064;&#x0065;&#x0066;&#x0067;&#x0068;&#x0069;&#x006A;&#x006B;&#x006C;&#x006D;&#x006E;&#x006F;&#x0070;&#x0071;&#x0072;&#x0073;&#x0074;&#x0075;&#x0076;&#x0077;&#x0078;&#x0079;&#x007A;&#x0621;&#x0627;&#xFE8E;&#x0623;&#xFE84;&#x0625;&#xFE88;&#x0622;&#xFE82;&#x0671;&#xFB51;&#x066E;&#x0628;&#xFE90;&#xFE92;&#xFE91;&#x067E;&#xFB57;&#xFB59;&#xFB58;&#x062A;&#xFE96;&#xFE98;&#xFE97;&#x062B;&#xFE9A;&#xFE9C;&#xFE9B;&#x0679;&#xFB67;&#xFB69;&#xFB68;&#x062C;&#xFE9E;&#xFEA0;&#xFE9F;&#x0686;&#xFB7B;&#xFB7D;&#xFB7C;&#x062D;&#xFEA2;&#xFEA4;&#xFEA3;&#x062E;&#xFEA6;&#xFEA8;&#xFEA7;&#x062F;&#xFEAA;&#x0630;&#xFEAC;&#x0688;&#xFB89;&#x0631;&#xFEAE;&#x0632;&#xFEB0;&#x0691;&#xFB8D;&#x0695;&#x0698;&#xFB8B;&#x0633;&#xFEB2;&#xFEB4;&#xFEB3;&#x0634;&#xFEB6;&#xFEB8;&#xFEB7;&#x0635;&#xFEBA;&#xFEBC;&#xFEBB;&#x0636;&#xFEBE;&#xFEC0;&#xFEBF;&#x0637;&#xFEC2;&#xFEC4;&#xFEC3;&#x0638;&#xFEC6;&#xFEC8;&#xFEC7;&#x0639;&#xFECA;&#xFECC;&#xFECB;&#x063A;&#xFECE;&#xFED0;&#xFECF;&#x0641;&#xFED2;&#xFED4;&#xFED3;&#x06A4;&#xFB6B;&#xFB6D;&#xFB6C;&#x06A1;&#x066F;&#x0642;&#xFED6;&#xFED8;&#xFED7;&#x0643;&#xFEDA;&#xFEDC;&#xFEDB;&#x06A9;&#xFB8F;&#xFB91;&#xFB90;&#x06AF;&#xFB93;&#xFB95;&#xFB94;&#x06AA;&#x0644;&#xFEDE;&#xFEE0;&#xFEDF;&#x06B5;&#x0645;&#xFEE2;&#xFEE4;&#xFEE3;&#x0646;&#xFEE6;&#xFEE8;&#xFEE7;&#x06BA;&#xFB9F;&#x0647;&#xFEEA;&#xFEEC;&#xFEEB;&#x06C0;&#xFBA5;&#x06C1;&#xFBA7;&#xFBA9;&#xFBA8;&#x06C2;&#x06BE;&#xFBAB;&#xFBAD;&#xFBAC;&#x0629;&#xFE94;&#x06C3;&#x0648;&#xFEEE;&#x0624;&#xFE86;&#x06C6;&#xFBDA;&#x06C7;&#xFBD8;&#x06C9;&#xFBE3;&#x0649;&#xFEF0;&#x064A;&#xFEF2;&#xFEF4;&#xFEF3;&#x0626;&#xFE8A;&#xFE8C;&#xFE8B;&#x06CE;&#x06CC;&#xFBFD;&#xFBFF;&#xFBFE;&#x06D2;&#xFBAF;&#x06D3;&#xFBB1;&#x06D5;&#x0640;&#xFEFB;&#xFEFC;&#xFEF7;&#xFEF8;&#xFEF9;&#xFEFA;&#xFEF5;&#xFEF6;&#x066B;&#x066C;&#x0660;&#x0661;&#x0662;&#x0663;&#x0664;&#x0665;&#x0666;&#x0667;&#x0668;&#x0669;&#x06F0;&#x06F1;&#x06F2;&#x06F3;&#x06F4;&#x06F5;&#x06F6;&#x06F7;&#x06F8;&#x06F9;&#x0030;&#x0031;&#x0032;&#x0033;&#x0034;&#x0035;&#x0036;&#x0037;&#x0038;&#x0039;&#x000D;&#xFEFF;&#x200A;&#x0020;&#x00A0;&#x2009;&#x200B;&#x06D4;&#x060C;&#x061B;&#x061F;&#x066D;&#xFD3E;&#xFD3F;&#x002E;&#x002C;&#x003A;&#x003B;&#x2026;&#x0021;&#x003F;&#x2022;&#x002A;&#x0023;&#x002F;&#x005C;&#x002D;&#x005F;&#x0028;&#x0029;&#x007B;&#x007D;&#x005B;&#x005D;&#x201E;&#x201C;&#x201D;&#x2018;&#x2019;&#x00AB;&#x00BB;&#x2039;&#x203A;&#x0022;&#x0027;&#xFDFC;&#x066A;&#x0040;&#x0026;&#x00A9;&#x00AE;&#x2122;&#x00B0;&#x2032;&#x2033;&#x007C;&#x00A6;&#x0024;&#x002B;&#x2212;&#x00D7;&#x00F7;&#x003D;&#x2260;&#x003E;&#x003C;&#x2265;&#x2264;&#x00B1;&#x2248;&#x007E;&#x00AC;&#x005E;&#x221E;&#x222B;&#x220F;&#x2211;&#x221A;&#x00B5;&#x2202;&#x0025;&#x2215; &#x200E; &#x200F; &#x200D; &#x200C; &#x0615; &#x0670; &#x0656; &#x0654; &#x0655; &#x064B; &#x064C; &#x064D; &#x064E; &#x064F; &#x0650; &#x0651; &#x0652; &#x0653; &#x0658; &#x065A; &#x065B; &#xFBB2; &#xFBB3; &#xFBB4; &#xFBB5; &#xFBB6; &#xFBB9;';
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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 452 KiB

@ -0,0 +1,447 @@
<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>IRANSansXNoEn</title>
<style type="text/css" media="screen">
@font-face { font-family: 'WOFF IRANSansXNoEn-Thin'; src: url('woff/IRANSansXNoEn-Thin.woff'); }
@font-face { font-family: 'WOFF IRANSansXNoEn-UltraLight'; src: url('woff/IRANSansXNoEn-UltraLight.woff'); }
@font-face { font-family: 'WOFF IRANSansXNoEn-Light'; src: url('woff/IRANSansXNoEn-Light.woff'); }
@font-face { font-family: 'WOFF IRANSansXNoEn-Regular'; src: url('woff/IRANSansXNoEn-Regular.woff'); }
@font-face { font-family: 'WOFF IRANSansXNoEn-Medium'; src: url('woff/IRANSansXNoEn-Medium.woff'); }
@font-face { font-family: 'WOFF IRANSansXNoEn-DemiBold'; src: url('woff/IRANSansXNoEn-DemiBold.woff'); }
@font-face { font-family: 'WOFF IRANSansXNoEn-Bold'; src: url('woff/IRANSansXNoEn-Bold.woff'); }
@font-face { font-family: 'WOFF IRANSansXNoEn-ExtraBold'; src: url('woff/IRANSansXNoEn-ExtraBold.woff'); }
@font-face { font-family: 'WOFF IRANSansXNoEn-Black'; src: url('woff/IRANSansXNoEn-Black.woff'); }
@font-face { font-family: 'WOFF2 IRANSansXNoEn-Thin'; src: url('woff2/IRANSansXNoEn-Thin.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXNoEn-UltraLight'; src: url('woff2/IRANSansXNoEn-UltraLight.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXNoEn-Light'; src: url('woff2/IRANSansXNoEn-Light.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXNoEn-Regular'; src: url('woff2/IRANSansXNoEn-Regular.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXNoEn-Medium'; src: url('woff2/IRANSansXNoEn-Medium.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXNoEn-DemiBold'; src: url('woff2/IRANSansXNoEn-DemiBold.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXNoEn-Bold'; src: url('woff2/IRANSansXNoEn-Bold.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXNoEn-ExtraBold'; src: url('woff2/IRANSansXNoEn-ExtraBold.woff2'); }
@font-face { font-family: 'WOFF2 IRANSansXNoEn-Black'; src: url('woff2/IRANSansXNoEn-Black.woff2'); }
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: "WOFF IRANSansXNoEn-Thin";
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="IRANSansXNoEn-Thin.woff">WOFF IRANSansXNoEn-Thin</option>
<option value="IRANSansXNoEn-UltraLight.woff">WOFF IRANSansXNoEn-UltraLight</option>
<option value="IRANSansXNoEn-Light.woff">WOFF IRANSansXNoEn-Light</option>
<option value="IRANSansXNoEn-Regular.woff">WOFF IRANSansXNoEn-Regular</option>
<option value="IRANSansXNoEn-Medium.woff">WOFF IRANSansXNoEn-Medium</option>
<option value="IRANSansXNoEn-DemiBold.woff">WOFF IRANSansXNoEn-DemiBold</option>
<option value="IRANSansXNoEn-Bold.woff">WOFF IRANSansXNoEn-Bold</option>
<option value="IRANSansXNoEn-ExtraBold.woff">WOFF IRANSansXNoEn-ExtraBold</option>
<option value="IRANSansXNoEn-Black.woff">WOFF IRANSansXNoEn-Black</option>
<option value="IRANSansXNoEn-Thin.woff2">WOFF2 IRANSansXNoEn-Thin</option>
<option value="IRANSansXNoEn-UltraLight.woff2">WOFF2 IRANSansXNoEn-UltraLight</option>
<option value="IRANSansXNoEn-Light.woff2">WOFF2 IRANSansXNoEn-Light</option>
<option value="IRANSansXNoEn-Regular.woff2">WOFF2 IRANSansXNoEn-Regular</option>
<option value="IRANSansXNoEn-Medium.woff2">WOFF2 IRANSansXNoEn-Medium</option>
<option value="IRANSansXNoEn-DemiBold.woff2">WOFF2 IRANSansXNoEn-DemiBold</option>
<option value="IRANSansXNoEn-Bold.woff2">WOFF2 IRANSansXNoEn-Bold</option>
<option value="IRANSansXNoEn-ExtraBold.woff2">WOFF2 IRANSansXNoEn-ExtraBold</option>
<option value="IRANSansXNoEn-Black.woff2">WOFF2 IRANSansXNoEn-Black</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>
&ensp;
<a href="https://caniuse.com/#feat=woff">woff</a>
<a href="https://caniuse.com/#feat=woff2">woff2</a>
&ensp;
<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="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="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>&nbsp;<span class="sampletext" id="p08"></span></p>
<p><span class="label">09</span>&nbsp;<span class="sampletext" id="p09"></span></p>
<p><span class="label">10</span>&nbsp;<span class="sampletext" id="p10"></span></p>
<p><span class="label">11</span>&nbsp;<span class="sampletext" id="p11"></span></p>
<p><span class="label">12</span>&nbsp;<span class="sampletext" id="p12"></span></p>
<p><span class="label">13</span>&nbsp;<span class="sampletext" id="p13"></span></p>
<p><span class="label">14</span>&nbsp;<span class="sampletext" id="p14"></span></p>
<p><span class="label">15</span>&nbsp;<span class="sampletext" id="p15"></span></p>
<p><span class="label">16</span>&nbsp;<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 &Agrave;&Aacute;&Acirc;&Atilde;&Auml;&Aring;&AElig;&Ccedil;&Egrave;&Eacute;&Ecirc;&Euml;&Igrave;&Iacute;&Icirc;&Iuml;&ETH;&Ntilde;&Ograve;&Oacute;&Ocirc;&Otilde;&Ouml;&Oslash;&OElig;&THORN;&Ugrave;&Uacute;&Ucirc;&Uuml;&Yacute;&Yuml; &agrave;&aacute;&acirc;&atilde;&auml;&aring;&aelig;&ccedil;&egrave;&eacute;&ecirc;&euml;&igrave;&iacute;&icirc;&iuml;&eth;&ntilde;&ograve;&oacute;&ocirc;&otilde;&ouml;&oslash;&oelig;&thorn;&szlig;&ugrave;&uacute;&ucirc;&uuml;&yacute;&yuml; .,:;&middot;&hellip;&iquest;?&iexcl;!&laquo;&raquo;&lsaquo;&rsaquo; /|&brvbar;\()[]{}_-&ndash;&mdash;&sbquo;&bdquo;&lsquo;&rsquo;&ldquo;&rdquo;&quot;&#x27; #&amp;&sect;@&bull;&shy;*&dagger;&Dagger;&para; +&times;&divide;&plusmn;=&lt;&gt;&not;&mu; ^~&acute;`&circ;&macr;&tilde;&uml;&cedil; &yen;&euro;&pound;$&cent;&curren;&fnof; &trade;&reg;&copy; 1234567890 &ordf;&ordm;&deg;%&permil; &sup1;&sup2;&sup3;&frac14;&frac12;&frac34;";
return setDefaultText(lat1);
}
function setCharset() {
const completeCharSet = '&#x0621;&#x0627;&#xFE8E;&#x0623;&#xFE84;&#x0625;&#xFE88;&#x0622;&#xFE82;&#x0671;&#xFB51;&#x066E;&#x0628;&#xFE90;&#xFE92;&#xFE91;&#x067E;&#xFB57;&#xFB59;&#xFB58;&#x062A;&#xFE96;&#xFE98;&#xFE97;&#x062B;&#xFE9A;&#xFE9C;&#xFE9B;&#x0679;&#xFB67;&#xFB69;&#xFB68;&#x062C;&#xFE9E;&#xFEA0;&#xFE9F;&#x0686;&#xFB7B;&#xFB7D;&#xFB7C;&#x062D;&#xFEA2;&#xFEA4;&#xFEA3;&#x062E;&#xFEA6;&#xFEA8;&#xFEA7;&#x062F;&#xFEAA;&#x0630;&#xFEAC;&#x0688;&#xFB89;&#x0631;&#xFEAE;&#x0632;&#xFEB0;&#x0691;&#xFB8D;&#x0695;&#x0698;&#xFB8B;&#x0633;&#xFEB2;&#xFEB4;&#xFEB3;&#x0634;&#xFEB6;&#xFEB8;&#xFEB7;&#x0635;&#xFEBA;&#xFEBC;&#xFEBB;&#x0636;&#xFEBE;&#xFEC0;&#xFEBF;&#x0637;&#xFEC2;&#xFEC4;&#xFEC3;&#x0638;&#xFEC6;&#xFEC8;&#xFEC7;&#x0639;&#xFECA;&#xFECC;&#xFECB;&#x063A;&#xFECE;&#xFED0;&#xFECF;&#x0641;&#xFED2;&#xFED4;&#xFED3;&#x06A4;&#xFB6B;&#xFB6D;&#xFB6C;&#x06A1;&#x066F;&#x0642;&#xFED6;&#xFED8;&#xFED7;&#x0643;&#xFEDA;&#xFEDC;&#xFEDB;&#x06A9;&#xFB8F;&#xFB91;&#xFB90;&#x06AF;&#xFB93;&#xFB95;&#xFB94;&#x06AA;&#x0644;&#xFEDE;&#xFEE0;&#xFEDF;&#x06B5;&#x0645;&#xFEE2;&#xFEE4;&#xFEE3;&#x0646;&#xFEE6;&#xFEE8;&#xFEE7;&#x06BA;&#xFB9F;&#x0647;&#xFEEA;&#xFEEC;&#xFEEB;&#x06C0;&#xFBA5;&#x06C1;&#xFBA7;&#xFBA9;&#xFBA8;&#x06C2;&#x06BE;&#xFBAB;&#xFBAD;&#xFBAC;&#x0629;&#xFE94;&#x06C3;&#x0648;&#xFEEE;&#x0624;&#xFE86;&#x06C6;&#xFBDA;&#x06C7;&#xFBD8;&#x06C9;&#xFBE3;&#x0649;&#xFEF0;&#x064A;&#xFEF2;&#xFEF4;&#xFEF3;&#x0626;&#xFE8A;&#xFE8C;&#xFE8B;&#x06CE;&#x06CC;&#xFBFD;&#xFBFF;&#xFBFE;&#x06D2;&#xFBAF;&#x06D3;&#xFBB1;&#x06D5;&#x0640;&#xFEFB;&#xFEFC;&#xFEF7;&#xFEF8;&#xFEF9;&#xFEFA;&#xFEF5;&#xFEF6;&#x066B;&#x066C;&#x0660;&#x0661;&#x0662;&#x0663;&#x0664;&#x0665;&#x0666;&#x0667;&#x0668;&#x0669;&#x06F0;&#x06F1;&#x06F2;&#x06F3;&#x06F4;&#x06F5;&#x06F6;&#x06F7;&#x06F8;&#x06F9;&#x000D;&#xFEFF;&#x200A;&#x0020;&#x00A0;&#x2009;&#x200B;&#x06D4;&#x060C;&#x061B;&#x061F;&#x066D;&#xFD3E;&#xFD3F;&#x002E;&#x003A;&#x0021;&#x0028;&#x0029;&#x00AB;&#x00BB;&#x2039;&#x203A;&#x0022;&#x0027;&#xFDFC;&#x066A; &#x200E; &#x200F; &#x200D; &#x200C; &#x0615; &#x0670; &#x0656; &#x0654; &#x0655; &#x064B; &#x064C; &#x064D; &#x064E; &#x064F; &#x0650; &#x0651; &#x0652; &#x0653; &#x0658; &#x065A; &#x065B; &#xFBB2; &#xFBB3; &#xFBB4; &#xFBB5; &#xFBB6; &#xFBB9;';
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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 162 KiB

@ -0,0 +1,281 @@
<!doctype html>
<html lang="fa">
<head>
<meta charset="utf-8">
<title>IRANSans Family Type face: خانواده فونت ایران سن سریف</title>
<meta name="fontiran.com:license" content="کد ۵ رقمی لایسنس">
<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:210px" > د </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">
<h1>نکاتی درباره تایپوگرافی وب</h1>
</div>
<div class="alphabet" style="line-height:330px" > خ </div>
<div class="rightbox">
<p>از زمان پیدایش نخستین وب سایت، متن ها یکی از اجزای مهم صفحات وب بودند. هر چند به مرور زمان با ورود تصاویر، صوت و فیلم کمی از بار مسئولیت متون کم شد اما هنوز جایگاه خود را از دست نداده اند و بخش مهمی از کار را به عهده دارند.</p>
<p>بسیاری از طراحان وب سایت به صورت تجربی بهترین ترکیب و ظاهر را برای نمایش متن ها انتخاب می کنند. اما اصولی وجود دارد که با رعایت آن ها، تاثیرپذیری و زیبایی سایت چند برابر خواهد شد.</p>
<p>در ادامه مطلب قصد داریم تعدادی از اصول مقدماتی تایپوگرافی را به اختصار مرور کنیم. هرچند بسیاری از دوستان با این نکات آشنا هستند؛ اما شاید مرور آن ها خالی از لطف نباشد.</p>
</div>
</div>
<div class="mainbox">
<div class="titelbox">
<h1>تاثیر اندازه فونت و سلسله مراتب تگها</h1>
</div>
<div class="alphabet" style="line-height:170px"> پ </div>
<div class="rightbox">
<p>فونت های داخل سایت باید به گونه ای قرار گیرند که کاربر به راحتی بتواند آن ها را بخواند. نوع فونت، وزن و کوچک (یا بزرگ) بودن اندازه آن ممکن است تمایل کاربر برای بازگشت به وب سایت را کاهش دهد. قواعد و قوانین زیادی برای انتخاب بهترین فونت وجود دارد.</p>
<p>در زیر می توانید ۵ وزن مختلف <strong>خانواده فونت ایران سن سریف</strong> را در شرایط یکسان مشاهده کنید. لازم به ذکر است برای این صفحه از وزن نازک (Light) استفاده شده است.</p>
</div>
</div>
<div class="mainbox">
<div class="mainbox2">
<div class="text-ultralight" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Ultra Light)</div>
<div class="text-light" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Light)</div>
<div class="text-regular" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Regular)</div>
<div class="text-medium" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Medium)</div>
<div class="text-bold" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Bold)</div>
<div class="text-black" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Black)</div>
</div>
</div>
<div class="mainboxnegativ">
<div class="mainbox2">
<div class="text-ultralight" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Ultra Light)</div>
<div class="text-light" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Light)</div>
<div class="text-regular" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Regular)</div>
<div class="text-medium" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Medium)</div>
<div class="text-bold" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Bold)</div>
<div class="text-black" style="font-size:1.4em">بیانِ زبان با گذشت زمان کهنه می شود و بیانِ قلم برای همیشه باقی می ماند (Black)</div>
</div>
</div>
<div class="mainbox">
<div class="titelbox">
<h1>تگهای هدینگ</h1>
</div>
<div class="alphabet" style="line-height:150px"> ی </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">
<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">(IRANSans Ultra Light)</div>
<div class="farsiparagraph"><span class="text-ultralight"> ایران سن سریف IRANSans سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. خانواده فونت ایران سنسریف در سال ۱۳۹۴ پرطرفدارترین فونت فارسی بوده است.</span></div>
<div class="englishparagraph"><span class="text-ultralight">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
</span></div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSans Light)</div>
<div class="farsiparagraph"><span class="text-right">ایران سن سریف IRANSans سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. خانواده فونت ایران سنسریف در سال ۱۳۹۴ پرطرفدارترین فونت فارسی بوده است.</span></div>
<div class="englishparagraph"><span class="text-right">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
</span></div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSans Regular)</div>
<div class="farsiparagraph"><span class="text-regular">ایران سن سریف IRANSans سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. خانواده فونت ایران سنسریف در سال ۱۳۹۴ پرطرفدارترین فونت فارسی بوده است.</span></div>
<div class="englishparagraph"><span class="text-regular">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
</span></div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSans Medium)</div>
<div class="farsiparagraph"><span class="text-medium">ایران سن سریف IRANSans سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. خانواده فونت ایران سنسریف در سال ۱۳۹۴ پرطرفدارترین فونت فارسی بوده است.</span></div>
<div class="englishparagraph"><span class="text-medium">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span>
</div>
</div>
<div class="mainbox">
<div class="mainbox2negativ">(IRANSans Bold)</div>
<div class="farsiparagraph"><span class="text-bold">ایران سن سریف IRANSans سبکی ساده و ضخامت یکسان از قلم ایران است که با وجود حفظ ساختار قلمهای رایج ایرانی حال و هوای مدرن و امروزی دارد. سادگی شکل حروف و استفاده از حداقل شکستگی باعث شده است این تایپ فیس علاوه بر خوانا بودن زیبا و چشم نواز نیز باشد. این فونت با سبکهای طراحی کمینهگرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونتهای سنسریف لاتین است. خانواده فونت ایران سنسریف در سال ۱۳۹۴ پرطرفدارترین فونت فارسی بوده است.</span></div>
<div class="englishparagraph"><span class="text-bold">
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span>
</div>