archive/inter-font
Archived
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
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-family: 'Inter UI';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-Regular.woff2?v=2.5") format("woff2"), url("font-files/Inter-UI-Regular.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-Regular.woff?v=2.5") format("woff"); url("font-files/Inter-UI-Regular.woff?v=3.0") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-Italic.woff2?v=2.5") format("woff2"), url("font-files/Inter-UI-Italic.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-Italic.woff?v=2.5") format("woff"); url("font-files/Inter-UI-Italic.woff?v=3.0") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-Medium.woff2?v=2.5") format("woff2"), url("font-files/Inter-UI-Medium.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-Medium.woff?v=2.5") format("woff"); url("font-files/Inter-UI-Medium.woff?v=3.0") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: italic; font-style: italic;
font-weight: 500; font-weight: 500;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-MediumItalic.woff2?v=2.5") format("woff2"), url("font-files/Inter-UI-MediumItalic.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-MediumItalic.woff?v=2.5") format("woff"); url("font-files/Inter-UI-MediumItalic.woff?v=3.0") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-Bold.woff2?v=2.5") format("woff2"), url("font-files/Inter-UI-Bold.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-Bold.woff?v=2.5") format("woff"); url("font-files/Inter-UI-Bold.woff?v=3.0") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: italic; font-style: italic;
font-weight: 700; font-weight: 700;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-BoldItalic.woff2?v=2.5") format("woff2"), url("font-files/Inter-UI-BoldItalic.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-BoldItalic.woff?v=2.5") format("woff"); url("font-files/Inter-UI-BoldItalic.woff?v=3.0") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-Black.woff2?v=2.5") format("woff2"), url("font-files/Inter-UI-Black.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-Black.woff?v=2.5") format("woff"); url("font-files/Inter-UI-Black.woff?v=3.0") format("woff");
} }
@font-face { @font-face {
font-family: 'Inter UI'; font-family: 'Inter UI';
font-style: italic; font-style: italic;
font-weight: 900; font-weight: 900;
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url("font-files/Inter-UI-BlackItalic.woff2?v=2.5") format("woff2"), url("font-files/Inter-UI-BlackItalic.woff2?v=3.0") format("woff2"),
url("font-files/Inter-UI-BlackItalic.woff?v=2.5") format("woff"); url("font-files/Inter-UI-BlackItalic.woff?v=3.0") format("woff");
} }
/* /*
@ -84,6 +84,6 @@ html {
@font-face { @font-face {
font-family: 'Inter UI var'; font-family: 'Inter UI var';
font-weight: 400 900; /* safe weight range */ font-weight: 400 900; /* safe weight range */
src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"),
url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2"); 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"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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"> <link href="../inter-ui.css" rel="stylesheet">
<script type="text/javascript"> <script type="text/javascript">
@ -743,8 +744,6 @@ for (const ch of uniqueChars) {
// end of samples // end of samples
</script> </script>
<meta charset="utf-8">
<title>👀</title>
<style id="font-css" type="text/css-template"> <style id="font-css" type="text/css-template">
/* Roboto for comparison */ /* 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'); @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 repertoireControl = document.querySelector('.repertoireControl')
const samplesElement = document.querySelector('samples') 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 let sizeVar = null
function forEachGlyphlist(fn) { function forEachGlyphlist(fn) {
@ -1513,10 +1521,6 @@ function main() {
return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value
}) })
vars.bind('varItalic', (e, v) => {
console.log('varItalic', v)
})
// compare // compare
let secondarySampleClassNameAddition = null let secondarySampleClassNameAddition = null
@ -1709,6 +1713,9 @@ function main() {
</body> </body>
<script type="text/javascript"> <script type="text/javascript">
main(); 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> </script>
</html> </html>

18
docs/samples/index.css
View file

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

14
docs/samples/index.html
View file

@ -38,6 +38,8 @@ endfor
<option value="medium-italic">Medium Italic</option> <option value="medium-italic">Medium Italic</option>
<option value="bold" default>Bold</option> <option value="bold" default>Bold</option>
<option value="bold-italic">Bold Italic</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" default>Black</option>
<option value="black-italic">Black Italic</option> <option value="black-italic">Black Italic</option>
</select> </select>
@ -184,6 +186,16 @@ graph.setOrigin(-0.2, 0.8)
graph.setScale(0.049, 5) graph.setScale(0.049, 5)
var s2 = $('livesample.s2') 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() { function updateWidth() {
var fontSize = bindings.value('font-size', 0) 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-medium-italic')
cl.remove('font-style-bold') cl.remove('font-style-bold')
cl.remove('font-style-bold-italic') 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')
cl.remove('font-style-black-italic') cl.remove('font-style-black-italic')
cl.add('font-style-' + style) cl.add('font-style-' + style)