diff options
author | Rasmus <rasmus@notion.se> | 2022-05-26 21:20:06 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-05-26 21:20:06 +0300 |
commit | 07960766590650e516a75ce6ceba91b68a5fa551 (patch) | |
tree | f0c82cd40cb68950bf8229d14cbc850fec41e5ba /docs | |
parent | 633839ad550073f9d12e6cea7964a30523974b68 (diff) | |
download | inter-07960766590650e516a75ce6ceba91b68a5fa551.tar.xz |
UPM 2048 and opsz axis (#462)
- UPM is adjusted to 2048
- Additional opsz VF axis (multi master) added which will eventually replace the separate Display family
- New tooling that uses fontmake instead of Inter's own fontbuild toolchain. (The old toolchain is still supported, i.e. `make -f Makefile_v1.make ...`)
Diffstat (limited to 'docs')
-rw-r--r-- | docs/Gemfile | 35 | ||||
-rw-r--r-- | docs/Gemfile.lock | 83 | ||||
-rw-r--r-- | docs/Makefile | 51 | ||||
-rw-r--r-- | docs/README.md | 3 | ||||
-rw-r--r-- | docs/_config.yml | 3 | ||||
-rw-r--r-- | docs/_includes/Inter-static.css | 54 | ||||
-rw-r--r-- | docs/_includes/InterDisplay-static.css | 54 | ||||
-rwxr-xr-x | docs/_scripts/serve.sh | 13 | ||||
-rw-r--r-- | docs/inter-ui.css | 54 | ||||
-rw-r--r-- | docs/inter.css | 7 | ||||
-rw-r--r-- | docs/lab/font-files.js | 8 | ||||
-rw-r--r-- | docs/lab/index.html | 48 | ||||
-rw-r--r-- | docs/lab/lab.css | 6 |
13 files changed, 276 insertions, 143 deletions
diff --git a/docs/Gemfile b/docs/Gemfile new file mode 100644 index 000000000..0e6f09ed8 --- /dev/null +++ b/docs/Gemfile @@ -0,0 +1,35 @@ +source "https://rubygems.org" +# Hello! This is where you manage which Jekyll version is used to run. +# When you want to use a different version, change it below, save the +# file and run `bundle install`. Run Jekyll with `bundle exec`, like so: +# +# bundle exec jekyll serve +# +# This will help ensure the proper Jekyll version is running. +# Happy Jekylling! +gem "jekyll", "~> 4.2.2" +# This is the default theme for new Jekyll sites. You may change this to anything you like. +gem "minima", "~> 2.5" +# If you want to use GitHub Pages, remove the "gem "jekyll"" above and +# uncomment the line below. To upgrade, run `bundle update github-pages`. +# gem "github-pages", group: :jekyll_plugins +# If you have any plugins, put them here! +group :jekyll_plugins do + gem "jekyll-feed", "~> 0.12" +end + +# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem +# and associated library. +platforms :mingw, :x64_mingw, :mswin, :jruby do + gem "tzinfo", "~> 1.2" + gem "tzinfo-data" +end + +# Performance-booster for watching directories on Windows +gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin] + +# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem +# do not have a Java counterpart. +gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby] + +gem "webrick", "~> 1.7" diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock new file mode 100644 index 000000000..39b1511ca --- /dev/null +++ b/docs/Gemfile.lock @@ -0,0 +1,83 @@ +GEM + remote: https://rubygems.org/ + specs: + addressable (2.8.0) + public_suffix (>= 2.0.2, < 5.0) + colorator (1.1.0) + concurrent-ruby (1.1.10) + em-websocket (0.5.3) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0) + eventmachine (1.2.7) + ffi (1.15.5) + forwardable-extended (2.6.0) + http_parser.rb (0.8.0) + i18n (1.10.0) + concurrent-ruby (~> 1.0) + jekyll (4.2.2) + addressable (~> 2.4) + colorator (~> 1.0) + em-websocket (~> 0.5) + i18n (~> 1.0) + jekyll-sass-converter (~> 2.0) + jekyll-watch (~> 2.0) + kramdown (~> 2.3) + kramdown-parser-gfm (~> 1.0) + liquid (~> 4.0) + mercenary (~> 0.4.0) + pathutil (~> 0.9) + rouge (~> 3.0) + safe_yaml (~> 1.0) + terminal-table (~> 2.0) + jekyll-feed (0.16.0) + jekyll (>= 3.7, < 5.0) + jekyll-sass-converter (2.2.0) + sassc (> 2.0.1, < 3.0) + jekyll-seo-tag (2.8.0) + jekyll (>= 3.8, < 5.0) + jekyll-watch (2.2.1) + listen (~> 3.0) + kramdown (2.4.0) + rexml + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + liquid (4.0.3) + listen (3.7.1) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) + mercenary (0.4.0) + minima (2.5.1) + jekyll (>= 3.5, < 5.0) + jekyll-feed (~> 0.9) + jekyll-seo-tag (~> 2.1) + pathutil (0.16.2) + forwardable-extended (~> 2.6) + public_suffix (4.0.7) + rb-fsevent (0.11.1) + rb-inotify (0.10.1) + ffi (~> 1.0) + rexml (3.2.5) + rouge (3.28.0) + safe_yaml (1.0.5) + sassc (2.4.0) + ffi (~> 1.9) + terminal-table (2.0.0) + unicode-display_width (~> 1.1, >= 1.1.1) + unicode-display_width (1.8.0) + webrick (1.7.0) + +PLATFORMS + arm64-darwin-21 + +DEPENDENCIES + http_parser.rb (~> 0.6.0) + jekyll (~> 4.2.2) + jekyll-feed (~> 0.12) + minima (~> 2.5) + tzinfo (~> 1.2) + tzinfo-data + wdm (~> 0.1.1) + webrick (~> 1.7) + +BUNDLED WITH + 2.3.14 diff --git a/docs/Makefile b/docs/Makefile new file mode 100644 index 000000000..e332f0006 --- /dev/null +++ b/docs/Makefile @@ -0,0 +1,51 @@ +SRCDIR := $(abspath $(lastword $(MAKEFILE_LIST))/../..) +BIN := $(SRCDIR)/build/venv/bin +FONTDIR := ../build/fonts +export PATH := $(BIN):$(PATH) + +default: + @echo "Please specify a target: build, serve or dist" >&2 + +build: + rm -rf _site + bundle exec jekyll build + +serve: + ./_scripts/serve.sh + +# ----------------------------------------------------------------------- + +dist: fonts info + $(BIN)/python3 ../misc/tools/patch-version.py lab/index.html + +info: _data/fontinfo.json \ + lab/glyphinfo.json \ + glyphs/metrics.json + +fonts: + rm -rf font-files/Inter-* font-files/Inter.var* + mkdir -p font-files + cp -a $(FONTDIR)/static/Inter-*.woff2 \ + $(FONTDIR)/static/Inter-*.otf \ + $(FONTDIR)/var/Inter.var.* \ + $(FONTDIR)/var/Inter-roman.var.* \ + $(FONTDIR)/var/Inter-italic.var.* \ + font-files/ + +_data/fontinfo.json: ../misc/tools/fontinfo.py font-files/Inter-Regular.otf + $(BIN)/python3 ../misc/tools/fontinfo.py -pretty $< > _data/fontinfo.json + +lab/glyphinfo.json: ../misc/tools/gen-glyphinfo.py \ + ../build/ufo/Inter-Regular.ufo \ + ../misc/UnicodeData.txt + $(BIN)/python3 ../misc/tools/gen-glyphinfo.py \ + -ucd ../misc/UnicodeData.txt ../build/ufo/Inter-Regular.ufo > $@ + +glyphs/metrics.json: ../misc/tools/gen-metrics-and-svgs.py \ + ../build/ufo/Inter-Regular.ufo + $(BIN)/python3 ../misc/tools/gen-metrics-and-svgs.py ../build/ufo/Inter-Regular.ufo + @# Note: this also patches glyphs/index.html + +font-files/Inter-Regular.otf: fonts + +.PHONY: default build serve dist info fonts diff --git a/docs/README.md b/docs/README.md index 193ed97ee..b00d1ab6d 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1 +1,2 @@ -This directory is published as a website by Github at [https://rsms.me/inter](https://rsms.me/inter/) +This directory is published as a website by Github at +[https://rsms.me/inter](https://rsms.me/inter/) diff --git a/docs/_config.yml b/docs/_config.yml index b66780472..b235ec988 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -10,3 +10,6 @@ kramdown: hard_wrap: false exclude: - README.md + - Makefile + - Gemfile + - Gemfile.lock diff --git a/docs/_includes/Inter-static.css b/docs/_includes/Inter-static.css index f16ba4d87..89fd4f595 100644 --- a/docs/_includes/Inter-static.css +++ b/docs/_includes/Inter-static.css @@ -3,16 +3,14 @@ font-style: normal; font-weight: 100; font-display: swap; - src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-Thin.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; font-display: swap; - src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-ThinItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -20,16 +18,14 @@ font-style: normal; font-weight: 200; font-display: swap; - src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-ExtraLight.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; font-display: swap; - src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-ExtraLightItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -37,16 +33,14 @@ font-style: normal; font-weight: 300; font-display: swap; - src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-Light.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; - src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-LightItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -54,16 +48,14 @@ font-style: normal; font-weight: 400; font-display: swap; - src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-Regular.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; - src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-Italic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -71,16 +63,14 @@ font-style: normal; font-weight: 500; font-display: swap; - src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-Medium.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; - src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-MediumItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -88,16 +78,14 @@ font-style: normal; font-weight: 600; font-display: swap; - src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-SemiBold.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; - src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-SemiBoldItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -105,16 +93,14 @@ font-style: normal; font-weight: 700; font-display: swap; - src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-Bold.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; - src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-BoldItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -122,16 +108,14 @@ font-style: normal; font-weight: 800; font-display: swap; - src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-ExtraBold.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; - src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-ExtraBoldItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -139,14 +123,12 @@ font-style: normal; font-weight: 900; font-display: swap; - src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-Black.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; font-display: swap; - src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-BlackItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2"); } diff --git a/docs/_includes/InterDisplay-static.css b/docs/_includes/InterDisplay-static.css index c62a45465..369557f3d 100644 --- a/docs/_includes/InterDisplay-static.css +++ b/docs/_includes/InterDisplay-static.css @@ -3,16 +3,14 @@ font-style: normal; font-weight: 100; font-display: swap; - src: url("font-files/InterDisplay-Thin.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-Thin.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-Thin.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 100; font-display: swap; - src: url("font-files/InterDisplay-ThinItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-ThinItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-ThinItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -20,16 +18,14 @@ font-style: normal; font-weight: 200; font-display: swap; - src: url("font-files/InterDisplay-ExtraLight.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-ExtraLight.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-ExtraLight.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 200; font-display: swap; - src: url("font-files/InterDisplay-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-ExtraLightItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -37,16 +33,14 @@ font-style: normal; font-weight: 300; font-display: swap; - src: url("font-files/InterDisplay-Light.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-Light.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-Light.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 300; font-display: swap; - src: url("font-files/InterDisplay-LightItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-LightItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-LightItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -54,16 +48,14 @@ font-style: normal; font-weight: 400; font-display: swap; - src: url("font-files/InterDisplay-Regular.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-Regular.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-Regular.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 400; font-display: swap; - src: url("font-files/InterDisplay-Italic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-Italic.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-Italic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -71,16 +63,14 @@ font-style: normal; font-weight: 500; font-display: swap; - src: url("font-files/InterDisplay-Medium.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-Medium.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-Medium.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 500; font-display: swap; - src: url("font-files/InterDisplay-MediumItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-MediumItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-MediumItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -88,16 +78,14 @@ font-style: normal; font-weight: 600; font-display: swap; - src: url("font-files/InterDisplay-SemiBold.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-SemiBold.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-SemiBold.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 600; font-display: swap; - src: url("font-files/InterDisplay-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-SemiBoldItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -105,16 +93,14 @@ font-style: normal; font-weight: 700; font-display: swap; - src: url("font-files/InterDisplay-Bold.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-Bold.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-Bold.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 700; font-display: swap; - src: url("font-files/InterDisplay-BoldItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-BoldItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-BoldItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -122,16 +108,14 @@ font-style: normal; font-weight: 800; font-display: swap; - src: url("font-files/InterDisplay-ExtraBold.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-ExtraBold.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-ExtraBold.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 800; font-display: swap; - src: url("font-files/InterDisplay-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-ExtraBoldItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { @@ -139,14 +123,12 @@ font-style: normal; font-weight: 900; font-display: swap; - src: url("font-files/InterDisplay-Black.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-Black.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-Black.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 900; font-display: swap; - src: url("font-files/InterDisplay-BlackItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/InterDisplay-BlackItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/InterDisplay-BlackItalic.woff2?v={{font_v}}") format("woff2"); } diff --git a/docs/_scripts/serve.sh b/docs/_scripts/serve.sh index aee2fa5c4..817254b21 100755 --- a/docs/_scripts/serve.sh +++ b/docs/_scripts/serve.sh @@ -2,11 +2,13 @@ set -e cd "$(dirname "$0")/.." -if [ "$1" == "-h" ]; then +if [ "$1" = "-h" ]; then echo "usage: $0 [<bindaddr>]" >&2 exit 1 fi +BINDADDR=${1:-127.0.0.1} + if [ ! -s lab/fonts ]; then rm -f lab/fonts ln -fs ../../build/fonts lab/fonts @@ -20,14 +22,7 @@ fi # For live testing with fonts, you'll instead want to use docs/lab/serve.py rm -rf _site -BINDADDR=127.0.0.1 -if [ "$1" != "" ]; then - BINDADDR=$1 -fi - -# --incremental - -jekyll serve \ +bundle exec jekyll serve \ --watch \ --host "$BINDADDR" \ --port 3002 \ diff --git a/docs/inter-ui.css b/docs/inter-ui.css index 9aac5f998..4aca7ee2e 100644 --- a/docs/inter-ui.css +++ b/docs/inter-ui.css @@ -15,135 +15,117 @@ Please use "inter.css" instead for new applications. font-family: 'Inter UI'; font-style: normal; font-weight: 100; - src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-Thin.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 100; - src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-ThinItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 200; - src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-ExtraLight.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 200; - src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-ExtraLightItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 300; - src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-Light.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 300; - src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-LightItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 400; - src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-Regular.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 400; - src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-Italic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 500; - src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-Medium.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 500; - src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-MediumItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 600; - src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-SemiBold.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 600; - src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-SemiBoldItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 700; - src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-Bold.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 700; - src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-BoldItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 800; - src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-ExtraBold.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 800; - src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-ExtraBoldItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 900; - src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-Black.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 900; - src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2"), - url("font-files/Inter-BlackItalic.woff?v={{font_v}}") format("woff"); + src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2"); } /* -------------------------------------------------------------------------- diff --git a/docs/inter.css b/docs/inter.css index b812483c6..04d9f436b 100644 --- a/docs/inter.css +++ b/docs/inter.css @@ -7,7 +7,7 @@ Font families defined by this CSS: - "Inter" static "traditional" fonts for older web browsers - "Inter var" single-axis variable fonts for all modern browsers -- "Inter var experimental" multi-axis variable fonts for modern web browsers +- "Inter var experimental" multi-axis variable fonts for some modern web browsers Use like this in your CSS: @@ -21,11 +21,6 @@ Use like this in your CSS: /* ----------------------- variable ----------------------- */ -{%- comment -%} -{% include Inter-italic.var.css %} -{% include Inter-roman.var.css %} -{%- endcomment %} - @font-face { font-family: 'Inter var'; font-style: normal; diff --git a/docs/lab/font-files.js b/docs/lab/font-files.js index 61d444421..012a67bed 100644 --- a/docs/lab/font-files.js +++ b/docs/lab/font-files.js @@ -68,10 +68,10 @@ var fontFamilyName, } let families = [ - ["Inter", "const", fontFamilyName], - ["Inter", "const-hinted", fontFamilyNameHinted], - ["InterDisplay", "const", fontFamilyNameDisplay], - ["InterDisplay", "const-hinted", fontFamilyNameDisplayHinted], + ["Inter", "static", fontFamilyName], + ["Inter", "static-hinted", fontFamilyNameHinted], + ["InterDisplay", "static", fontFamilyNameDisplay], + ["InterDisplay", "static-hinted", fontFamilyNameDisplayHinted], ] for (let [family, filepath, cssname] of families) { diff --git a/docs/lab/index.html b/docs/lab/index.html index 534d2b29e..855c63c7a 100644 --- a/docs/lab/index.html +++ b/docs/lab/index.html @@ -37,7 +37,7 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) { <div class="options"> <div class="flex-x"> - <label title="Use variable font instead of constant font files"> + <label title="Use variable font instead of static font files"> <span>VF</span> <input type="checkbox" name="varfont"> </label> @@ -64,18 +64,24 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) { <!-- Variable font controls (hidden when not using variable fonts) --> <label class="label-and-value varfontControl"> - <span>Weight:</span> + <span title="Weight">wght:</span> <input type="range" value="400" step="1" min="100" max="900" name="varWeight"> <input type="number" value="400" step="1" min="100" max="900" name="varWeightNum"> </label> <label class="label-and-value varfontControl"> - <span>Slant:</span> + <span title="Slant">slnt:</span> <input type="range" value="0" step="0.01" min="0" max="10" name="varSlant"> <input type="number" value="0" step="0.01" min="0" max="10" name="varSlantNum"> </label> - <label class="label-and-value constfontControl"> + <label class="label-and-value varfontControl"> + <span title="Optical size">opsz:</span> + <input type="range" value="0" step="0.01" min="16" max="72" name="varOpsz"> + <input type="number" value="0" step="0.01" min="16" max="72" name="varOpszNum"> + </label> + + <label class="label-and-value staticfontControl"> <span>Weight:</span> <select name="weight" style="max-width:100px"> <option value="100">Thin (100)</option> @@ -828,9 +834,10 @@ function main() { let usingVarFont = false let usingFontFamily = "text" - var varWeightRange, varSlantRange + var varWeightRange, varSlantRange, varOpszRange var varWeightSettingValueImpl = false var varSlantSettingValueImpl = false + var varOpszSettingValueImpl = false function getFontFamily(overrideFamily) { return ( @@ -866,6 +873,7 @@ function main() { let varState = { weight: 400, // 400..900 slant: 0, // 0..-10 + opsz: 16, // 16..72 } function updateVarFont() { @@ -880,7 +888,7 @@ function main() { varSlantSettingValueImpl = false setCSSProp( "font-variation-settings", - `"wght" ${varState.weight}, "slnt" ${-varState.slant}` + `"wght" ${varState.weight}, "slnt" ${-varState.slant}, "opsz" ${varState.opsz}` ) } else { setCSSProp("font-variation-settings", null) @@ -892,7 +900,7 @@ function main() { document.body.classList.toggle('varfont', on) if (on) { if (!isInitial) { - // copy value of const weight to var weight + // copy value of static weight to var weight let w = parseInt(varWeight.getValue()) if (!isNaN(w) && varWeightRange && !varWeightSettingValueImpl) { varWeightRange.setValue(w) @@ -904,7 +912,7 @@ function main() { // ) } else { if (!isInitial && varWeightRange) { - // copy value of var weight to const weight + // copy value of var weight to static weight let w = varWeightRange.getValue() if (!isNaN(w)) { vars.setValue("weight", Math.round(w / 100) * 100) @@ -920,15 +928,18 @@ function main() { }) let varWeightNum = vars.bind('varWeightNum', (e, v) => { - if (varWeightRange && !varWeightSettingValueImpl) { + if (varWeightRange && !varWeightSettingValueImpl) varWeightRange.setValue(v) - } }) let varSlantNum = vars.bind('varSlantNum', (e, v) => { - if (varSlantRange && !varSlantSettingValueImpl) { + if (varSlantRange && !varSlantSettingValueImpl) varSlantRange.setValue(v) - } + }) + + let varOpszNum = vars.bind('varOpszNum', (e, v) => { + if (varOpszRange && !varOpszSettingValueImpl) + varOpszRange.setValue(v) }) varWeightRange = vars.bind('varWeight', (e, v) => { @@ -961,6 +972,19 @@ function main() { return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value }) + varOpszRange = vars.bind('varOpsz', (e, v) => { + varState.opsz = v + varOpszSettingValueImpl = true + varOpszNum.setValue(v) + varOpszSettingValueImpl = false + updateVarFont() + }, (e, prevValue, ev) => { + if (prevValue === undefined) { + return 0 + } + return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value + }) + // compare let secondarySampleClassNameAddition = null diff --git a/docs/lab/lab.css b/docs/lab/lab.css index 2c22a0346..833fe83d1 100644 --- a/docs/lab/lab.css +++ b/docs/lab/lab.css @@ -543,12 +543,12 @@ body.sidebar-minimized .options { user-select: none; -moz-user-select: none; -webkit-user-select:none; } .options .varfontControl, - .options .constfontControl { + .options .staticfontControl { transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1); transition-property: opacity, height, margin; } .options .varfontControl, - body.varfont .options .constfontControl { + body.varfont .options .staticfontControl { pointer-events:none; overflow: hidden; opacity:0; @@ -562,7 +562,7 @@ body.sidebar-minimized .options { height: var(--fieldHeight); margin-bottom: var(--rowBottomMargin); } - /*body.varfont .options .constfontControl { + /*body.varfont .options .staticfontControl { display: none; }*/ .options .varfontControl .label-and-value { |