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 ...`)
This commit is contained in:
Rasmus
GitHub
parent
633839ad55
commit
0796076659
29 changed files with 368192 additions and 287323 deletions
35
docs/Gemfile
Normal file
35
docs/Gemfile
Normal file
|
|
@ -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"
|
||||
83
docs/Gemfile.lock
Normal file
83
docs/Gemfile.lock
Normal file
|
|
@ -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
|
||||
51
docs/Makefile
Normal file
51
docs/Makefile
Normal file
|
|
@ -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
|
||||
|
|
@ -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/)
|
||||
|
|
|
|||
|
|
@ -10,3 +10,6 @@ kramdown:
|
|||
hard_wrap: false
|
||||
exclude:
|
||||
- README.md
|
||||
- Makefile
|
||||
- Gemfile
|
||||
- Gemfile.lock
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 \
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Reference in a new issue