r1.0-beta1
This commit is contained in:
be5invis
parent
45087860a0
commit
b9008839bb
148
index.html
148
index.html
|
|
@ -3,6 +3,9 @@
|
|||
<meta charset="utf-8">
|
||||
<title>Iosevka</title>
|
||||
<style>
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: IosevkaWEB;
|
||||
src: url('iosevka-regular.woff') format('woff'), url('iosevka-regular.ttf') format('truetype');
|
||||
|
|
@ -23,26 +26,6 @@
|
|||
font-weight: bold;
|
||||
src: url('iosevka-bolditalic.woff') format('woff'), url('iosevka-bolditalic.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: IosevkaCCWEB;
|
||||
src: url('iosevkacc-regular.woff') format('woff'), url('iosevkacc-regular.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: IosevkaCCWEB;
|
||||
font-style: italic;
|
||||
src: url('iosevkacc-italic.woff') format('woff'), url('iosevkacc-italic.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: IosevkaCCWEB;
|
||||
font-weight: bold;
|
||||
src: url('iosevkacc-bold.woff') format('woff'), url('iosevkacc-bold.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: IosevkaCCWEB;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
src: url('iosevkacc-bolditalic.woff') format('woff'), url('iosevkacc-bolditalic.ttf') format('truetype');
|
||||
}
|
||||
a {
|
||||
color: black;
|
||||
background-image: linear-gradient(white 50%, #888 50%);
|
||||
|
|
@ -58,19 +41,24 @@
|
|||
body {
|
||||
width: 68rem;
|
||||
margin: 0 auto;
|
||||
padding: 4rem 0;
|
||||
padding: 6rem 0;
|
||||
}
|
||||
p, pre, .show, .show samp, #links {
|
||||
font-family: "IosevkaWEB", serif;
|
||||
font-family: "IosevkaWEB", monospace;
|
||||
line-height: 1.5;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-font-feature-settings: "locl";
|
||||
-ms-font-feature-settings: "locl";
|
||||
-webkit-font-feature-settings: "locl";
|
||||
font-feature-settings: "locl";
|
||||
}
|
||||
.cc { font-family: "IosevkaCCWeb", monospace!important }
|
||||
p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
div.show {
|
||||
font-size: 1rem;
|
||||
font-size: 2rem;
|
||||
width: 68rem;
|
||||
border-bottom: 1px dotted #ccc;
|
||||
}
|
||||
div.show.bold { font-weight: bold }
|
||||
div.show.italic { font-style: italic }
|
||||
|
|
@ -78,23 +66,21 @@
|
|||
display: flex;
|
||||
width: 68rem;
|
||||
flex-wrap: wrap;
|
||||
border-top: 1px dotted #ccc;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.show div.block span {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
padding: 1rem;
|
||||
flex: none;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
}
|
||||
.show div.block span.indicator {
|
||||
width: 2rem;
|
||||
font-size: 0.75rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.show div.block span.missing {
|
||||
opacity: 0.1
|
||||
|
|
@ -152,6 +138,10 @@
|
|||
border-top: 1px solid rgba(255, 0, 0, 0.1);
|
||||
border-bottom: 1px solid rgba(255, 0, 0, 0.1);
|
||||
}
|
||||
.show .smp {
|
||||
font-size: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.show samp {
|
||||
display: flex;
|
||||
font-size: 1rem;
|
||||
|
|
@ -173,9 +163,11 @@
|
|||
}
|
||||
|
||||
#links {
|
||||
margin-top: 6rem;
|
||||
width: 68rem;
|
||||
display: flex;
|
||||
margin-top: 2rem;
|
||||
border-bottom: 2px solid black;
|
||||
background: white;
|
||||
}
|
||||
#links a {
|
||||
display: block;
|
||||
|
|
@ -200,7 +192,7 @@
|
|||
</html>
|
||||
<body>
|
||||
<p>Iosevka is a monospace coding typeface inspired by <a href="http://www.fsd.it/fonts/pragmatapro.htm">Pragmata Pro</a>, <a href="http://mplus-fonts.osdn.jp/">M+</a> and <a href="http://www.parachute.gr/typefaces/allfonts/din-mono-pro">PF DIN Mono</a>. It is designed to have a narrow shape to be space efficient and compatible to CJK characters.</p>
|
||||
<p>The current release is <strong><a href="https://github.com/be5invis/Iosevka/releases/tag/v0.1.15">v0.1.15 “Giueng-Ghua”</a></strong>. You can find all releases <a href="https://github.com/be5invis/Iosevka/releases/">here</a>.</p>
|
||||
<p>The current release is <strong><a href="https://github.com/be5invis/Iosevka/releases/tag/v1.0-beta1">v1.0-beta1 “Yoikata”</a></strong>. You can find all releases <a href="https://github.com/be5invis/Iosevka/releases/">here</a>.</p>
|
||||
<p>By the way it is completely generated by <a href="http://github.com/be5invis/Iosevka">code</a>.</p>
|
||||
<div id="links"></div>
|
||||
<script>
|
||||
|
|
@ -208,15 +200,13 @@
|
|||
while(s.length < n) s = '0' + s;
|
||||
return s;
|
||||
}
|
||||
var ROW = 32;
|
||||
var BLOCKSIZE = ROW * 4;
|
||||
var BLOCKSIZE = 16 * 4;
|
||||
var fonts = [
|
||||
{name: 'iosevka-regular', cls: ''},
|
||||
{name: 'iosevka-bold', cls: 'bold'},
|
||||
{name: 'iosevka-italic', cls:'italic'},
|
||||
{name: 'iosevka-bolditalic', cls:'bold italic'}
|
||||
{name: 'iosevka-regular', cls: '', display: 'Regular'},
|
||||
{name: 'iosevka-bold', cls: 'bold', display: 'Bold'},
|
||||
{name: 'iosevka-italic', cls:'italic', display: 'Italic'},
|
||||
{name: 'iosevka-bolditalic', cls:'bold italic', display: 'Bolditalic'}
|
||||
];
|
||||
|
||||
var sampleSentences = [
|
||||
{code: 'en', lang: 'English', sample: 'Shaw, those twelve beige hooks are joined if I patch a young, gooey mouth.'},
|
||||
{lang: 'Powerline', sample: '<span style="background:black;color:white"> NORMAL </span><span style="background:#ccc;color:black;font-style:normal">\uE0B0</span><span style="background:#ccc;color:black"> <span style="font-style:normal">\uE0A0</span> master <span style="font-style:normal">\uE0B1</span> glyphs/powerline.patel </span><span style="background:#eee;color:#ccc;font-style:normal">\uE0B0</span><span style="background:#eee;color:#555"> dos <span style="font-style:normal">\uE0B3</span> utf-8 <span style="font-style:normal">\uE0B3</span> PatEL </span><span style="background:#eee;color:#ccc;font-style:normal">\uE0B2</span><span style="background:#ccc"> 2% </span><span style="background:#ccc;color:black;font-style:normal">\uE0B2</span><span style="color:white;background:black"> \uE0A1 1:1 </span>'},
|
||||
|
|
@ -245,61 +235,57 @@
|
|||
{code: 'uk', lang: 'Ukranian', sample: 'Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів!'}
|
||||
]
|
||||
|
||||
var divs = [];
|
||||
var links = [];
|
||||
function Click(j){
|
||||
function Click(j, c){
|
||||
return function(){
|
||||
for(var k = 0; k < divs.length; k++) if(k === j) {
|
||||
divs[k].show()
|
||||
for(var k = 0; k < links.length; k++) if(k === j) {
|
||||
links[k].addClass('active')
|
||||
} else {
|
||||
divs[k].hide()
|
||||
links[k].removeClass('active')
|
||||
}
|
||||
sampDiv[0].className = coverageDiv[0].className = 'show ' + c
|
||||
return false;
|
||||
}
|
||||
}
|
||||
fonts.forEach(function(font, fontindex){
|
||||
var div = $('<div>').addClass('show ' + font.cls);
|
||||
sampleSentences.forEach(function(record){
|
||||
var sample = $('<samp>').attr('lang', record.code || '').attr('xml:lang', record.code || '').append('<span class="langname">' + record.lang + '</span><span class="sentence">' + record.sample + '</span>');
|
||||
div.append(sample);
|
||||
});
|
||||
$.get(font.name + '.charmap', function(data){
|
||||
data = JSON.parse(data);
|
||||
var uhash = [];
|
||||
var whash = [];
|
||||
for(var j = 0; j < data.length; j++) {
|
||||
var unicodes = data[j][1];
|
||||
if(unicodes && unicodes.length) for(var k = 0; k < unicodes.length; k++){
|
||||
uhash[unicodes[k]] = data[j][0].trim()
|
||||
whash[unicodes[k]] = data[j][2]
|
||||
}
|
||||
var sampDiv = $('<div>').addClass('show');
|
||||
sampleSentences.forEach(function(record){
|
||||
var sample = $('<samp>').attr('lang', record.code || '').attr('xml:lang', record.code || '').append('<span class="langname">' + record.lang + '</span><span class="sentence">' + record.sample + '</span>');
|
||||
sampDiv.append(sample);
|
||||
});
|
||||
var coverageDiv = $('<div>').addClass('show');
|
||||
$.getJSON(fonts[0].name + '.charmap', function(data){
|
||||
var uhash = [];
|
||||
var whash = [];
|
||||
for(var j = 0; j < data.length; j++) {
|
||||
var unicodes = data[j][1];
|
||||
if(unicodes && unicodes.length) for(var k = 0; k < unicodes.length; k++){
|
||||
uhash[unicodes[k]] = data[j][0].trim()
|
||||
whash[unicodes[k]] = data[j][2]
|
||||
}
|
||||
for(var block = 0; block < (65536 / BLOCKSIZE); block++) {
|
||||
var blockdiv = $('<div>').addClass('block');
|
||||
var hasGlyphInThisBlock = false;
|
||||
for(j = block * BLOCKSIZE; j < (block + 1) * BLOCKSIZE; j++) if(uhash[j]){
|
||||
hasGlyphInThisBlock = true;
|
||||
}
|
||||
for(var block = 0; block < (65536 / BLOCKSIZE); block++) {
|
||||
var blockdiv = $('<div>').addClass('block');
|
||||
var hasGlyphInThisBlock = false;
|
||||
for(j = block * BLOCKSIZE; j < (block + 1) * BLOCKSIZE; j++) if(uhash[j]){
|
||||
hasGlyphInThisBlock = true;
|
||||
}
|
||||
if(hasGlyphInThisBlock) {
|
||||
for(j = block * BLOCKSIZE; j < (block + 1) * BLOCKSIZE; j++) {
|
||||
if(j % 16 === 0) blockdiv.append('<span class="indicator">' + padzero(j.toString(16).toUpperCase(), 4) + '</span>')
|
||||
blockdiv.append('<span class="' + (uhash[j] ? 'present' : 'missing') + '" alt="' + (uhash[j] || '') + '"><s>' + (whash[j] ? '<d>\u25CC</d>\u25CC': '') + String.fromCharCode(j) + '</s></span>')
|
||||
}
|
||||
if(hasGlyphInThisBlock) {
|
||||
for(j = block * BLOCKSIZE; j < (block + 1) * BLOCKSIZE; j++) {
|
||||
if(j % ROW === 0) blockdiv.append('<span class="indicator">' + padzero(j.toString(16).toUpperCase(), 4) + '</span>')
|
||||
blockdiv.append('<span class="' + (uhash[j] ? 'present' : 'missing') + '" alt="' + (uhash[j] || '') + '"><s>' + (whash[j] ? '<d>\u25CC</d>\u25CC': '') + String.fromCharCode(j) + '</s></span>')
|
||||
}
|
||||
div.append(blockdiv)
|
||||
}
|
||||
};
|
||||
});
|
||||
divs.push(div);
|
||||
$('body').append(div);
|
||||
|
||||
var a = $('<a>').attr('href', '#').append(font.name);
|
||||
a.on('click', Click(fontindex));
|
||||
coverageDiv.append(blockdiv)
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
$('body').append(sampDiv, coverageDiv);
|
||||
fonts.forEach(function(font, fontindex){
|
||||
var a = $('<a>').attr('href', '#').append(font.display);
|
||||
a.on('click', Click(fontindex, font.cls));
|
||||
links.push(a)
|
||||
$('#links').append(a);
|
||||
});
|
||||
Click(0)();
|
||||
</script>
|
||||
<a href="https://github.com/be5invis/Iosevka"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
||||
</body>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
BIN
iosevka-bold.ttf
BIN
iosevka-bold.ttf
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue
Block a user