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

Negative slant angle changes to website

Browse source
This commit is contained in:
Rasmus Andersson 2019-08-03 10:36:10 -07:00
parent 862cd438ed
commit 164e53bb58
5 changed files with 250 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/index-var.css
View file

@ -108,5 +108,5 @@
font-size: var(--var-size); font-size: var(--var-size);
letter-spacing: var(--var-letterSpacing); letter-spacing: var(--var-letterSpacing);
line-height: var(--var-lineHeight); line-height: var(--var-lineHeight);
font-variation-settings: 'wght' var(--var-weight), 'slnt' var(--var-slant); font-variation-settings: 'wght' var(--var-weight), 'slnt' calc(-1 * var(--var-slant));
} }

7
docs/index-var.js
View file

@ -90,7 +90,12 @@ var ui = {
let s = sample.style let s = sample.style
for (let k in this.state) { for (let k in this.state) {
let f = this.formatters[k] let f = this.formatters[k]
s.setProperty(`--var-${k}`, f ? f(this.state[k]) : this.state[k]) let v = this.state[k]
if (k == "slant") {
// negate slant value (negative values causes positive grades)
v = -v
}
s.setProperty(`--var-${k}`, f ? f(v) : v)
} }
}, },
} }

6
docs/lab/index.html
View file

@ -2051,8 +2051,8 @@ function main() {
}) })
let varState = { let varState = {
weight: 400, // 400-900 weight: 400, // 400..900
slant: 0, // 0-10 slant: 0, // 0..-10
} }
function updateVarFont() { function updateVarFont() {
@ -2067,7 +2067,7 @@ function main() {
varSlantSettingValueImpl = false varSlantSettingValueImpl = false
setCSSProp( setCSSProp(
"font-variation-settings", "font-variation-settings",
`"wght" ${varState.weight}, "slnt" ${varState.slant}` `"wght" ${varState.weight}, "slnt" ${-varState.slant}`
) )
} else { } else {
setCSSProp("font-variation-settings", null) setCSSProp("font-variation-settings", null)

4
docs/lab/var.html
View file

@ -33,7 +33,7 @@ body {
padding: 40px 40px 40px 35px; padding: 40px 40px 40px 35px;
font-size: var(--size); font-size: var(--size);
letter-spacing: -0.03em; letter-spacing: -0.03em;
font-variation-settings: 'wght' var(--weight), 'slnt' var(--slant); font-variation-settings: 'wght' var(--weight), 'slnt' calc(-1 * var(--slant));
} }
@supports (font-variation-settings: normal) { @supports (font-variation-settings: normal) {
@ -84,7 +84,7 @@ label {
</select> </select>
</div> </div>
<div class="sample" contenteditable> <div class="sample" contenteditable>
Inter 3.0<br> Inter Typeface Family<br>
Variable weight axis<br> Variable weight axis<br>
Variable slant/oblique axis<br> Variable slant/oblique axis<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>

328
docs/var-test.html
View file

@ -1,18 +1,39 @@
<!DOCTYPE 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"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css"> <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-face {
font-family: 'Inter var experimental'; font-family: 'Inter var experimental';
font-weight: 100 900; font-weight: 100 900;
font-style: oblique 0deg 10deg; font-style: oblique 0deg -10deg;
font-named-instance: 'Regular'; font-named-instance: 'Regular';
src: url("font-files/Inter.var.woff2") format("woff2 supports variations(gvar)"), src: url("font-files/Inter.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
url("font-files/Inter.var.woff2") format("woff2-variations"), url("font-files/Inter.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
url("font-files/Inter.var.woff2") format("woff2");
} }
/* Fix for Safari where defining font-weight range casues regular style /* Fix for Safari where defining font-weight range casues regular style
@ -20,11 +41,10 @@
@font-face { @font-face {
font-family: 'Inter var experimental safari'; font-family: 'Inter var experimental safari';
/* DISABLE font-weight: 400 900; */ /* DISABLE font-weight: 400 900; */
font-style: oblique 0deg 10deg; font-style: oblique 0deg -10deg;
font-named-instance: 'Regular'; font-named-instance: 'Regular';
src: url("font-files/Inter.var.woff2") format("woff2 supports variations(gvar)"), src: url("font-files/Inter.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
url("font-files/Inter.var.woff2") format("woff2-variations"), url("font-files/Inter.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
url("font-files/Inter.var.woff2") format("woff2");
} }
/* Alternate two-file setup used for italic where oblique degrees are not /* Alternate two-file setup used for italic where oblique degrees are not
@ -34,18 +54,16 @@
font-weight: 100 900; font-weight: 100 900;
font-style: normal; font-style: normal;
font-named-instance: 'Regular'; font-named-instance: 'Regular';
src: url("font-files/Inter-upright.var.woff2") format("woff2 supports variations(gvar)"), src: url("font-files/Inter-upright.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
url("font-files/Inter-upright.var.woff2") format("woff2-variations"), url("font-files/Inter-upright.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
url("font-files/Inter-upright.var.woff2") format("woff2");
} }
@font-face { @font-face {
font-family: 'Inter var single-axis'; font-family: 'Inter var single-axis';
font-weight: 100 900; /*font-weight: 100 900;*/
font-style: italic; font-style: italic;
font-named-instance: 'Italic'; font-named-instance: 'Italic';
src: url("font-files/Inter-italic.var.woff2") format("woff2 supports variations(gvar)"), 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") format("woff2-variations"), url("font-files/Inter-italic.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
url("font-files/Inter-italic.var.woff2") format("woff2");
} }
@ -78,14 +96,28 @@ body {
} }
} }
.single-axis {
font-family: 'Inter var single-axis', sans-serif;
}
.samples { .samples {
display: flex; display: flex;
flex-wrap: wrap; 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 { .weightset {
/*background: pink;*/ /*background: pink;*/
margin: 10px; margin: 20px;
width: 200px;
overflow:hidden;
white-space: nowrap;
} }
.intro { .intro {
@ -108,12 +140,14 @@ body {
} }
h1, h2 { h1, h2 {
margin:0; margin: 0;
font-size: 2em; font-size: 2.5em;
font-weight: 700;
letter-spacing: -0.025em;
} }
h2 { h2 {
font-size: 1.2em; font-size: 1.5em;
font-weight: 600; letter-spacing: -0.02em;
} }
ul { ul {
padding-left: 1.2em; padding-left: 1.2em;
@ -157,51 +191,108 @@ if (
<p> <p>
Effective <tt>font-family: </tt><tt id="family-in-use"></tt> Effective <tt>font-family: </tt><tt id="family-in-use"></tt>
</p> </p>
<h2>Known issues:</h2> <h2>Known issues with variable fonts:</h2>
<ul> <ul>
<li> <li>
<b>Safari 12.0:</b> <b>Most browsers as of August 2019:</b>
Defining <tt>font-weight</tt> in <tt>@font-face</tt> causes <ul>
slnt axis to be maxed out by default, causing <tt>font-style:normal</tt> <li>
to be fully slanted/oblique/italic. This is counter-acted by using a Mapping of negative slant axis to <tt>font-style:italic</tt> has no effect.<br>
specific <tt>@font-face</tt> for Safari that doesn't define </li>
<tt>font-weight.</tt> <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>
<li> <li>
<b>Safari 12.0:</b> <b>Safari:</b>
<tt>font-synthesis:none</tt> is required or else <ul>
<tt>font-style:italic</tt> causes "double-slant" — <li>
the slnt axis gets maxed out as expected, but then faux oblique is Defining <tt>font-weight</tt> in <tt>@font-face</tt> causes
applied on top of it, causing an overly extreme slant. slnt axis to be maxed out by default, causing <tt>font-style:normal</tt>
This means that <tt>font-style:italic</tt> can't be used in Safari, to be fully slanted/oblique/italic. This is counter-acted by using a
and instead we use <tt>font-style:oblique</tt> which works in all specific <tt>@font-face</tt> for Safari that doesn't define
major browsers. Note that this effects <tt>&lt;em&gt;</tt> and <tt>font-weight.</tt>
<tt>&lt;i&gt;</tt> which in Safari implicitly has (Last confirmed version: Safari 12.1)
<tt>font-style:italic</tt>. </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>&lt;em&gt;</tt> and
<tt>&lt;i&gt;</tt> which in Safari implicitly has
<tt>font-style:italic</tt>.
(Last confirmed version: Safari 12.1)
</li>
</ul>
</li> </li>
<li> <li>
<b>Chrome 69+:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt> <b>Chrome:</b>
is not supported. <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 &lt;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>
<li> <li>
<b>Chrome 69+:</b> Rendering of overlapping shapes causes "blobs" or "ink bleed". <b>Firefox:</b>
Overlapping shapes, like the angle + horizontal stem of "A" are <ul>
rendered in separate MSAA passes and later combined as bitmaps, <li>
causing a multiplication effect on the alpha channel. 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 &lt;68:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt>
is not supported.
</li>
</ul>
</li> </li>
<li> <li>
<b>Chrome 69+ (Windows):</b> kerning is incorrect and <b>Edge:</b>
there are issues with ClearType where for example a lower-case "r" <ul>
(without hints) might be rendered much lower than a lower-case "n". <li>
<li> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt>
<b>Firefox 62:</b> 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>.
is not supported. Note: We use separate italic and upright font files for Edge in this
</li> test, which is why intermediate oblique degrees are displayed as either
<li> fully slanted or not slanted at all when viewing this in Edge.
<b>Edge 42:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt> (Last confirmed version: Edge 42)
is not supported, nor is Mapping of <tt>slnt</tt> axis to <tt>font-style:oblique</tt>. Note: We use separate italic and upright font files for Edge in this </li>
test, which is why intermediate oblique degrees are displayed as either </ul>
fully slanted or not slanted at all when viewing this in Edge.
</li> </li>
</ul> </ul>
</div> </div>
@ -222,65 +313,92 @@ if (docstyle.fontFamily.indexOf('Inter var') == -1) {
} }
var samples = document.querySelector('div.samples') var samples = document.querySelector('div.samples')
var weight = 100, weightMax = 900, weightStep = 20
var slant = 0, slantMax = 10, slantStep = 5
while (weight <= weightMax) { for (let className of ["multi-axis", "single-axis"]) {
slant = 0
let weightSet = document.createElement('div')
weightSet.className = 'weightset'
while (slant <= slantMax) { let h2 = document.createElement('h2')
let e = document.createElement('div') 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) { if (weight != 400) {
e.style.fontWeight = String(weight) e.style.fontWeight = String(weight)
} }
if (slant != 0) { e.style.fontStyle = 'oblique'
e.style.fontStyle = `oblique ${slant}deg` e.innerText = `I ${weight} oblique`
e.innerText = `I ${weight} oblique ${slant}`
} else {
e.innerText = `I ${weight}`
}
weightSet.appendChild(e) weightSet.appendChild(e)
slant += slantStep
}
e = document.createElement('div') e = document.createElement('div')
if (weight != 400) { if (weight != 400) {
e.style.fontWeight = String(weight) e.style.fontWeight = String(weight)
} }
e.style.fontStyle = 'oblique' e.style.fontStyle = 'italic'
e.innerText = `I ${weight} oblique` e.innerText = `I ${weight} italic`
weightSet.appendChild(e) weightSet.appendChild(e)
e = document.createElement('div') e = document.createElement('div')
if (weight != 400) { if (weight != 400) {
e.style.fontWeight = String(weight) e.style.fontWeight = String(weight)
} }
e.style.fontStyle = 'italic' let em = document.createElement('em')
e.innerText = `I ${weight} italic` em.innerText = `I ${weight} <em>`
weightSet.appendChild(e) e.appendChild(em)
weightSet.appendChild(e)
e = document.createElement('div') e = document.createElement('div')
if (weight != 400) { if (weight != 400) {
e.style.fontWeight = String(weight) e.style.fontWeight = String(weight)
} }
let em = document.createElement('em') em = document.createElement('i')
em.innerText = `I ${weight} <em>` em.innerText = `I ${weight} <i>`
e.appendChild(em) e.appendChild(em)
weightSet.appendChild(e) weightSet.appendChild(e)
e = document.createElement('div') if (className == "multi-axis") {
if (weight != 400) { e = document.createElement('div')
e.style.fontWeight = String(weight) if (weight != 400) {
} e.style.fontWeight = String(weight)
em = document.createElement('i') }
em.innerText = `I ${weight} <i>` e.style.fontVariationSettings = `'wght' ${weight}, 'slnt' -${slantMax}`
e.appendChild(em) e.innerText = `I ${weight} slnt -${slantMax}`
weightSet.appendChild(e) weightSet.appendChild(e)
}
samples.appendChild(weightSet) samples.appendChild(weightSet)
weight += weightStep weight += weightStep
}
} }