+
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
?!()[]{}&*^%$#@~
diff --git a/docs/inter.css b/docs/inter.css
index 2087f688d..7467e6284 100644
--- a/docs/inter.css
+++ b/docs/inter.css
@@ -1,136 +1,149 @@
+---
+layout: none
+---
+{%
+
+for file in site.static_files %}{%
+ assign _path = file.path | remove_first: "/inter" %}{%
+ if _path == "/font-files/Inter-Regular.woff2" %}{%
+ assign font_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
+ endif %}{%
+endfor
+
+%}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100;
- src: url("font-files/Inter-Thin.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-Thin.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-Thin.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100;
- src: url("font-files/Inter-ThinItalic.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-ThinItalic.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-ThinItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200;
- src: url("font-files/Inter-ExtraLight.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-ExtraLight.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-ExtraLight.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 200;
- src: url("font-files/Inter-ExtraLightItalic.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-ExtraLightItalic.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-ExtraLightItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
- src: url("font-files/Inter-Light.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-Light.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-Light.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
- src: url("font-files/Inter-LightItalic.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-LightItalic.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-LightItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
- src: url("font-files/Inter-Regular.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-Regular.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-Regular.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
- src: url("font-files/Inter-Italic.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-Italic.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-Italic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
- src: url("font-files/Inter-Medium.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-Medium.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-Medium.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 500;
- src: url("font-files/Inter-MediumItalic.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-MediumItalic.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-MediumItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
- src: url("font-files/Inter-SemiBold.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-SemiBold.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-SemiBold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
- src: url("font-files/Inter-SemiBoldItalic.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-SemiBoldItalic.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-SemiBoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
- src: url("font-files/Inter-Bold.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-Bold.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-Bold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
- src: url("font-files/Inter-BoldItalic.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-BoldItalic.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-BoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
- src: url("font-files/Inter-ExtraBold.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-ExtraBold.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-ExtraBold.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
- src: url("font-files/Inter-ExtraBoldItalic.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-ExtraBoldItalic.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-ExtraBoldItalic.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
- src: url("font-files/Inter-Black.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-Black.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-Black.woff?v={{font_v}}") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 900;
- src: url("font-files/Inter-BlackItalic.woff2?v=3.3") format("woff2"),
- url("font-files/Inter-BlackItalic.woff?v=3.3") format("woff");
+ src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2"),
+ url("font-files/Inter-BlackItalic.woff?v={{font_v}}") format("woff");
}
/* -------------------------------------------------------
@@ -147,18 +160,18 @@ Usage:
font-weight: 100 900;
font-style: normal;
font-named-instance: 'Regular';
- src: url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2 supports variations(gvar)"),
- url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2-variations"),
- url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2");
+ src: url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2 supports variations(gvar)"),
+ url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2-variations"),
+ url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2");
}
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-style: italic;
font-named-instance: 'Italic';
- src: url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2 supports variations(gvar)"),
- url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2-variations"),
- url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2");
+ src: url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2 supports variations(gvar)"),
+ url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2-variations"),
+ url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2");
}
/* Legacy naming compatibility */
@@ -167,18 +180,18 @@ Usage:
font-weight: 100 900;
font-style: normal;
font-named-instance: 'Regular';
- src: url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2 supports variations(gvar)"),
- url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2-variations"),
- url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2");
+ src: url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2 supports variations(gvar)"),
+ url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2-variations"),
+ url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2");
}
@font-face {
font-family: 'Inter var alt';
font-weight: 100 900;
font-style: italic;
font-named-instance: 'Italic';
- src: url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2 supports variations(gvar)"),
- url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2-variations"),
- url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2");
+ src: url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2 supports variations(gvar)"),
+ url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2-variations"),
+ url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2");
}
@@ -199,6 +212,6 @@ explicitly, e.g.
font-family: 'Inter var experimental';
font-weight: 100 900;
font-style: oblique 0deg 10deg;
- src: url("font-files/Inter.var.woff2?v=3.3") format("woff2-variations"),
- url("font-files/Inter.var.woff2?v=3.3") format("woff2");
+ src: url("font-files/Inter.var.woff2?v={{font_v}}") format("woff2-variations"),
+ url("font-files/Inter.var.woff2?v={{font_v}}") format("woff2");
}
diff --git a/docs/res/base.css b/docs/res/base.css
index d40cfd8ba..bee1d0dd6 100644
--- a/docs/res/base.css
+++ b/docs/res/base.css
@@ -14,15 +14,21 @@ body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
+
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
font-kerning: normal;
- -moz-font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
- -ms-font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
- -o-font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
- -webkit-font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
- font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
+ -webkit-font-kerning: normal;
+ -ms-font-kerning: normal;
+ -moz-font-kerning: normal;
+ -o-font-kerning: normal;
+
+ font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
+ -webkit-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
+ -ms-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
+ -moz-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
+ -o-font-variant-ligatures: contextual common-ligatures discretionary-ligatures;
}
/* Font style classifiers used by samples and dynmetrics */
@@ -521,3 +527,39 @@ box h3 {
}*/
}
+/*
+Feature helpers.
+
+Note: font-variant-alternates:character-variant is not yet supported by
+most browsers, which is why we use the "low leve" font-feature-settings
+instead.
+
+*/
+
+.ff-dlig { font-feature-settings: 'dlig' 1; }
+.ff-numr { font-feature-settings: 'numr' 1; }
+.ff-dnom { font-feature-settings: 'dnom' 1; }
+.ff-tnum { font-feature-settings: 'tnum' 1; }
+.ff-case { font-feature-settings: 'case' 1; }
+.ff-zero { font-feature-settings: 'zero' 1; }
+.ff-frac { font-feature-settings: 'frac' 1; }
+.ff-sups { font-feature-settings: 'sups' 1; }
+.ff-subs { font-feature-settings: 'subs' 1; }
+.ff-cpsp { font-feature-settings: 'cpsp' 1; }
+.ff-salt { font-feature-settings: 'salt' 1; }
+.ff-salt-zero { font-feature-settings: 'salt' 1, 'zero' 1; }
+.ff-cv07-salt-zero { font-feature-settings: 'cv07' 1, 'salt' 1, 'zero' 1; }
+
+.ff-ss01 { font-feature-settings: 'ss01' 1; }
+.ff-ss02 { font-feature-settings: 'ss02' 1; }
+
+.ff-cv01 { font-feature-settings: 'cv01' 1; }
+.ff-cv02 { font-feature-settings: 'cv02' 1; }
+.ff-cv03 { font-feature-settings: 'cv03' 1; }
+.ff-cv04 { font-feature-settings: 'cv04' 1; }
+.ff-cv05 { font-feature-settings: 'cv05' 1; }
+.ff-cv06 { font-feature-settings: 'cv06' 1; }
+.ff-cv07 { font-feature-settings: 'cv07' 1; }
+.ff-cv08 { font-feature-settings: 'cv08' 1; }
+.ff-cv09 { font-feature-settings: 'cv09' 1; }
+.ff-cv10 { font-feature-settings: 'cv10' 1; }
diff --git a/docs/samples/index.css b/docs/samples/index.css
index a1234d8cc..3f4de344c 100644
--- a/docs/samples/index.css
+++ b/docs/samples/index.css
@@ -20,7 +20,7 @@ livesample {
color: #111;
outline: none;
margin-top: 1rem;
- margin-bottom: 1rem;
+ margin-bottom: 3rem;
}
/*livesample {
@@ -50,6 +50,7 @@ livesample.s1 {
livesample.s2 {
/*max-width: 400px;*/
font-size: 1em;
+ margin-bottom: 1.5rem;
}
livesample.s3 {
font-size: 13px;
diff --git a/docs/samples/index.html b/docs/samples/index.html
index 3784fcccb..1437a14db 100644
--- a/docs/samples/index.html
+++ b/docs/samples/index.html
@@ -28,29 +28,57 @@ endfor
-
- Interfacing mechanisms
+
+
+ Martian™
Language Systems Inc.
-
- XP–45 / vessel
+
+ Interfacing mechanisms are periodically sequencing state
+
+
+
+ XP–45 SERVICE
+
+
+
+ Default forms G r l ß 1234567890
+
+
+
+ Alternate forms G r l ß 1234567890
+
+
+
+ Melvetica
+
+
+
+ Production filaments are awaiting 340-type transportation in docking bay
+ 4
-
+
Fabulous typography encountering spring
-
+
The user interface (UI), in the industrial design field of
human-computer interaction, is the space where
interactions between humans and machines occur.
-
+
Fire Island Beach is a barrier of sand, stretching for twenty miles
along the south coast of Long Island, and separating the Great South Bay
from the Atlantic ocean.