summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--docs/_includes/preload-font-files.html13
-rw-r--r--docs/index.html2
-rw-r--r--docs/inter.css113
-rw-r--r--docs/res/base.css52
-rw-r--r--docs/samples/index.css3
-rw-r--r--docs/samples/index.html46
6 files changed, 160 insertions, 69 deletions
diff --git a/docs/_includes/preload-font-files.html b/docs/_includes/preload-font-files.html
index 041624df6..d30007d12 100644
--- a/docs/_includes/preload-font-files.html
+++ b/docs/_includes/preload-font-files.html
@@ -3,7 +3,14 @@
capture url_root
%}{% if site.safe == false %}/{% else %}/inter/{% endif
%}{%
-endcapture
+endcapture %}{%
-%}<link rel="preload" href="{{url_root}}font-files/Inter-upright.var.woff2?v=3.3" as="font" type="font/woff2" crossorigin>
- <link rel="preload" href="{{url_root}}font-files/Inter-italic.var.woff2?v=3.3" as="font" type="font/woff2" crossorigin> \ No newline at end of file
+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
+
+%}<link rel="preload" href="{{url_root}}font-files/Inter-upright.var.woff2?v={{font_v}}" as="font" type="font/woff2" crossorigin>
+ <link rel="preload" href="{{url_root}}font-files/Inter-italic.var.woff2?v={{font_v}}" as="font" type="font/woff2" crossorigin> \ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 10c11672b..fb6e376a7 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -158,7 +158,7 @@ html { font-family: 'Inter', sans-serif; }
</div>
</div></div>
<div class="row white variable-sample-row">
- <div class="variable-sample" contenteditable>
+ <div class="variable-sample" contenteditable spellcheck="false">
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
?!()[]{}&*^%$#@~
</div>
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
<div class="row"><div>
<div class="live">
- <livesample data-ctxedit="sample-x1"
- style="font-size:80px;line-height:1.0" contenteditable>
- Interfacing mechanisms
+
+ <livesample data-ctxedit="sample-800-1" spellcheck="false"
+ style="font-weight:800;font-size:60px;line-height:0.72;letter-spacing:-0.04em" contenteditable>
+ Martian™<br>Language Systems Inc.
+ </livesample>
+
+ <livesample data-ctxedit="sample-400-1" spellcheck="false"
+ style="font-weight:400;font-size:18px;line-height:1.0" contenteditable>
+ Interfacing mechanisms are periodically sequencing state
+ </livesample>
+
+ <livesample data-ctxedit="sample-100-1" spellcheck="false"
+ style="font-weight:100;font-size:120px;line-height:1.0;letter-spacing:-0.05em" contenteditable>
+ XP–45 SERVICE
+ </livesample>
+
+ <livesample data-ctxedit="sample-500-1" spellcheck="false"
+ style="font-weight:500;font-size:50px;line-height:1.0;letter-spacing:-0.03em" contenteditable>
+ Default forms G r l ß 1234567890
+ </livesample>
+
+ <livesample data-ctxedit="sample-500-2" spellcheck="false"
+ class="ff-cv07-salt-zero"
+ style="font-weight:500;font-size:50px;line-height:1.0;letter-spacing:-0.03em" contenteditable>
+ Alternate forms G r l ß 1234567890
+ </livesample>
+
+ <livesample data-ctxedit="sample-900-1" spellcheck="false"
+ style="font-weight:900;font-size:170px;line-height:1.0;letter-spacing:-0.05em" contenteditable>
+ Melvetica
</livesample>
- <livesample data-ctxedit="sample-x2"
- style="font-weight:100;font-size:80px;line-height:1.2" contenteditable>
- XP–45 / vessel
+ <livesample data-ctxedit="sample-600-1" spellcheck="false"
+ style="font-weight:600;font-size:50px;line-height:1.1;letter-spacing:-0.03em" contenteditable>
+ Production filaments are awaiting 340-type transportation in docking bay
+ <span class="ff-cv02">4</span>
</livesample>
<hr>
- <livesample contenteditable class="s1" data-ctxedit="sample1">
+ <livesample contenteditable class="s1" data-ctxedit="sample1" spellcheck="false">
Fabulous typography encountering spring
</livesample>
- <livesample contenteditable class="s2" data-ctxedit="sample2">
+ <livesample contenteditable class="s2" data-ctxedit="sample2" spellcheck="false">
The user interface (UI), in the industrial design field of<br>
human-computer interaction, is the space where<br>
interactions between humans and machines occur.
</livesample>
- <livesample contenteditable class="s3 col3" data-ctxedit="sample3">
+ <livesample contenteditable class="s3 col3" data-ctxedit="sample3" spellcheck="false">
<p><b>Fire Island Beach</b> 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.
generated by cgit v1.2.3 (git 2.39.0) at 2024-06-26 05:25:34 +0300