diff options
Diffstat (limited to 'docs/lab')
-rw-r--r-- | docs/lab/glyphinfo.json | 6 | ||||
-rw-r--r-- | docs/lab/index.html | 316 | ||||
-rw-r--r-- | docs/lab/lab.css | 7 | ||||
-rw-r--r-- | docs/lab/var.html | 14 |
4 files changed, 205 insertions, 138 deletions
diff --git a/docs/lab/glyphinfo.json b/docs/lab/glyphinfo.json index 3c565dfc2..6b0dff455 100644 --- a/docs/lab/glyphinfo.json +++ b/docs/lab/glyphinfo.json @@ -1312,7 +1312,6 @@ , ["bar", 124, "VERTICAL LINE", null, "rgba(204,239,241,0.004)"] , ["brokenbar", 166, "BROKEN BAR", null, "rgba(204,239,241,0.004)"] , ["backslash", 92, "REVERSE SOLIDUS", null, "rgba(239,239,239,0.004)"] -, ["hyphenbullet", 8259, "HYPHEN BULLET", null, "rgba(239,239,239,0.004)"] , ["hyphen", 45, "HYPHEN-MINUS", null, "rgba(239,239,239,0.004)"] , ["softhyphen", 173, "SOFT HYPHEN"] , ["endash", 8211, "EN DASH", null, "rgba(239,239,239,0.004)"] @@ -1321,12 +1320,16 @@ , ["horizontalbar", 8213, "HORIZONTAL BAR"] , ["bullet", 8226, "BULLET", null, "rgba(239,239,239,0.004)"] , ["openbullet", 9702, "WHITE BULLET"] +, ["hyphenbullet", 8259, "HYPHEN BULLET", null, "rgba(239,239,239,0.004)"] +, ["trianglebullet", 8227, "TRIANGULAR BULLET", null, "rgba(239,239,239,0.004)"] , ["hyphen.case", null, null, null, "#aaf260"] , ["endash.case", null, null, null, "#aaf260"] , ["figuredash.case", null, null, null, "#aaf260"] , ["emdash.case", null, null, null, "#aaf260"] , ["bullet.case", null, null, null, "#aaf260"] , ["openbullet.case", null, null, null, "#aaf260"] +, ["hyphenbullet.case", null, null, null, "#aaf260"] +, ["trianglebullet.case"] , ["quoteleft", 8216, "LEFT SINGLE QUOTATION MARK", null, "rgba(239,239,239,0.004)"] , ["quoteright", 8217, "RIGHT SINGLE QUOTATION MARK", null, "rgba(239,239,239,0.004)"] , ["apostrophemod", 700, "MODIFIER LETTER APOSTROPHE"] @@ -1702,7 +1705,6 @@ , ["uni03F5", 1013, "GREEK LUNATE EPSILON SYMBOL"] , ["uni03F6", 1014, "GREEK REVERSED LUNATE EPSILON SYMBOL", null, "rgba(204,239,241,0.004)"] , ["longs", 383, "LATIN SMALL LETTER LONG S"] -, ["trianglebullet", 8227, "TRIANGULAR BULLET", null, "rgba(239,239,239,0.004)"] , ["Ysmallcap", 655, "LATIN LETTER SMALL CAPITAL Y"] , ["uni03FB", 1019, "GREEK SMALL LETTER SAN"] , ["uni03FD", 1021, "GREEK CAPITAL REVERSED LUNATE SIGMA SYMBOL"] diff --git a/docs/lab/index.html b/docs/lab/index.html index 452b150d5..d3bc254e4 100644 --- a/docs/lab/index.html +++ b/docs/lab/index.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>lab</title> <link rel="icon" type="image/png" href="favicon.png" /> - <link href="../inter-ui.css" rel="stylesheet"> + <link href="../inter.css" rel="stylesheet"> <script type="text/javascript"> const samples = new Map() @@ -1006,327 +1006,387 @@ for (const ch of uniqueChars) { @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'); @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: normal; font-weight: 100; font-display: block; - src: url("fonts/const/Inter-UI-Thin.woff2") format("woff2"), - url("fonts/const/Inter-UI-Thin.woff") format("woff"); + src: url("fonts/const/Inter-Thin.woff2") format("woff2"), + url("/font-files/Inter-Thin.woff2") format("woff2"), + url("fonts/const/Inter-Thin.woff") format("woff"), + url("/font-files/Inter-Thin.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: italic; font-weight: 100; font-display: block; - src: url("fonts/const/Inter-UI-ThinItalic.woff2") format("woff2"), - url("fonts/const/Inter-UI-ThinItalic.woff") format("woff"); + src: url("fonts/const/Inter-ThinItalic.woff2") format("woff2"), + url("/font-files/Inter-ThinItalic.woff2") format("woff2"), + url("fonts/const/Inter-ThinItalic.woff") format("woff"), + url("/font-files/Inter-ThinItalic.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: normal; font-weight: 200; font-display: block; - src: url("fonts/const/Inter-UI-ExtraLight.woff2") format("woff2"), - url("fonts/const/Inter-UI-ExtraLight.woff") format("woff"); + src: url("fonts/const/Inter-ExtraLight.woff2") format("woff2"), + url("/font-files/Inter-ExtraLight.woff2") format("woff2"), + url("fonts/const/Inter-ExtraLight.woff") format("woff"), + url("/font-files/Inter-ExtraLight.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: italic; font-weight: 200; font-display: block; - src: url("fonts/const/Inter-UI-ExtraLightItalic.woff2") format("woff2"), - url("fonts/const/Inter-UI-ExtraLightItalic.woff") format("woff"); + src: url("fonts/const/Inter-ExtraLightItalic.woff2") format("woff2"), + url("/font-files/Inter-ExtraLightItalic.woff2") format("woff2"), + url("fonts/const/Inter-ExtraLightItalic.woff") format("woff"), + url("/font-files/Inter-ExtraLightItalic.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: normal; font-weight: 300; font-display: block; - src: url("fonts/const/Inter-UI-Light.woff2") format("woff2"), - url("fonts/const/Inter-UI-Light.woff") format("woff"); + src: url("fonts/const/Inter-Light.woff2") format("woff2"), + url("/font-files/Inter-Light.woff2") format("woff2"), + url("fonts/const/Inter-Light.woff") format("woff"), + url("/font-files/Inter-Light.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: italic; font-weight: 300; font-display: block; - src: url("fonts/const/Inter-UI-LightItalic.woff2") format("woff2"), - url("fonts/const/Inter-UI-LightItalic.woff") format("woff"); + src: url("fonts/const/Inter-LightItalic.woff2") format("woff2"), + url("/font-files/Inter-LightItalic.woff2") format("woff2"), + url("fonts/const/Inter-LightItalic.woff") format("woff"), + url("/font-files/Inter-LightItalic.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: normal; font-weight: 400; font-display: block; - src: url("fonts/const/Inter-UI-Regular.woff2") format("woff2"), - url("fonts/const/Inter-UI-Regular.woff") format("woff"); + src: url("fonts/const/Inter-Regular.woff2") format("woff2"), + url("/font-files/Inter-Regular.woff2") format("woff2"), + url("fonts/const/Inter-Regular.woff") format("woff"), + url("/font-files/Inter-Regular.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: italic; font-weight: 400; font-display: block; - src: url("fonts/const/Inter-UI-Italic.woff2") format("woff2"), - url("fonts/const/Inter-UI-Italic.woff") format("woff"); + src: url("fonts/const/Inter-Italic.woff2") format("woff2"), + url("/font-files/Inter-Italic.woff2") format("woff2"), + url("fonts/const/Inter-Italic.woff") format("woff"), + url("/font-files/Inter-Italic.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: normal; font-weight: 500; font-display: block; - src: url("fonts/const/Inter-UI-Medium.woff2") format("woff2"), - url("fonts/const/Inter-UI-Medium.woff") format("woff"); + src: url("fonts/const/Inter-Medium.woff2") format("woff2"), + url("/font-files/Inter-Medium.woff2") format("woff2"), + url("fonts/const/Inter-Medium.woff") format("woff"), + url("/font-files/Inter-Medium.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: italic; font-weight: 500; font-display: block; - src: url("fonts/const/Inter-UI-MediumItalic.woff2") format("woff2"), - url("fonts/const/Inter-UI-MediumItalic.woff") format("woff"); + src: url("fonts/const/Inter-MediumItalic.woff2") format("woff2"), + url("/font-files/Inter-MediumItalic.woff2") format("woff2"), + url("fonts/const/Inter-MediumItalic.woff") format("woff"), + url("/font-files/Inter-MediumItalic.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: normal; font-weight: 600; font-display: block; - src: url("fonts/const/Inter-UI-SemiBold.woff2") format("woff2"), - url("fonts/const/Inter-UI-SemiBold.woff") format("woff"); + src: url("fonts/const/Inter-SemiBold.woff2") format("woff2"), + url("/font-files/Inter-SemiBold.woff2") format("woff2"), + url("fonts/const/Inter-SemiBold.woff") format("woff"), + url("/font-files/Inter-SemiBold.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: italic; font-weight: 600; font-display: block; - src: url("fonts/const/Inter-UI-SemiBoldItalic.woff2") format("woff2"), - url("fonts/const/Inter-UI-SemiBoldItalic.woff") format("woff"); + src: url("fonts/const/Inter-SemiBoldItalic.woff2") format("woff2"), + url("/font-files/Inter-SemiBoldItalic.woff2") format("woff2"), + url("fonts/const/Inter-SemiBoldItalic.woff") format("woff"), + url("/font-files/Inter-SemiBoldItalic.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: normal; font-weight: 700; font-display: block; - src: url("fonts/const/Inter-UI-Bold.woff2") format("woff2"), - url("fonts/const/Inter-UI-Bold.woff") format("woff"); + src: url("fonts/const/Inter-Bold.woff2") format("woff2"), + url("/font-files/Inter-Bold.woff2") format("woff2"), + url("fonts/const/Inter-Bold.woff") format("woff"), + url("/font-files/Inter-Bold.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: italic; font-weight: 700; font-display: block; - src: url("fonts/const/Inter-UI-BoldItalic.woff2") format("woff2"), - url("fonts/const/Inter-UI-BoldItalic.woff") format("woff"); + src: url("fonts/const/Inter-BoldItalic.woff2") format("woff2"), + url("/font-files/Inter-BoldItalic.woff2") format("woff2"), + url("fonts/const/Inter-BoldItalic.woff") format("woff"), + url("/font-files/Inter-BoldItalic.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: normal; font-weight: 800; font-display: block; - src: url("fonts/const/Inter-UI-ExtraBold.woff2") format("woff2"), - url("fonts/const/Inter-UI-ExtraBold.woff") format("woff"); + src: url("fonts/const/Inter-ExtraBold.woff2") format("woff2"), + url("/font-files/Inter-ExtraBold.woff2") format("woff2"), + url("fonts/const/Inter-ExtraBold.woff") format("woff"), + url("/font-files/Inter-ExtraBold.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: italic; font-weight: 800; font-display: block; - src: url("fonts/const/Inter-UI-ExtraBoldItalic.woff2") format("woff2"), - url("fonts/const/Inter-UI-ExtraBoldItalic.woff") format("woff"); + src: url("fonts/const/Inter-ExtraBoldItalic.woff2") format("woff2"), + url("/font-files/Inter-ExtraBoldItalic.woff2") format("woff2"), + url("fonts/const/Inter-ExtraBoldItalic.woff") format("woff"), + url("/font-files/Inter-ExtraBoldItalic.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: normal; font-weight: 900; font-display: block; - src: url("fonts/const/Inter-UI-Black.woff2") format("woff2"), - url("fonts/const/Inter-UI-Black.woff") format("woff"); + src: url("fonts/const/Inter-Black.woff2") format("woff2"), + url("/font-files/Inter-Black.woff2") format("woff2"), + url("fonts/const/Inter-Black.woff") format("woff"), + url("/font-files/Inter-Black.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-VERSION'; + font-family: 'Inter-VERSION'; font-style: italic; font-weight: 900; font-display: block; - src: url("fonts/const/Inter-UI-BlackItalic.woff2") format("woff2"), - url("fonts/const/Inter-UI-BlackItalic.woff") format("woff"); + src: url("fonts/const/Inter-BlackItalic.woff2") format("woff2"), + url("/font-files/Inter-BlackItalic.woff") format("woff2"), + url("fonts/const/Inter-BlackItalic.woff") format("woff"), + url("/font-files/Inter-BlackItalic.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-var-VERSION'; + font-family: 'Inter-var-VERSION'; font-style: oblique 0deg 10deg; font-weight: 100 900; font-display: block; - src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations"); + src: url('fonts/var/Inter.var.woff2') format("woff2-variations"), + url('/font-files/Inter.var.woff2') format("woff2-variations"); +} + +@font-face { + font-family: 'Inter-var-VERSION safari'; + font-style: oblique 0deg 10deg; + font-display: block; + src: url('fonts/var/Inter.var.woff2') format("woff2-variations"), + url('/font-files/Inter.var.woff2') format("woff2-variations"); } /* ----------------------------------------------------------------------- */ /* hinted */ @font-face { - font-family: 'Inter-UI-hinted-VERSION'; + font-family: 'Inter-hinted-VERSION'; font-style: normal; font-weight: 400; font-display: block; - src: url("fonts/const-hinted/Inter-UI-Regular.woff2") format("woff2"), - url("fonts/const-hinted/Inter-UI-Regular.woff") format("woff"); + src: url("fonts/const-hinted/Inter-Regular.woff2") format("woff2"), + url("fonts/const-hinted/Inter-Regular.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-hinted-VERSION'; + font-family: 'Inter-hinted-VERSION'; font-style: italic; font-weight: 400; font-display: block; - src: url("fonts/const-hinted/Inter-UI-Italic.woff2") format("woff2"), - url("fonts/const-hinted/Inter-UI-Italic.woff") format("woff"); + src: url("fonts/const-hinted/Inter-Italic.woff2") format("woff2"), + url("fonts/const-hinted/Inter-Italic.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-hinted-VERSION'; + font-family: 'Inter-hinted-VERSION'; font-style: normal; font-weight: 500; font-display: block; - src: url("fonts/const-hinted/Inter-UI-Medium.woff2") format("woff2"), - url("fonts/const-hinted/Inter-UI-Medium.woff") format("woff"); + src: url("fonts/const-hinted/Inter-Medium.woff2") format("woff2"), + url("fonts/const-hinted/Inter-Medium.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-hinted-VERSION'; + font-family: 'Inter-hinted-VERSION'; font-style: italic; font-weight: 500; font-display: block; - src: url("fonts/const-hinted/Inter-UI-MediumItalic.woff2") format("woff2"), - url("fonts/const-hinted/Inter-UI-MediumItalic.woff") format("woff"); + src: url("fonts/const-hinted/Inter-MediumItalic.woff2") format("woff2"), + url("fonts/const-hinted/Inter-MediumItalic.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-hinted-VERSION'; + font-family: 'Inter-hinted-VERSION'; font-style: normal; font-weight: 600; font-display: block; - src: url("fonts/const-hinted/Inter-UI-SemiBold.woff2") format("woff2"), - url("fonts/const-hinted/Inter-UI-SemiBold.woff") format("woff"); + src: url("fonts/const-hinted/Inter-SemiBold.woff2") format("woff2"), + url("fonts/const-hinted/Inter-SemiBold.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-hinted-VERSION'; + font-family: 'Inter-hinted-VERSION'; font-style: italic; font-weight: 600; font-display: block; - src: url("fonts/const-hinted/Inter-UI-SemiBoldItalic.woff2") format("woff2"), - url("fonts/const-hinted/Inter-UI-SemiBoldItalic.woff") format("woff"); + src: url("fonts/const-hinted/Inter-SemiBoldItalic.woff2") format("woff2"), + url("fonts/const-hinted/Inter-SemiBoldItalic.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-hinted-VERSION'; + font-family: 'Inter-hinted-VERSION'; font-style: normal; font-weight: 700; font-display: block; - src: url("fonts/const-hinted/Inter-UI-Bold.woff2") format("woff2"), - url("fonts/const-hinted/Inter-UI-Bold.woff") format("woff"); + src: url("fonts/const-hinted/Inter-Bold.woff2") format("woff2"), + url("fonts/const-hinted/Inter-Bold.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-hinted-VERSION'; + font-family: 'Inter-hinted-VERSION'; font-style: italic; font-weight: 700; font-display: block; - src: url("fonts/const-hinted/Inter-UI-BoldItalic.woff2") format("woff2"), - url("fonts/const-hinted/Inter-UI-BoldItalic.woff") format("woff"); + src: url("fonts/const-hinted/Inter-BoldItalic.woff2") format("woff2"), + url("fonts/const-hinted/Inter-BoldItalic.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-hinted-VERSION'; + font-family: 'Inter-hinted-VERSION'; font-style: normal; font-weight: 800; font-display: block; - src: url("fonts/const-hinted/Inter-UI-ExtraBold.woff2") format("woff2"), - url("fonts/const-hinted/Inter-UI-ExtraBold.woff") format("woff"); + src: url("fonts/const-hinted/Inter-ExtraBold.woff2") format("woff2"), + url("fonts/const-hinted/Inter-ExtraBold.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-hinted-VERSION'; + font-family: 'Inter-hinted-VERSION'; font-style: italic; font-weight: 800; font-display: block; - src: url("fonts/const-hinted/Inter-UI-ExtraBoldItalic.woff2") format("woff2"), - url("fonts/const-hinted/Inter-UI-ExtraBoldItalic.woff") format("woff"); + src: url("fonts/const-hinted/Inter-ExtraBoldItalic.woff2") format("woff2"), + url("fonts/const-hinted/Inter-ExtraBoldItalic.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-hinted-VERSION'; + font-family: 'Inter-hinted-VERSION'; font-style: normal; font-weight: 900; font-display: block; - src: url("fonts/const-hinted/Inter-UI-Black.woff2") format("woff2"), - url("fonts/const-hinted/Inter-UI-Black.woff") format("woff"); + src: url("fonts/const-hinted/Inter-Black.woff2") format("woff2"), + url("fonts/const-hinted/Inter-Black.woff") format("woff"); } @font-face { - font-family: 'Inter-UI-hinted-VERSION'; + font-family: 'Inter-hinted-VERSION'; font-style: italic; font-weight: 900; font-display: block; - src: url("fonts/const-hinted/Inter-UI-BlackItalic.woff2") format("woff2"), - url("fonts/const-hinted/Inter-UI-BlackItalic.woff") format("woff"); + src: url("fonts/const-hinted/Inter-BlackItalic.woff2") format("woff2"), + url("fonts/const-hinted/Inter-BlackItalic.woff") format("woff"); } @font-face { /* Note: Not hinted */ - font-family: 'Inter-UI-var-hinted-VERSION'; + font-family: 'Inter-var-hinted-VERSION'; font-style: oblique 0deg 10deg; font-weight: 400 900; font-display: block; - src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations"); + src: url('fonts/var/Inter.var.woff2') format("woff2-variations"); } /* ----------------------------------------------------------------------- */ -.inter-ui, -.inter-ui input, -.inter-ui select { - font-family: 'Inter-UI-VERSION', 'Inter UI', serif !important; +.inter, +.inter input, +.inter select { + font-family: 'Inter-VERSION', 'Inter', serif !important; +} + +body.varfont .inter, +body.varfont .inter input, +body.varfont .inter select { + font-family: 'Inter-var-VERSION', 'Inter var', serif !important; } -body.varfont .inter-ui, -body.varfont .inter-ui input, -body.varfont .inter-ui select { - font-family: 'Inter-UI-var-VERSION', 'Inter UI var', serif !important; +html.safari body.varfont .inter, +html.safari body.varfont .inter input, +html.safari body.varfont .inter select { + font-family: 'Inter-var-VERSION safari', 'Inter var safari', serif !important; } -body.hinted .inter-ui, -body.hinted .inter-ui input, -body.hinted .inter-ui select { - font-family: 'Inter-UI-hinted-VERSION', 'Inter UI', serif !important; +body.hinted .inter, +body.hinted .inter input, +body.hinted .inter select { + font-family: 'Inter-hinted-VERSION', 'Inter', serif !important; } -body.varfont.hinted .inter-ui, -body.varfont.hinted .inter-ui input, -body.varfont.hinted .inter-ui select { - font-family: 'Inter-UI-var-hinted-VERSION', 'Inter UI var', serif !important; +body.varfont.hinted .inter, +body.varfont.hinted .inter input, +body.varfont.hinted .inter select { + font-family: 'Inter-var-hinted-VERSION', 'Inter var', serif !important; } </style> <link href="lab.css" rel="stylesheet"> <script type="text/javascript"> +// Safari? +(function(u){ if ( + u.indexOf('Safari/') != -1 && + u.indexOf('Chrome/') == -1 && + u.indexOf('Chromium/') == -1 +) { + document.documentElement.classList.add('safari') +} })(navigator.userAgent); + const fontVersion = Math.round(Date.now()).toString(36) -let fontFamilyName = 'Inter-UI-v' + fontVersion -let fontFamilyNameHinted = 'Inter-UI-hinted-v' + fontVersion -let fontFamilyNameVar = 'Inter-UI-var-v' + fontVersion -let fontFamilyNameVarHinted = 'Inter-UI-var-hinted-v' + fontVersion +let fontFamilyName = 'Inter-v' + fontVersion +let fontFamilyNameHinted = 'Inter-hinted-v' + fontVersion +let fontFamilyNameVar = 'Inter-var-v' + fontVersion +let fontFamilyNameVarHinted = 'Inter-var-hinted-v' + fontVersion const fontCSSTemplate = document.querySelector('#font-css') const fontCSS = fontCSSTemplate.cloneNode(true) fontCSS.innerHTML = fontCSS.innerHTML - .replace(/Inter-UI-var-VERSION/g, fontFamilyNameVar) - .replace(/Inter-UI-var-hinted-VERSION/g, fontFamilyNameVarHinted) - .replace(/Inter-UI-hinted-VERSION/g, fontFamilyNameHinted) - .replace(/Inter-UI-VERSION/g, fontFamilyName) + .replace(/Inter-var-VERSION/g, fontFamilyNameVar) + .replace(/Inter-var-hinted-VERSION/g, fontFamilyNameVarHinted) + .replace(/Inter-hinted-VERSION/g, fontFamilyNameHinted) + .replace(/Inter-VERSION/g, fontFamilyName) .replace(/(\.woff2?)/g, '$1?r='+fontVersion) -fontFamilyName += ", 'Inter UI'" -fontFamilyNameHinted += ", 'Inter UI'" -fontFamilyNameVar += ", 'Inter UI var'" -fontFamilyNameVarHinted += ", 'Inter UI var'" +fontFamilyName += ", 'Inter'" +fontFamilyNameHinted += ", 'Inter'" +fontFamilyNameVar += ", 'Inter var'" +fontFamilyNameVarHinted += ", 'Inter var'" fontCSS.setAttribute('id', '') fontCSS.setAttribute('type', 'text/css') document.head.appendChild(fontCSS) @@ -1334,7 +1394,7 @@ document.head.appendChild(fontCSS) </script> </head> <body> - <div class="options inter-ui"> + <div class="options inter"> <label class="style"> <select name="weight" style="max-width:100px"> @@ -1516,7 +1576,7 @@ document.head.appendChild(fontCSS) <div class="checkbox-group"> <span>Default-on features:</span> <label title="Contextual alternates"><input type="checkbox" class="featopt" name="feat:calt=0"> Disable calt (Contextual alternates)</label> - <label title="Common ligatures (there are no common ligatures in Inter UI, but the font you are comparing to may have)"><input type="checkbox" class="featopt" name="feat:liga=0"> Disable liga (Common ligatures)</label> + <label title="Common ligatures (there are no common ligatures in Inter, but the font you are comparing to may have)"><input type="checkbox" class="featopt" name="feat:liga=0"> Disable liga (Common ligatures)</label> <label title="Kerning"><input type="checkbox" class="featopt" name="feat:kern=0"> Disable kern (Kerning)</label> </div> @@ -1539,7 +1599,7 @@ document.head.appendChild(fontCSS) <div class="preview"> <samples> - <sample contenteditable spellcheck="false" class="primary inter-ui"></sample> + <sample contenteditable spellcheck="false" class="primary inter"></sample> <sample contenteditable spellcheck="false" class="secondary"></sample> </samples> @@ -1547,7 +1607,7 @@ document.head.appendChild(fontCSS) <canvas id="renderCanvas" width="120" height="50"></canvas> </div> - <div id="measure" class="inter-ui">Åj</div> + <div id="measure" class="inter">Åj</div> <script type="text/javascript"> @@ -1771,7 +1831,7 @@ class Vars { function main() { const vars = new Vars(document.location.search) - let interUISample = document.querySelector('sample.inter-ui'); + let interUISample = document.querySelector('sample.inter'); let secondarySample = document.querySelector('sample.secondary'); secondarySample.innerText = interUISample.innerText; diff --git a/docs/lab/lab.css b/docs/lab/lab.css index 1c912f7d0..8f86b98ac 100644 --- a/docs/lab/lab.css +++ b/docs/lab/lab.css @@ -10,7 +10,7 @@ body { font-family: "Roboto", serif; } .systemFont { - font-family: system-ui,-apple-system,"SF Pro Text","SF UI Text",BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;, serif; + font-family: system-ui,-system,-system-ui,-apple-system,sans-serif; } .de-emphasize { color:#555; @@ -34,6 +34,11 @@ h2 { margin: 42px 18px 0 18px; padding: 6px; } + +i, cite, em, var, address, dfn { + font-style: oblique; +} + .options { width: 275px; box-sizing:border-box; diff --git a/docs/lab/var.html b/docs/lab/var.html index 32f9f63db..2fd2d3c6e 100644 --- a/docs/lab/var.html +++ b/docs/lab/var.html @@ -2,19 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8"> -<link href="../inter-ui.css" rel="stylesheet"> +<link href="../inter.css" rel="stylesheet"> <style type="text/css"> @font-face { - font-family: 'Inter UI var'; + font-family: 'Inter var'; font-weight: 400 900; font-style: oblique 0deg 10deg; - src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations"), - url('../font-files/Inter-UI.var.woff2') format("woff2-variations"); + src: url('fonts/var/Inter.var.woff2') format("woff2-variations"), + url('../font-files/Inter.var.woff2') format("woff2-variations"); } html { - font-family: 'Inter UI', sans-serif; + font-family: 'Inter', sans-serif; font-size: 14px; letter-spacing: 0; } @@ -32,7 +32,7 @@ body { @supports (font-variation-settings: normal) { html { - font-family: 'Inter UI var', sans-serif; + font-family: 'Inter var', sans-serif; } } @@ -71,7 +71,7 @@ label { </label> </div> <div class="sample" contenteditable> -Inter UI 3.0<br> +Inter 3.0<br> Variable weight axis<br> Variable slant/oblique axis<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |