mirror of
https://github.com/rsms/inter.git
synced 2024-10-26 12:39:40 +03:00
407 lines
11 KiB
HTML
407 lines
11 KiB
HTML
---
|
|
layout: none
|
|
---
|
|
{%
|
|
|
|
for file in site.static_files %}{%
|
|
assign _path = file.path | remove_first: "/inter" %}{%
|
|
if _path == "/font-files/Inter.var.woff2" %}{%
|
|
assign inter_var_woff2_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
|
endif %}{%
|
|
endfor
|
|
|
|
%}<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style type="text/css">
|
|
|
|
/*
|
|
|
|
Note on font file URLs:
|
|
- The "v" parameter is used to ensure that the latest font file is used,
|
|
and not a past cached version.
|
|
- The "t" parameters can be used to debug which of the "format(...)" the
|
|
web browser chose (i.e. by using a web browser's developer tools.)
|
|
|
|
*/
|
|
|
|
@font-face {
|
|
font-family: 'Inter var experimental';
|
|
font-weight: 100 900;
|
|
font-style: oblique 0deg -10deg;
|
|
font-named-instance: 'Regular';
|
|
src: url("font-files/Inter.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
|
|
url("font-files/Inter.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
|
|
}
|
|
|
|
/* Fix for Safari where defining font-weight range casues regular style
|
|
to actually be italic. */
|
|
@font-face {
|
|
font-family: 'Inter var experimental safari';
|
|
/* DISABLE font-weight: 400 900; */
|
|
font-style: oblique 0deg -10deg;
|
|
font-named-instance: 'Regular';
|
|
src: url("font-files/Inter.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
|
|
url("font-files/Inter.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
|
|
}
|
|
|
|
/* Alternate two-file setup used for italic where oblique degrees are not
|
|
supported (MS Edge) */
|
|
@font-face {
|
|
font-family: 'Inter var single-axis';
|
|
font-weight: 100 900;
|
|
font-style: normal;
|
|
font-named-instance: 'Regular';
|
|
src: url("font-files/Inter-roman.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
|
|
url("font-files/Inter-roman.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: 'Inter var single-axis';
|
|
/*font-weight: 100 900;*/
|
|
font-style: italic;
|
|
font-named-instance: 'Italic';
|
|
src: url("font-files/Inter-italic.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
|
|
url("font-files/Inter-italic.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
|
|
}
|
|
|
|
|
|
|
|
html {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 20px;
|
|
font-synthesis: none;
|
|
letter-spacing: 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
@supports (font-variation-settings: normal) {
|
|
.unsupported {
|
|
display: none;
|
|
}
|
|
html {
|
|
font-family: 'Inter var experimental', sans-serif;
|
|
}
|
|
html.safari {
|
|
font-family: 'Inter var experimental safari', sans-serif;
|
|
}
|
|
html.msedge {
|
|
font-family: 'Inter var single-axis', sans-serif;
|
|
}
|
|
}
|
|
|
|
.single-axis {
|
|
font-family: 'Inter var single-axis', sans-serif;
|
|
}
|
|
|
|
.samples {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.samples > h2 {
|
|
flex: 1 0 100%;
|
|
padding-left:20px;
|
|
line-height:2;
|
|
padding-top: 1em;
|
|
border-top:1px solid #ccc;
|
|
margin-top: 1em;
|
|
}
|
|
.weightset {
|
|
/*background: pink;*/
|
|
margin: 20px;
|
|
width: 200px;
|
|
overflow:hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.intro {
|
|
font-size: 0.7em;
|
|
padding:2em;
|
|
border-bottom: 2px solid #000;
|
|
margin-bottom: 1em;
|
|
}
|
|
.intro em {
|
|
font-weight: 500;
|
|
font-style: oblique;
|
|
}
|
|
.intro > * {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.unsupported {
|
|
margin: 2em;
|
|
text-align: center;
|
|
}
|
|
|
|
h1, h2 {
|
|
margin: 0;
|
|
font-size: 2.5em;
|
|
font-weight: 700;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
h2 {
|
|
font-size: 1.5em;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
ul {
|
|
padding-left: 1.2em;
|
|
}
|
|
li {
|
|
margin: 0.5em 0;
|
|
}
|
|
tt {
|
|
font-family: Conoslas, Menlo, monospace;
|
|
color: #2c5d4e;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<script>
|
|
(function(u){
|
|
if (
|
|
u.indexOf('Safari/') != -1 &&
|
|
u.indexOf('Chrome/') == -1 &&
|
|
u.indexOf('Chromium/') == -1
|
|
) {
|
|
document.documentElement.classList.add('safari')
|
|
} else if (u.indexOf('Edge/') != -1) {
|
|
document.documentElement.classList.add('msedge')
|
|
}
|
|
})(navigator.userAgent);
|
|
</script>
|
|
<body>
|
|
<div class="intro">
|
|
<h1>Inter variable font test</h1>
|
|
<p>
|
|
Tests how the Inter variable font is rendered by the web browser
|
|
with the traditional style properties <tt>font-weight</tt> and
|
|
<tt>font-style</tt>.
|
|
</p>
|
|
<p>
|
|
We can always use <tt>font-variation-settings</tt> to gain full control
|
|
over variable font axes, which works as expected in all major browsers.
|
|
This document does <em>not</em> make use of <tt>font-variation-settings</tt>.
|
|
</p>
|
|
<p>
|
|
Effective <tt>font-family: </tt><tt id="family-in-use"></tt>
|
|
</p>
|
|
<h2>Known issues with variable fonts:</h2>
|
|
<ul>
|
|
<li>
|
|
<b>Most browsers as of August 2019:</b>
|
|
<ul>
|
|
<li>
|
|
Mapping of negative slant axis to <tt>font-style:italic</tt> has no effect.<br>
|
|
</li>
|
|
<li>
|
|
Mapping of negative slant axis to <tt>font-style:oblique</tt> has no effect.
|
|
</li>
|
|
<li>
|
|
All current stable versions of major web browser supports
|
|
<tt>format("woff2-variations")</tt>
|
|
for font url format in <tt>@font-face</tt> declarations.
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<b>Safari:</b>
|
|
<ul>
|
|
<li>
|
|
Defining <tt>font-weight</tt> in <tt>@font-face</tt> causes
|
|
slnt axis to be maxed out by default, causing <tt>font-style:normal</tt>
|
|
to be fully slanted/oblique/italic. This is counter-acted by using a
|
|
specific <tt>@font-face</tt> for Safari that doesn't define
|
|
<tt>font-weight.</tt>
|
|
(Last confirmed version: Safari 12.1)
|
|
</li>
|
|
<li>
|
|
<tt>font-synthesis:none</tt> is required or else
|
|
<tt>font-style:italic</tt> causes "double-slant" —
|
|
the slnt axis gets maxed out as expected, but then faux oblique is
|
|
applied on top of it, causing an overly extreme slant.
|
|
This means that <tt>font-style:italic</tt> can't be used in Safari,
|
|
and instead we use <tt>font-style:oblique</tt> which works in all
|
|
major browsers. Note that this effects <tt><em></tt> and
|
|
<tt><i></tt> which in Safari implicitly has
|
|
<tt>font-style:italic</tt>.
|
|
(Last confirmed version: Safari 12.1)
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<b>Chrome:</b>
|
|
<ul>
|
|
<li>
|
|
Rendering of overlapping shapes causes "blobs" or "ink bleed".
|
|
Overlapping shapes, like the angle + horizontal stem of "A" are
|
|
rendered in separate MSAA passes and later combined as bitmaps,
|
|
causing a multiplication effect on the alpha channel.
|
|
</li>
|
|
<li>
|
|
Passing explicit degrees to oblique (e.g. <tt>font-style:oblique -5deg</tt>)
|
|
is not supported. (Last confirmed version: Chrome 75)
|
|
</li>
|
|
<li>
|
|
For fonts with negative <tt>slnt</tt> values, as per the OT spec,
|
|
<tt>font-style:oblique</tt> has no effect (not mapped to negative max of slnt axis.)
|
|
(Last confirmed version: Chrome 75)
|
|
</li>
|
|
<li>
|
|
Mapping of negative-value <tt>ital</tt> and <tt>slnt</tt> axis
|
|
to <tt>font-style:italic</tt> is not supported.
|
|
</li>
|
|
<li>
|
|
<b>Version <75:</b> Mapping of positive-value <tt>ital</tt> and <tt>slnt</tt> axis
|
|
to <tt>font-style:italic</tt> is not supported.
|
|
</li>
|
|
<li>
|
|
<b>Windows only:</b> kerning is incorrect and
|
|
there are issues with ClearType where for example a lower-case "r"
|
|
(without hints) might be rendered much lower than a lower-case "n".
|
|
(Last confirmed version: Chrome 69)
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<b>Firefox:</b>
|
|
<ul>
|
|
<li>
|
|
For fonts with negative <tt>slnt</tt> values, as per the OT spec,
|
|
<tt>font-style:oblique</tt> has no effect (not mapped to negative max of slnt axis.)
|
|
(Last confirmed version: Firefox 68)
|
|
</li>
|
|
<li>
|
|
<b>Version <68:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt>
|
|
is not supported.
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<b>Edge:</b>
|
|
<ul>
|
|
<li>
|
|
Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt>
|
|
is not supported, nor is Mapping of <tt>slnt</tt> axis to <tt>font-style:oblique</tt>.
|
|
Note: We use separate italic and roman font files for Edge in this
|
|
test, which is why intermediate oblique degrees are displayed as either
|
|
fully slanted or not slanted at all when viewing this in Edge.
|
|
(Last confirmed version: Edge 42)
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="unsupported">
|
|
<p>This web browser does not support variable fonts</p>
|
|
</div>
|
|
<div class="samples"></div>
|
|
<script type="text/javascript">(function(){
|
|
|
|
var docstyle = getComputedStyle(document.documentElement)
|
|
|
|
// family-in-use
|
|
document.querySelector('#family-in-use').innerText = docstyle.fontFamily
|
|
|
|
if (docstyle.fontFamily.indexOf('Inter var') == -1) {
|
|
// variable fonts not unsupported
|
|
return;
|
|
}
|
|
|
|
var samples = document.querySelector('div.samples')
|
|
|
|
for (let className of ["multi-axis", "single-axis"]) {
|
|
|
|
let h2 = document.createElement('h2')
|
|
h2.innerText = className
|
|
samples.appendChild(h2)
|
|
|
|
var weight = 100, weightMax = 900, weightStep = 20
|
|
var slant = 0, slantMax = 10, slantStep = 5
|
|
|
|
while (weight <= weightMax) {
|
|
slant = 0
|
|
let weightSet = document.createElement('div')
|
|
weightSet.className = 'weightset ' + className
|
|
|
|
if (className == "multi-axis") {
|
|
while (slant <= slantMax) {
|
|
let e = document.createElement('div')
|
|
if (weight != 400) {
|
|
e.style.fontWeight = String(weight)
|
|
}
|
|
if (slant != 0) {
|
|
e.style.fontStyle = `oblique ${-slant}deg`
|
|
e.innerText = `I ${weight} oblique ${-slant}`
|
|
} else {
|
|
e.innerText = `I ${weight} normal`
|
|
}
|
|
weightSet.appendChild(e)
|
|
slant += slantStep
|
|
}
|
|
} else {
|
|
e = document.createElement('div')
|
|
if (weight != 400) {
|
|
e.style.fontWeight = String(weight)
|
|
}
|
|
e.innerText = `I ${weight} normal`
|
|
weightSet.appendChild(e)
|
|
}
|
|
|
|
e = document.createElement('div')
|
|
if (weight != 400) {
|
|
e.style.fontWeight = String(weight)
|
|
}
|
|
e.style.fontStyle = 'oblique'
|
|
e.innerText = `I ${weight} oblique`
|
|
weightSet.appendChild(e)
|
|
|
|
e = document.createElement('div')
|
|
if (weight != 400) {
|
|
e.style.fontWeight = String(weight)
|
|
}
|
|
e.style.fontStyle = 'italic'
|
|
e.innerText = `I ${weight} italic`
|
|
weightSet.appendChild(e)
|
|
|
|
e = document.createElement('div')
|
|
if (weight != 400) {
|
|
e.style.fontWeight = String(weight)
|
|
}
|
|
let em = document.createElement('em')
|
|
em.innerText = `I ${weight} <em>`
|
|
e.appendChild(em)
|
|
weightSet.appendChild(e)
|
|
|
|
e = document.createElement('div')
|
|
if (weight != 400) {
|
|
e.style.fontWeight = String(weight)
|
|
}
|
|
em = document.createElement('i')
|
|
em.innerText = `I ${weight} <i>`
|
|
e.appendChild(em)
|
|
weightSet.appendChild(e)
|
|
|
|
if (className == "multi-axis") {
|
|
e = document.createElement('div')
|
|
if (weight != 400) {
|
|
e.style.fontWeight = String(weight)
|
|
}
|
|
e.style.fontVariationSettings = `'wght' ${weight}, 'slnt' -${slantMax}`
|
|
e.innerText = `I ${weight} slnt -${slantMax}`
|
|
weightSet.appendChild(e)
|
|
}
|
|
|
|
samples.appendChild(weightSet)
|
|
weight += weightStep
|
|
}
|
|
}
|
|
|
|
|
|
})();</script>
|
|
</body>
|
|
</html> |