suzanne.soy/Iosevka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

r1.0-beta1

Browse Source
This commit is contained in:
be5invis 2015-10-28 16:53:46 +08:00
parent 45087860a0
commit b9008839bb
25 changed files with 75 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
index.html
View File

@ -3,6 +3,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Iosevka</title> <title>Iosevka</title>
<style> <style>
html {
font-size: 16px;
}
@font-face { @font-face {
font-family: IosevkaWEB; font-family: IosevkaWEB;
src: url('iosevka-regular.woff') format('woff'), url('iosevka-regular.ttf') format('truetype'); src: url('iosevka-regular.woff') format('woff'), url('iosevka-regular.ttf') format('truetype');
@ -23,26 +26,6 @@
font-weight: bold; font-weight: bold;
src: url('iosevka-bolditalic.woff') format('woff'), url('iosevka-bolditalic.ttf') format('truetype'); 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 { a {
color: black; color: black;
background-image: linear-gradient(white 50%, #888 50%); background-image: linear-gradient(white 50%, #888 50%);
@ -58,19 +41,24 @@
body { body {
width: 68rem; width: 68rem;
margin: 0 auto; margin: 0 auto;
padding: 4rem 0; padding: 6rem 0;
} }
p, pre, .show, .show samp, #links { p, pre, .show, .show samp, #links {
font-family: "IosevkaWEB", serif; font-family: "IosevkaWEB", monospace;
line-height: 1.5; 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 { p {
margin: 0.5rem 0; margin: 0.5rem 0;
} }
div.show { div.show {
font-size: 1rem; font-size: 2rem;
width: 68rem; width: 68rem;
border-bottom: 1px dotted #ccc;
} }
div.show.bold { font-weight: bold } div.show.bold { font-weight: bold }
div.show.italic { font-style: italic } div.show.italic { font-style: italic }
@ -78,23 +66,21 @@
display: flex; display: flex;
width: 68rem; width: 68rem;
flex-wrap: wrap; flex-wrap: wrap;
border-top: 1px dotted #ccc;
margin-bottom: -1px; margin-bottom: -1px;
} }
.show div.block span { .show div.block span {
display: block; display: block;
width: 1rem; width: 2rem;
height: 1rem; height: 2rem;
line-height: 1rem; line-height: 2rem;
padding: 0.5rem; padding: 1rem;
flex: none; flex: none;
text-align: center; text-align: center;
position: relative; position: relative;
cursor: default; cursor: default;
} }
.show div.block span.indicator { .show div.block span.indicator {
width: 2rem; font-size: 1rem;
font-size: 0.75rem;
} }
.show div.block span.missing { .show div.block span.missing {
opacity: 0.1 opacity: 0.1
@ -152,6 +138,10 @@
border-top: 1px solid rgba(255, 0, 0, 0.1); border-top: 1px solid rgba(255, 0, 0, 0.1);
border-bottom: 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 { .show samp {
display: flex; display: flex;
font-size: 1rem; font-size: 1rem;
@ -173,9 +163,11 @@
} }
#links { #links {
margin-top: 6rem;
width: 68rem;
display: flex; display: flex;
margin-top: 2rem;
border-bottom: 2px solid black; border-bottom: 2px solid black;
background: white;
} }
#links a { #links a {
display: block; display: block;
@ -200,7 +192,7 @@
</html> </html>
<body> <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>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> <p>By the way it is completely generated by <a href="http://github.com/be5invis/Iosevka">code</a>.</p>
<div id="links"></div> <div id="links"></div>
<script> <script>
@ -208,15 +200,13 @@
while(s.length < n) s = '0' + s; while(s.length < n) s = '0' + s;
return s; return s;
} }
var ROW = 32; var BLOCKSIZE = 16 * 4;
var BLOCKSIZE = ROW * 4;
var fonts = [ var fonts = [
{name: 'iosevka-regular', cls: ''}, {name: 'iosevka-regular', cls: '', display: 'Regular'},
{name: 'iosevka-bold', cls: 'bold'}, {name: 'iosevka-bold', cls: 'bold', display: 'Bold'},
{name: 'iosevka-italic', cls:'italic'}, {name: 'iosevka-italic', cls:'italic', display: 'Italic'},
{name: 'iosevka-bolditalic', cls:'bold italic'} {name: 'iosevka-bolditalic', cls:'bold italic', display: 'Bolditalic'}
]; ];
var sampleSentences = [ var sampleSentences = [
{code: 'en', lang: 'English', sample: 'Shaw, those twelve beige hooks are joined if I patch a young, gooey mouth.'}, {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>'}, {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: 'Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів!'} {code: 'uk', lang: 'Ukranian', sample: 'Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів!'}
] ]
var divs = [];
var links = []; var links = [];
function Click(j){ function Click(j, c){
return function(){ return function(){
for(var k = 0; k < divs.length; k++) if(k === j) { for(var k = 0; k < links.length; k++) if(k === j) {
divs[k].show()
links[k].addClass('active') links[k].addClass('active')
} else { } else {
divs[k].hide()
links[k].removeClass('active') links[k].removeClass('active')
} }
sampDiv[0].className = coverageDiv[0].className = 'show ' + c
return false; return false;
} }
} }
fonts.forEach(function(font, fontindex){ var sampDiv = $('<div>').addClass('show');
var div = $('<div>').addClass('show ' + font.cls); sampleSentences.forEach(function(record){
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>');
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);
div.append(sample); });
}); var coverageDiv = $('<div>').addClass('show');
$.get(font.name + '.charmap', function(data){ $.getJSON(fonts[0].name + '.charmap', function(data){
data = JSON.parse(data); var uhash = [];
var uhash = []; var whash = [];
var whash = []; for(var j = 0; j < data.length; j++) {
for(var j = 0; j < data.length; j++) { var unicodes = data[j][1];
var unicodes = data[j][1]; if(unicodes && unicodes.length) for(var k = 0; k < unicodes.length; k++){
if(unicodes && unicodes.length) for(var k = 0; k < unicodes.length; k++){ uhash[unicodes[k]] = data[j][0].trim()
uhash[unicodes[k]] = data[j][0].trim() whash[unicodes[k]] = data[j][2]
whash[unicodes[k]] = data[j][2]
}
} }
for(var block = 0; block < (65536 / BLOCKSIZE); block++) { }
var blockdiv = $('<div>').addClass('block'); for(var block = 0; block < (65536 / BLOCKSIZE); block++) {
var hasGlyphInThisBlock = false; var blockdiv = $('<div>').addClass('block');
for(j = block * BLOCKSIZE; j < (block + 1) * BLOCKSIZE; j++) if(uhash[j]){ var hasGlyphInThisBlock = false;
hasGlyphInThisBlock = true; 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) { coverageDiv.append(blockdiv)
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) $('body').append(sampDiv, coverageDiv);
} fonts.forEach(function(font, fontindex){
}; var a = $('<a>').attr('href', '#').append(font.display);
}); a.on('click', Click(fontindex, font.cls));
divs.push(div);
$('body').append(div);
var a = $('<a>').attr('href', '#').append(font.name);
a.on('click', Click(fontindex));
links.push(a) links.push(a)
$('#links').append(a); $('#links').append(a);
}); });
Click(0)(); Click(0)();
</script> </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> </body>

2
iosevka-bold.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevka-bold.ttf
View File

Binary file not shown.

BIN
iosevka-bold.woff
View File

Binary file not shown.

2
iosevka-bolditalic.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevka-bolditalic.ttf
View File

Binary file not shown.

BIN
iosevka-bolditalic.woff
View File

Binary file not shown.

2
iosevka-italic.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevka-italic.ttf
View File

Binary file not shown.

BIN
iosevka-italic.woff
View File

Binary file not shown.

2
iosevka-regular.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevka-regular.ttf
View File

Binary file not shown.

BIN
iosevka-regular.woff
View File

Binary file not shown.

2
iosevkacc-bold.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevkacc-bold.ttf
View File

Binary file not shown.

BIN
iosevkacc-bold.woff
View File

Binary file not shown.

2
iosevkacc-bolditalic.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevkacc-bolditalic.ttf
View File

Binary file not shown.

BIN
iosevkacc-bolditalic.woff
View File

Binary file not shown.

2
iosevkacc-italic.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevkacc-italic.ttf
View File

Binary file not shown.

BIN
iosevkacc-italic.woff
View File

Binary file not shown.

2
iosevkacc-regular.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevkacc-regular.ttf
View File

Binary file not shown.

BIN
iosevkacc-regular.woff
View File

Binary file not shown.