rsms/inter
1
1
Fork 0
mirror of https://github.com/rsms/inter.git synced 2024-09-19 06:40:16 +03:00
Code Issues Projects Releases Wiki Activity

website

Browse Source
This commit is contained in:
Rasmus Andersson 2018-09-19 09:28:47 -07:00
parent 724caef757
commit c5d6a6ef83
5 changed files with 65 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
docs/inter-ui.css
View File

@ -2,68 +2,68 @@
font-family: 'Inter UI';
font-style: normal;
font-weight: 400;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
url("font-files/Inter-UI-Regular.woff2?v=2.5") format("woff2"),
url("font-files/Inter-UI-Regular.woff?v=2.5") format("woff");
src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-Regular.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-Regular.woff?v=3.0") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 400;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
url("font-files/Inter-UI-Italic.woff2?v=2.5") format("woff2"),
url("font-files/Inter-UI-Italic.woff?v=2.5") format("woff");
src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-Italic.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-Italic.woff?v=3.0") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: normal;
font-weight: 500;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
url("font-files/Inter-UI-Medium.woff2?v=2.5") format("woff2"),
url("font-files/Inter-UI-Medium.woff?v=2.5") format("woff");
src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-Medium.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-Medium.woff?v=3.0") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 500;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
url("font-files/Inter-UI-MediumItalic.woff2?v=2.5") format("woff2"),
url("font-files/Inter-UI-MediumItalic.woff?v=2.5") format("woff");
src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-MediumItalic.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-MediumItalic.woff?v=3.0") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: normal;
font-weight: 700;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
url("font-files/Inter-UI-Bold.woff2?v=2.5") format("woff2"),
url("font-files/Inter-UI-Bold.woff?v=2.5") format("woff");
src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-Bold.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-Bold.woff?v=3.0") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 700;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
url("font-files/Inter-UI-BoldItalic.woff2?v=2.5") format("woff2"),
url("font-files/Inter-UI-BoldItalic.woff?v=2.5") format("woff");
src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-BoldItalic.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-BoldItalic.woff?v=3.0") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: normal;
font-weight: 900;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
url("font-files/Inter-UI-Black.woff2?v=2.5") format("woff2"),
url("font-files/Inter-UI-Black.woff?v=2.5") format("woff");
src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-Black.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-Black.woff?v=3.0") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 900;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
url("font-files/Inter-UI-BlackItalic.woff2?v=2.5") format("woff2"),
url("font-files/Inter-UI-BlackItalic.woff?v=2.5") format("woff");
src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-BlackItalic.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-BlackItalic.woff?v=3.0") format("woff");
}
/*
@ -84,6 +84,6 @@ html {
@font-face {
font-family: 'Inter UI var';
font-weight: 400 900; /* safe weight range */
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"),
url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2");
src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2");
}

BIN
docs/lab/favicon.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

23
docs/lab/index.html
View File

@ -2,7 +2,8 @@
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="../favicon.png" />
<title>lab</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link href="../inter-ui.css" rel="stylesheet">
<script type="text/javascript">
@ -743,8 +744,6 @@ for (const ch of uniqueChars) {
// end of samples
</script>
<meta charset="utf-8">
<title>👀</title>
<style id="font-css" type="text/css-template">
/* Roboto for comparison */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
@ -1295,6 +1294,15 @@ function main() {
const repertoireControl = document.querySelector('.repertoireControl')
const samplesElement = document.querySelector('samples')
// filter paste to match style
;[].slice.call(document.querySelectorAll('[contenteditable]')).forEach(el => {
el.addEventListener('paste', ev => {
ev.preventDefault()
let text = ev.clipboardData.getData("text/plain")
document.execCommand("insertHTML", false, text)
}, {capture:true,passive:false})
})
let sizeVar = null
function forEachGlyphlist(fn) {
@ -1513,10 +1521,6 @@ function main() {
return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value
})
vars.bind('varItalic', (e, v) => {
console.log('varItalic', v)
})
// compare
let secondarySampleClassNameAddition = null
@ -1709,6 +1713,9 @@ function main() {
</body>
<script type="text/javascript">
main();
document.title += ' ' + (new Date()).toTimeString().split(':').slice(0,2).join(':');
document.title = (
(new Date()).toTimeString().split(':').slice(0,2).join(':') +
' — ' + (new Date()).toDateString()
);
</script>
</html>

18
docs/samples/index.css
View File

@ -65,14 +65,16 @@ livesample.col2 {
column-count: 2;
}
.font-style-regular { font-weight:400 !important; font-style:normal !important; }
.font-style-italic { font-weight:400 !important; font-style:italic !important; }
.font-style-medium { font-weight:500 !important; font-style:normal !important; }
.font-style-medium-italic { font-weight:500 !important; font-style:italic !important; }
.font-style-bold { font-weight:700 !important; font-style:normal !important; }
.font-style-bold-italic { font-weight:700 !important; font-style:italic !important; }
.font-style-black { font-weight:900 !important; font-style:normal !important; }
.font-style-black-italic { font-weight:900 !important; font-style:italic !important; }
.font-style-regular { font-variation-settings: "wght" 400, "ital" 0 !important; font-weight:400 !important; font-style:normal !important; }
.font-style-italic { font-variation-settings: "wght" 400, "ital" 100 !important; font-weight:400 !important; font-style:italic !important; }
.font-style-medium { font-variation-settings: "wght" 500, "ital" 0 !important; font-weight:500 !important; font-style:normal !important; }
.font-style-medium-italic { font-variation-settings: "wght" 500, "ital" 100 !important; font-weight:500 !important; font-style:italic !important; }
.font-style-bold { font-variation-settings: "wght" 700, "ital" 0 !important; font-weight:700 !important; font-style:normal !important; }
.font-style-bold-italic { font-variation-settings: "wght" 700, "ital" 100 !important; font-weight:700 !important; font-style:italic !important; }
.font-style-extra-bold { font-variation-settings: "wght" 800, "ital" 0 !important; font-weight:800 !important; font-style:normal !important; }
.font-style-extra-bold-italic { font-variation-settings: "wght" 800, "ital" 100 !important; font-weight:800 !important; font-style:italic !important; }
.font-style-black { font-variation-settings: "wght" 900, "ital" 0 !important; font-weight:900 !important; font-style:normal !important; }
.font-style-black-italic { font-variation-settings: "wght" 900, "ital" 100 !important; font-weight:900 !important; font-style:italic !important; }
div.live {
margin-top:1em;

14
docs/samples/index.html
View File

@ -38,6 +38,8 @@ endfor
<option value="medium-italic">Medium Italic</option>
<option value="bold" default>Bold</option>
<option value="bold-italic">Bold Italic</option>
<option value="extra-bold" default>Extra Bold</option>
<option value="extra-bold-italic">Extra Bold Italic</option>
<option value="black" default>Black</option>
<option value="black-italic">Black Italic</option>
</select>
@ -184,6 +186,16 @@ graph.setOrigin(-0.2, 0.8)
graph.setScale(0.049, 5)
var s2 = $('livesample.s2')
var samples = $$('livesample')
// filter paste to match style
samples.forEach(sample => {
sample.addEventListener('paste', ev => {
ev.preventDefault()
let text = ev.clipboardData.getData("text/plain")
document.execCommand("insertHTML", false, text)
}, {capture:true,passive:false})
})
function updateWidth() {
var fontSize = bindings.value('font-size', 0)
@ -235,6 +247,8 @@ bindings.configure('style', null, null, function (style) {
cl.remove('font-style-medium-italic')
cl.remove('font-style-bold')
cl.remove('font-style-bold-italic')
cl.remove('font-style-extra-bold')
cl.remove('font-style-extra-bold-italic')
cl.remove('font-style-black')
cl.remove('font-style-black-italic')
cl.add('font-style-' + style)