1
1
mirror of https://github.com/rsms/inter.git synced 2024-12-24 16:14:35 +03:00

Negative slant angle changes to website

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

View File

@ -108,5 +108,5 @@
font-size: var(--var-size);
letter-spacing: var(--var-letterSpacing);
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));
}

View File

@ -90,7 +90,12 @@ var ui = {
let s = sample.style
for (let k in this.state) {
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)
}
},
}

View File

@ -262,8 +262,8 @@ b \t \u1d47 \t U+1D47 \t | b \t
c \t \u1d9c \t U+1D9C \t | c \t
d \t \u1d48 \t U+1D48 \t | d \t
e \t \u1d49 \t U+1D49 \t | e \t \u2091 \t U+2091
f \t \u1da0 \t U+1DA0 \t | f \t
g \t \u1d4d \t U+1D4D \t | g \t
f \t \u1da0 \t U+1DA0 \t | f \t
g \t \u1d4d \t U+1D4D \t | g \t
h \t \u02b0 \t U+02B0 \t | h \t \u2095 \t U+2095
i \t \u1da6 \t U+1DA6 \t | i \t \u1D62 \t U+1D62
j \t \u02b2 \t U+02B2 \t | j \t \u2C7C \t U+2C7C
@ -273,16 +273,16 @@ m \t \u1d50 \t U+1D50 \t | m \t \u2098 \t U+2098
n \t \u207f \t U+207F \t | n \t \u2099 \t U+2099
o \t \u1d52 \t U+1D52 \t | o \t \u2092 \t U+2092
p \t \u1d56 \t U+1D56 \t | p \t \u209A \t U+209A
q \t \u146b \t U+146B \t | q \t
q \t \u146b \t U+146B \t | q \t
r \t \u02b3 \t U+02B3 \t | r \t \u1D63 \t U+1D63
s \t \u02e2 \t U+02E2 \t | s \t \u209B \t U+209B
t \t \u1d57 \t U+1D57 \t | t \t \u209C \t U+209C
u \t \u1d58 \t U+1D58 \t | u \t \u1D64 \t U+1D64
v \t \u1d5b \t U+1D5B \t | v \t \u1D65 \t U+1D65
w \t \u02b7 \t U+02B7 \t | w \t
w \t \u02b7 \t U+02B7 \t | w \t
x \t \u02e3 \t U+02E3 \t | x \t \u2093 \t x \t U+2093
y \t \u02b8 \t U+02B8 \t | y \t
z \t \u1dbb \t U+1DBB \t | z \t
y \t \u02b8 \t U+02B8 \t | y \t
z \t \u1dbb \t U+1DBB \t | z \t
`)
@ -332,16 +332,16 @@ AO AU AT AY BT BY CT ET Ec
",x," ',x,' ,x, “,x,” x, x,‟
L" L' L L” L L‟
aufkauf aufhalt aufbleib
ver/fl ixt auflassen
ver/fl ixt auflassen
ho/f_f e auffassen
/fi le aufißt raufjagen fıne
auf/fi nden Tief/fl ieger
Sto/f_f los Mu/f_f on Sto/f_f igel O/f_f zier
Ra/f_f band Tu/f_f höhle Su/f_f kopp
Ra/f_f band Tu/f_f höhle Su/f_f kopp
führen fördern fähre
wegjagen Bargfeld
kyrie afro arte axe luvwärts
Gevatter wann
Gevatter wann
ever gewettet severe
davon gewonnen down
wichtig recken
@ -411,7 +411,7 @@ nun (...) und ([...] sein
«sie». «das», «an»; «ich»:
»sie.« »das,« »an!« »ich?«
«sie.» «das,» «an!» «ich?»
sie. da, an; ich:
sie. da, an; ich:
sie. das, an; ich:
sie. das, an! ich?
sie. das, an! ich?
@ -427,7 +427,7 @@ auf//fall den//im den//ärger
da//leider auf//aber I//I
etwa 50% haben 37° im
£50 und ¥20 sind $30 und €60
den §235 sowie #35
den §235 sowie #35
4mal Seite 3f und 12/f_f .
Der §45a in den 20ern
von 18:30 bis 20:15 Uhr
@ -678,7 +678,7 @@ function getGlyphInfo(cb) {
fetch('glyphinfo.json').then(r => r.json()).then(glyphinfo => {
console.log('loaded glyphinfo.json')
// { "glyphs": [
// [name :string, isEmpty: 1|0, unicode? :string|null,
// [name :string, isEmpty: 1|0, unicode? :string|null,
// unicodeName? :string, color? :string|null],
// ["A", 0, 65, "LATIN CAPITAL LETTER A", "#dbeaf7"],
// ...
@ -866,7 +866,7 @@ samples.set('Word mix (combo pairs)', {
return '<em>loading words...</em>'
}
// TODO: randomize order, or maybe better to zip on
// TODO: randomize order, or maybe better to zip on
// let combs1 = combs.filter(c => c.indexOf(ch) != -1)
// or sometihng like that
@ -1581,7 +1581,7 @@ document.head.appendChild(fontCSS)
<box contenteditable spellcheck="false" class="primaryFont positive"><span>Rectangle</span></box>
<box contenteditable spellcheck="false" class="primaryFont positive tight"><span>Rectangle</span></box>
<box contenteditable spellcheck="false" class="primaryFont centered positive"><span>Rectangle</span></box>
<sep></sep>
<box contenteditable spellcheck="false" class="secondaryFont showOnlyWithSecondarySample"><span>Rectangle</span></box>
@ -2051,8 +2051,8 @@ function main() {
})
let varState = {
weight: 400, // 400-900
slant: 0, // 0-10
weight: 400, // 400..900
slant: 0, // 0..-10
}
function updateVarFont() {
@ -2067,7 +2067,7 @@ function main() {
varSlantSettingValueImpl = false
setCSSProp(
"font-variation-settings",
`"wght" ${varState.weight}, "slnt" ${varState.slant}`
`"wght" ${varState.weight}, "slnt" ${-varState.slant}`
)
} else {
setCSSProp("font-variation-settings", null)
@ -2200,7 +2200,7 @@ function main() {
ev.preventDefault()
}, {passive:false,capture:true})
vars.bind('lineHeight', lineHeightInput, (e, v) => {
setCSSProp('line-height', v ? v + 'px' : null)
}, (e, prevValue, ev) => {

View File

@ -33,7 +33,7 @@ body {
padding: 40px 40px 40px 35px;
font-size: var(--size);
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) {
@ -84,7 +84,7 @@ label {
</select>
</div>
<div class="sample" contenteditable>
Inter 3.0<br>
Inter Typeface Family<br>
Variable weight axis<br>
Variable slant/oblique axis<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>

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">
<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-style: oblique 0deg -10deg;
font-named-instance: 'Regular';
src: url("font-files/Inter.var.woff2") format("woff2 supports variations(gvar)"),
url("font-files/Inter.var.woff2") format("woff2-variations"),
url("font-files/Inter.var.woff2") format("woff2");
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
@ -20,11 +41,10 @@
@font-face {
font-family: 'Inter var experimental safari';
/* DISABLE font-weight: 400 900; */
font-style: oblique 0deg 10deg;
font-style: oblique 0deg -10deg;
font-named-instance: 'Regular';
src: url("font-files/Inter.var.woff2") format("woff2 supports variations(gvar)"),
url("font-files/Inter.var.woff2") format("woff2-variations"),
url("font-files/Inter.var.woff2") format("woff2");
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
@ -34,18 +54,16 @@
font-weight: 100 900;
font-style: normal;
font-named-instance: 'Regular';
src: url("font-files/Inter-upright.var.woff2") format("woff2 supports variations(gvar)"),
url("font-files/Inter-upright.var.woff2") format("woff2-variations"),
url("font-files/Inter-upright.var.woff2") format("woff2");
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?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
}
@font-face {
font-family: 'Inter var single-axis';
font-weight: 100 900;
/*font-weight: 100 900;*/
font-style: italic;
font-named-instance: 'Italic';
src: url("font-files/Inter-italic.var.woff2") format("woff2 supports variations(gvar)"),
url("font-files/Inter-italic.var.woff2") format("woff2-variations"),
url("font-files/Inter-italic.var.woff2") format("woff2");
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");
}
@ -78,14 +96,28 @@ body {
}
}
.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: 10px;
margin: 20px;
width: 200px;
overflow:hidden;
white-space: nowrap;
}
.intro {
@ -108,12 +140,14 @@ body {
}
h1, h2 {
margin:0;
font-size: 2em;
margin: 0;
font-size: 2.5em;
font-weight: 700;
letter-spacing: -0.025em;
}
h2 {
font-size: 1.2em;
font-weight: 600;
font-size: 1.5em;
letter-spacing: -0.02em;
}
ul {
padding-left: 1.2em;
@ -157,51 +191,108 @@ if (
<p>
Effective <tt>font-family: </tt><tt id="family-in-use"></tt>
</p>
<h2>Known issues:</h2>
<h2>Known issues with variable fonts:</h2>
<ul>
<li>
<b>Safari 12.0:</b>
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>
<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 12.0:</b>
<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>.
<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>&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>
<b>Chrome 69+:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt>
is not supported.
<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 &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>
<b>Chrome 69+:</b> 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.
<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 &lt;68:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt>
is not supported.
</li>
</ul>
</li>
<li>
<b>Chrome 69+ (Windows):</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".
<li>
<b>Firefox 62:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt>
is not supported.
</li>
<li>
<b>Edge 42:</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>. Note: We use separate italic and upright 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.
<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 upright 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>
@ -222,65 +313,92 @@ if (docstyle.fontFamily.indexOf('Inter var') == -1) {
}
var samples = document.querySelector('div.samples')
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'
for (let className of ["multi-axis", "single-axis"]) {
while (slant <= slantMax) {
let e = document.createElement('div')
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)
}
if (slant != 0) {
e.style.fontStyle = `oblique ${slant}deg`
e.innerText = `I ${weight} oblique ${slant}`
} else {
e.innerText = `I ${weight}`
}
e.style.fontStyle = 'oblique'
e.innerText = `I ${weight} oblique`
weightSet.appendChild(e)
slant += slantStep
}
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)
}
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)
}
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)
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
samples.appendChild(weightSet)
weight += weightStep
}
}