diff options
| author | Rasmus Andersson <rasmus@notion.se> | 2023-11-20 03:05:56 +0300 |
|---|---|---|
| committer | Rasmus Andersson <rasmus@notion.se> | 2023-11-20 03:05:56 +0300 |
| commit | a521315959ee183f0c1195149335a0720edc403f (patch) | |
| tree | c219f2886d4fa41efb6275d51bfcc9d4f4469da5 | |
| parent | 401515a3439c6e7d809ad228b07c513d2fdeb893 (diff) | |
| download | inter-a521315959ee183f0c1195149335a0720edc403f.tar.xz | |
website: v4.0
56 files changed, 142 insertions, 252 deletions
diff --git a/docs/Makefile b/docs/Makefile index 4cac1dc8a..625e4d553 100644 --- a/docs/Makefile +++ b/docs/Makefile @@ -19,10 +19,10 @@ build-tmp: .ruby-bundle bundle exec jekyll build --disable-disk-cache -b /tmp/inter-v4-website -d _site-tmp serve: .ruby-bundle - $(Q)if [ ! -s lab/fonts ]; then \ - [ ! -s lab/fonts/fonts ] || rm lab/fonts/fonts; \ - rm -f lab/fonts && ln -fs ../../build/fonts lab/fonts; \ - fi + $(Q)( sleep 3 && \ + rm -f _site/lab/fonts && \ + ln -s ../../../build/fonts _site/lab/fonts ) & + @# @# need to delete generated content so that jekyll, being a little dumb, @# can manage to copy the font files into there again. @# Why not a symlink you ask? Jekyll traverses it and copies the content. @@ -97,9 +97,9 @@ FONTS_SRC := \ $(FONTDIR)/static/InterDisplay-SemiBoldItalic.woff2 \ $(FONTDIR)/static/InterDisplay-Thin.woff2 \ $(FONTDIR)/static/InterDisplay-ThinItalic.woff2 \ - $(FONTDIR)/var/Inter-Variable.woff2 \ - $(FONTDIR)/var/Inter-Variable-Italic.woff2 \ - $(FONTDIR)/var/Inter-Variable.ttf + $(FONTDIR)/var/InterVariable.woff2 \ + $(FONTDIR)/var/InterVariable-Italic.woff2 \ + $(FONTDIR)/var/InterVariable.ttf font-files/Inter-Regular.woff2: $(FONTS_SRC) rm -rf font-files/Inter* diff --git a/docs/_data/faq.yml b/docs/_data/faq.yml index c1b813aeb..8ebf8da7d 100644 --- a/docs/_data/faq.yml +++ b/docs/_data/faq.yml @@ -80,12 +80,12 @@ q: "What are the technical details of Inter?" a: | UPM: 2048<br> - Variable axis <q>opsz</q> [14–28]<br> + Variable axis <q>opsz</q> [14–32]<br> Variable axis <q>wght</q> [100–900]<br> Constant axis <q>ital</q> [0, 9.4°]<br> Style classification: Sans-serif, Grotesk<br> x-height, opsz=14: 1118 UPM<br> - x-height, opsz=28: 1056 UPM<br> + x-height, opsz=32: 1056 UPM<br> Cap height: 1490 UPM<br> Ascender: 1984 UPM<br> Descender: -494 UPM<br> diff --git a/docs/_data/fontinfo.json b/docs/_data/fontinfo.json index e6517ebb4..d8b33913f 100644 --- a/docs/_data/fontinfo.json +++ b/docs/_data/fontinfo.json @@ -55,7 +55,7 @@ "usWinAscent": 1984, "usWinDescent": 494, "version": 4, - "xAvgCharWidth": 1314, + "xAvgCharWidth": 1313, "yStrikeoutPosition": 671, "yStrikeoutSize": 140, "ySubscriptXOffset": 0, @@ -70,8 +70,8 @@ "cmap": "[present but not decoded]", "glyf": "[present but not decoded]", "head": { - "checkSumAdjustment": 402214426, - "created": 3783201336, + "checkSumAdjustment": 1565796926, + "created": 3783283210, "flags": [ "0: Baseline at y=0", "1: Left sidebearing point at x=0", @@ -86,7 +86,7 @@ "macStyle": [], "macStyle_raw": 0, "magicNumber": 1594834165, - "modified": 3783203555, + "modified": 3783283222, "tableVersion": 1.0, "unitsPerEm": 2048, "xMax": 5290, @@ -105,7 +105,7 @@ "metricDataFormat": 0, "minLeftSideBearing": -1513, "minRightSideBearing": -2200, - "numberOfHMetrics": 2935, + "numberOfHMetrics": 2926, "tableVersion": 65536, "xMaxExtent": 5290 }, @@ -143,9 +143,9 @@ "#274": "Single-story a", "#275": "Compact f", "#276": "Compact t", - "#3 fontId": "4.000;git-59063ec87;RSMS;Inter-Regular", + "#3 fontId": "4.000;git-401515a34;RSMS;Inter-Regular", "#4 fullName": "Inter Regular", - "#5 version": "Version 4.000;git-59063ec87", + "#5 version": "Version 4.000;git-401515a34", "#6 postscriptName": "Inter-Regular", "#7 trademark": "Inter UI and Inter is a trademark of rsms.", "#8 manufacturerName": "rsms", diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index e1c12552d..c4a5f7f69 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -10,8 +10,8 @@ <link rel="stylesheet" href="{{url_root}}inter.css?v={{ release_version }}"> <link rel="stylesheet" href="{{url_root}}res/base.css?v={{ base_css_v }}"> <link rel="icon" type="image/png" href="{{url_root}}res/favicon.png?v={{ favicon_v }}"> - <link rel="preload" href="{{url_root}}font-files/Inter-Variable.woff2?v={{release_version}}" as="font" type="font/woff2" crossorigin="anonymous"> - <link rel="preload" href="{{url_root}}font-files/Inter-Variable-Italic.woff2?v={{release_version}}" as="font" type="font/woff2" crossorigin="anonymous"> + <link rel="preload" href="{{url_root}}font-files/InterVariable.woff2?v={{release_version}}" as="font" type="font/woff2" crossorigin="anonymous"> + <link rel="preload" href="{{url_root}}font-files/InterVariable-Italic.woff2?v={{release_version}}" as="font" type="font/woff2" crossorigin="anonymous"> <meta name="format-detection" content="telephone=no"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@rsms"> diff --git a/docs/_scripts/build-fontkit.js.sh b/docs/_scripts/build-fontkit.js.sh index 616bf28bb..5f6469b2c 100644 --- a/docs/_scripts/build-fontkit.js.sh +++ b/docs/_scripts/build-fontkit.js.sh @@ -8,9 +8,9 @@ # Use the result like this: # <script type="module"> # import fontkit from "./fontkit-2.0.2.js" -# let data = await fetch("Inter-Variable.ttf").then(r => r.arrayBuffer()) +# let data = await fetch("InterVariable.ttf").then(r => r.arrayBuffer()) # let font = fontkit.create(new Uint8Array(data)) -# let instance = font.getVariation({wght: 600, opsz: 28}) +# let instance = font.getVariation({wght: 600, opsz: 32}) # console.log({font, instance}) # </script> # diff --git a/docs/download/index.html b/docs/download/index.html index 10d5bb30d..587478b3d 100644 --- a/docs/download/index.html +++ b/docs/download/index.html @@ -3,7 +3,6 @@ layout: default title: Download Inter --- {% include defs.html -%} -{% assign download_url = "https://github.com/rsms/inter/releases/download/v4.0-beta9h/Inter-4.0-beta9h.zip" %} <div class="row"><div><r-grid columns=8> @@ -61,7 +60,7 @@ title: Download Inter <ol> <li>Open the "Font Book" application.</li> <li>In the main menu, select "File" → "Add Fonts..."</li> - <li>Select "Inter.ttc", "Inter-Variable.ttf" and "Inter-Variable-Italic.ttf"</li> + <li>Select "Inter.ttc", "InterVariable.ttf" and "InterVariable-Italic.ttf"</li> <li>Press the "Open" button</li> </ol> <p> @@ -73,7 +72,7 @@ title: Download Inter <div id="install-windows" class="install-instructions"> <ol> <li>Open the zip file you downloaded</li> - <li>Select "Inter.ttc", "Inter-Variable.ttf" and "Inter-Variable-Italic.ttf"</li> + <li>Select "Inter.ttc", "InterVariable.ttf" and "InterVariable-Italic.ttf"</li> <li>Right-click the selected files, choose "Install for all users"</li> </ol> <p> @@ -87,8 +86,8 @@ title: Download Inter <div id="install-ubuntu" class="install-instructions"> <ol> <li>Create a ".fonts" directory in your home. (<code>mkdir -p ~/.fonts</code>)</li> - <li>Copy "Inter.ttc", "Inter-Variable.ttf" and - "Inter-Variable-Italic.ttf" into your .fonts directory + <li>Copy "Inter.ttc", "InterVariable.ttf" and + "InterVariable-Italic.ttf" into your .fonts directory (<code>cp Inter.ttc *.ttf ~/.fonts/</code>) </li> </ol> @@ -119,7 +118,7 @@ title: Download Inter <p> Inter fonts comes in two flavors: Variable and Static - (<code>Inter-Variable*.ttf</code> and <code>Inter.ttc</code>, respectively.) + (<code>InterVariable*.ttf</code> and <code>Inter.ttc</code>, respectively.) </p><p> Variable fonts is a new format which allows you to choose any weight and optical size. Variable fonts is a relatively new diff --git a/docs/font-files/Inter-Black.woff2 b/docs/font-files/Inter-Black.woff2 Binary files differindex 01a434dd9..231b01931 100644 --- a/docs/font-files/Inter-Black.woff2 +++ b/docs/font-files/Inter-Black.woff2 diff --git a/docs/font-files/Inter-BlackItalic.woff2 b/docs/font-files/Inter-BlackItalic.woff2 Binary files differindex 8f80a2c3b..8e973ef1a 100644 --- a/docs/font-files/Inter-BlackItalic.woff2 +++ b/docs/font-files/Inter-BlackItalic.woff2 diff --git a/docs/font-files/Inter-Bold.woff2 b/docs/font-files/Inter-Bold.woff2 Binary files differindex b54d00fc2..e81d67e84 100644 --- a/docs/font-files/Inter-Bold.woff2 +++ b/docs/font-files/Inter-Bold.woff2 diff --git a/docs/font-files/Inter-BoldItalic.woff2 b/docs/font-files/Inter-BoldItalic.woff2 Binary files differindex 00ed80624..df5d54b03 100644 --- a/docs/font-files/Inter-BoldItalic.woff2 +++ b/docs/font-files/Inter-BoldItalic.woff2 diff --git a/docs/font-files/Inter-ExtraBold.woff2 b/docs/font-files/Inter-ExtraBold.woff2 Binary files differindex 37fc8c119..79a1c5f3d 100644 --- a/docs/font-files/Inter-ExtraBold.woff2 +++ b/docs/font-files/Inter-ExtraBold.woff2 diff --git a/docs/font-files/Inter-ExtraBoldItalic.woff2 b/docs/font-files/Inter-ExtraBoldItalic.woff2 Binary files differindex eea687111..744532801 100644 --- a/docs/font-files/Inter-ExtraBoldItalic.woff2 +++ b/docs/font-files/Inter-ExtraBoldItalic.woff2 diff --git a/docs/font-files/Inter-ExtraLight.woff2 b/docs/font-files/Inter-ExtraLight.woff2 Binary files differindex d01b434c0..67b9a978b 100644 --- a/docs/font-files/Inter-ExtraLight.woff2 +++ b/docs/font-files/Inter-ExtraLight.woff2 diff --git a/docs/font-files/Inter-ExtraLightItalic.woff2 b/docs/font-files/Inter-ExtraLightItalic.woff2 Binary files differindex 902a27470..82d899a80 100644 --- a/docs/font-files/Inter-ExtraLightItalic.woff2 +++ b/docs/font-files/Inter-ExtraLightItalic.woff2 diff --git a/docs/font-files/Inter-Italic.woff2 b/docs/font-files/Inter-Italic.woff2 Binary files differindex d3973dd54..aa70d499d 100644 --- a/docs/font-files/Inter-Italic.woff2 +++ b/docs/font-files/Inter-Italic.woff2 diff --git a/docs/font-files/Inter-Light.woff2 b/docs/font-files/Inter-Light.woff2 Binary files differindex ba47e4951..a6ee80b8f 100644 --- a/docs/font-files/Inter-Light.woff2 +++ b/docs/font-files/Inter-Light.woff2 diff --git a/docs/font-files/Inter-LightItalic.woff2 b/docs/font-files/Inter-LightItalic.woff2 Binary files differindex e8ac5c474..055bf9284 100644 --- a/docs/font-files/Inter-LightItalic.woff2 +++ b/docs/font-files/Inter-LightItalic.woff2 diff --git a/docs/font-files/Inter-Medium.woff2 b/docs/font-files/Inter-Medium.woff2 Binary files differindex cdb7679ed..49108ddf7 100644 --- a/docs/font-files/Inter-Medium.woff2 +++ b/docs/font-files/Inter-Medium.woff2 diff --git a/docs/font-files/Inter-MediumItalic.woff2 b/docs/font-files/Inter-MediumItalic.woff2 Binary files differindex 88b3fb1ec..2a2f7b248 100644 --- a/docs/font-files/Inter-MediumItalic.woff2 +++ b/docs/font-files/Inter-MediumItalic.woff2 diff --git a/docs/font-files/Inter-Regular.woff2 b/docs/font-files/Inter-Regular.woff2 Binary files differindex 62d657a00..a6f26a307 100644 --- a/docs/font-files/Inter-Regular.woff2 +++ b/docs/font-files/Inter-Regular.woff2 diff --git a/docs/font-files/Inter-SemiBold.woff2 b/docs/font-files/Inter-SemiBold.woff2 Binary files differindex 919b52416..1e97ca316 100644 --- a/docs/font-files/Inter-SemiBold.woff2 +++ b/docs/font-files/Inter-SemiBold.woff2 diff --git a/docs/font-files/Inter-SemiBoldItalic.woff2 b/docs/font-files/Inter-SemiBoldItalic.woff2 Binary files differindex da9e7f79e..5626c30eb 100644 --- a/docs/font-files/Inter-SemiBoldItalic.woff2 +++ b/docs/font-files/Inter-SemiBoldItalic.woff2 diff --git a/docs/font-files/Inter-Thin.woff2 b/docs/font-files/Inter-Thin.woff2 Binary files differindex b744d3865..2a943bd79 100644 --- a/docs/font-files/Inter-Thin.woff2 +++ b/docs/font-files/Inter-Thin.woff2 diff --git a/docs/font-files/Inter-ThinItalic.woff2 b/docs/font-files/Inter-ThinItalic.woff2 Binary files differindex 697a4f1e7..f13eb6407 100644 --- a/docs/font-files/Inter-ThinItalic.woff2 +++ b/docs/font-files/Inter-ThinItalic.woff2 diff --git a/docs/font-files/Inter-Variable-Italic.woff2 b/docs/font-files/Inter-Variable-Italic.woff2 Binary files differdeleted file mode 100644 index 2f00e6b4f..000000000 --- a/docs/font-files/Inter-Variable-Italic.woff2 +++ /dev/null diff --git a/docs/font-files/Inter-Variable.woff2 b/docs/font-files/Inter-Variable.woff2 Binary files differdeleted file mode 100644 index 18f5c9bda..000000000 --- a/docs/font-files/Inter-Variable.woff2 +++ /dev/null diff --git a/docs/font-files/InterDisplay-Black.woff2 b/docs/font-files/InterDisplay-Black.woff2 Binary files differindex df074a7f7..eceb5d3c0 100644 --- a/docs/font-files/InterDisplay-Black.woff2 +++ b/docs/font-files/InterDisplay-Black.woff2 diff --git a/docs/font-files/InterDisplay-BlackItalic.woff2 b/docs/font-files/InterDisplay-BlackItalic.woff2 Binary files differindex 7ce75af3c..ed05fe3a1 100644 --- a/docs/font-files/InterDisplay-BlackItalic.woff2 +++ b/docs/font-files/InterDisplay-BlackItalic.woff2 diff --git a/docs/font-files/InterDisplay-Bold.woff2 b/docs/font-files/InterDisplay-Bold.woff2 Binary files differindex b7870dce2..51fb942d5 100644 --- a/docs/font-files/InterDisplay-Bold.woff2 +++ b/docs/font-files/InterDisplay-Bold.woff2 diff --git a/docs/font-files/InterDisplay-BoldItalic.woff2 b/docs/font-files/InterDisplay-BoldItalic.woff2 Binary files differindex fd81aef11..4af3b72a4 100644 --- a/docs/font-files/InterDisplay-BoldItalic.woff2 +++ b/docs/font-files/InterDisplay-BoldItalic.woff2 diff --git a/docs/font-files/InterDisplay-ExtraBold.woff2 b/docs/font-files/InterDisplay-ExtraBold.woff2 Binary files differindex 1d7fa8a36..22c47e274 100644 --- a/docs/font-files/InterDisplay-ExtraBold.woff2 +++ b/docs/font-files/InterDisplay-ExtraBold.woff2 diff --git a/docs/font-files/InterDisplay-ExtraBoldItalic.woff2 b/docs/font-files/InterDisplay-ExtraBoldItalic.woff2 Binary files differindex 43aaa0a2c..ecfc42f0c 100644 --- a/docs/font-files/InterDisplay-ExtraBoldItalic.woff2 +++ b/docs/font-files/InterDisplay-ExtraBoldItalic.woff2 diff --git a/docs/font-files/InterDisplay-ExtraLight.woff2 b/docs/font-files/InterDisplay-ExtraLight.woff2 Binary files differindex 01af0178d..28c9a2093 100644 --- a/docs/font-files/InterDisplay-ExtraLight.woff2 +++ b/docs/font-files/InterDisplay-ExtraLight.woff2 diff --git a/docs/font-files/InterDisplay-ExtraLightItalic.woff2 b/docs/font-files/InterDisplay-ExtraLightItalic.woff2 Binary files differindex 7f4a7aa0d..cf597db4b 100644 --- a/docs/font-files/InterDisplay-ExtraLightItalic.woff2 +++ b/docs/font-files/InterDisplay-ExtraLightItalic.woff2 diff --git a/docs/font-files/InterDisplay-Italic.woff2 b/docs/font-files/InterDisplay-Italic.woff2 Binary files differindex 3ee25e843..cc7ef4759 100644 --- a/docs/font-files/InterDisplay-Italic.woff2 +++ b/docs/font-files/InterDisplay-Italic.woff2 diff --git a/docs/font-files/InterDisplay-Light.woff2 b/docs/font-files/InterDisplay-Light.woff2 Binary files differindex a2c7d476d..e6c1fca80 100644 --- a/docs/font-files/InterDisplay-Light.woff2 +++ b/docs/font-files/InterDisplay-Light.woff2 diff --git a/docs/font-files/InterDisplay-LightItalic.woff2 b/docs/font-files/InterDisplay-LightItalic.woff2 Binary files differindex d1201d810..2681094f7 100644 --- a/docs/font-files/InterDisplay-LightItalic.woff2 +++ b/docs/font-files/InterDisplay-LightItalic.woff2 diff --git a/docs/font-files/InterDisplay-Medium.woff2 b/docs/font-files/InterDisplay-Medium.woff2 Binary files differindex ac2ad4dca..dbe9a5c4a 100644 --- a/docs/font-files/InterDisplay-Medium.woff2 +++ b/docs/font-files/InterDisplay-Medium.woff2 diff --git a/docs/font-files/InterDisplay-MediumItalic.woff2 b/docs/font-files/InterDisplay-MediumItalic.woff2 Binary files differindex 57632a3e8..c30c3145a 100644 --- a/docs/font-files/InterDisplay-MediumItalic.woff2 +++ b/docs/font-files/InterDisplay-MediumItalic.woff2 diff --git a/docs/font-files/InterDisplay-Regular.woff2 b/docs/font-files/InterDisplay-Regular.woff2 Binary files differindex d84724c8b..35dbf818d 100644 --- a/docs/font-files/InterDisplay-Regular.woff2 +++ b/docs/font-files/InterDisplay-Regular.woff2 diff --git a/docs/font-files/InterDisplay-SemiBold.woff2 b/docs/font-files/InterDisplay-SemiBold.woff2 Binary files differindex f5936d8e5..3c652c68d 100644 --- a/docs/font-files/InterDisplay-SemiBold.woff2 +++ b/docs/font-files/InterDisplay-SemiBold.woff2 diff --git a/docs/font-files/InterDisplay-SemiBoldItalic.woff2 b/docs/font-files/InterDisplay-SemiBoldItalic.woff2 Binary files differindex 326dad789..7be961efa 100644 --- a/docs/font-files/InterDisplay-SemiBoldItalic.woff2 +++ b/docs/font-files/InterDisplay-SemiBoldItalic.woff2 diff --git a/docs/font-files/InterDisplay-Thin.woff2 b/docs/font-files/InterDisplay-Thin.woff2 Binary files differindex 19836d052..b57afd56f 100644 --- a/docs/font-files/InterDisplay-Thin.woff2 +++ b/docs/font-files/InterDisplay-Thin.woff2 diff --git a/docs/font-files/InterDisplay-ThinItalic.woff2 b/docs/font-files/InterDisplay-ThinItalic.woff2 Binary files differindex 46660e27e..6ee1f53fb 100644 --- a/docs/font-files/InterDisplay-ThinItalic.woff2 +++ b/docs/font-files/InterDisplay-ThinItalic.woff2 diff --git a/docs/font-files/InterVariable-Italic.woff2 b/docs/font-files/InterVariable-Italic.woff2 Binary files differnew file mode 100644 index 000000000..59dec6d8c --- /dev/null +++ b/docs/font-files/InterVariable-Italic.woff2 diff --git a/docs/font-files/Inter-Variable.ttf b/docs/font-files/InterVariable.ttf Binary files differindex 6cd7ebee3..9ab871e9c 100644 --- a/docs/font-files/Inter-Variable.ttf +++ b/docs/font-files/InterVariable.ttf diff --git a/docs/font-files/InterVariable.woff2 b/docs/font-files/InterVariable.woff2 Binary files differnew file mode 100644 index 000000000..43d9bf98b --- /dev/null +++ b/docs/font-files/InterVariable.woff2 diff --git a/docs/index.html b/docs/index.html index 63ca91b6e..a37caab73 100644 --- a/docs/index.html +++ b/docs/index.html @@ -571,6 +571,7 @@ input[type="range"]:focus::-moz-range-track { font-size: 2em; position:absolute; top:-4rem; left: 1rem; + color: var(--foreground-color-bright); } .row.glyphs > :first-child { display: none } /*.row.glyphs h2 { font-size: 2rem; margin-bottom: 1rem }*/ @@ -635,9 +636,15 @@ input[type="range"]:focus::-moz-range-track { } } +#faq { + margin-top: 2em; +} #faq .columns > p { margin-bottom: 2em; } +#faq h2 { + margin: 0 0 1.5em 0; +} #faq h4:target { background: var(--active-bgcolor); outline: 8px solid var(--active-bgcolor); @@ -677,7 +684,7 @@ input[type="range"]:focus::-moz-range-track { <p> The smaller "text" optical-size designs features a tall x-height to aid in legibility of lower-case text, with several contrast-enhancing details like ink traps and bridges. The larger "display" optical-size designs offers clean lines, smooth curves and delicate details for excellent rythm of large text. </p><p> - <a href="#features">38 OpenType features</a> are provided as well, + Many <a href="#features">OpenType features</a> are provided as well, including contextual alternates which adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, and much more. @@ -944,7 +951,7 @@ input[type="range"]:focus::-moz-range-track { <p class=label>Example text, Regular</p> <div class="columns size1"> <p> -One of the most famous lighthouses of antiquity, as I have already pointed out, was the pharos of Alexandria, which ancient writers included among the Seven Wonders of the World. It might naturally be supposed that the founder of so remarkable a monument of architectural skill would be well known; yet while Strabo and Pliny, Eusebius, Suidas, and Lucian ascribe its erection to Ptolemæus Philadelphus, the wisest and most benevolent of the Ptolemean kings of Egypt, by Tzetzes and Ammianus Marcellinus the honour is given to Cleopatra; and other authorities even attribute it to Alexander the Great. +One of the most famous lighthouses of antiquity, as I have already pointed out, was the pharos of Alexandria, which ancient writers included among the Seven Wonders of the World. It might naturally be supposed that the founder of so remarkable a monument of architectural skill would be well known; yet while Strabo and Pliny, Eusebius, Suidas, and Lucian ascribe its erection to Ptolemæus Philadelphus, the wisest and most benevolent of the Ptolemean kings of Egypt, by Tzetzes and Ammianus Marcellinus the honour is given to Cleopatra; <em>and other authorities even attribute it to Alexander the Great.</em> </p><p> All that can with certainty be affirmed is, that the architect was named Sostrates. Montfaucon, in his great work, endeavours to explain how it is that while we are thus informed as to the architect, we are so doubtful as to the founder, whom, for his part, he believes to have been Ptolemæus. Our ignorance, he says, is owing to the knavery of Sostrates. He wished to immortalize his name; a blameless wish, if at the same time he had not sought to suppress that of the founder, whose glory it was to have suggested the erection. For this purpose Sostrates devised a stratagem which proved successful; deep in the wall of the tower he cut the following inscription: “Sostrates of Cnidos, son of Dexiphanes, to the gods who Protect those who are upon the Sea.” But, mistrustful that King Ptolemæus would scarcely be satisfied with an inscription in which he was wholly ignored, he covered it with a light coat of cement, which he knew would not long endure the action of the atmosphere, and carved thereon the name of Ptolemæus. After a few years the cement and the name of the king disappeared, and revealed the inscription which gave all the glory to Sostrates. </p><p> @@ -952,7 +959,7 @@ Montfaucon, with genial credulity, adopts this anecdote as authentic, and adds: </p><p> To solve the difficulty, Champollion represents the pharos as constructed by Ptolemæus Soter. But, as Edrisi solemnly remarks, “God alone knows what is the truth.” </p><p> -Much etymological erudition has been expended on the derivation of the word Pharos. As far as the Alexandrian light-tower is concerned, there can be no doubt that it was named from the islet on which it stood; yet Isidore asserts that the word came from φὼς, “light,” and ὁρἀν, “to see.” To quote again from Montfaucon: That numerous persons, who have not read the Greek authors, should exercise their ingenuity to no avail in the extraction of these etymologies, is far less surprising than that so good a scholar as Isaac Vossius should seek the origin of Pharos in the Greek language. From ϕαἰνειν, “to shine,” he says, comes ϕανερός, and from ϕανερός, ϕάρος.... But the island was called Pharos seven or eight hundred years before it possessed either tower or beacon-light. +Much etymological erudition has been expended on the derivation of the word Pharos. As far as the Alexandrian light-tower is concerned, there can be no doubt that it was named from the islet on which it stood; yet Isidore asserts that the word came from φὼς, “light,” and ὁρἀν, “to see.” To quote again from Montfaucon: <em>That numerous persons, who have not read the Greek authors, should exercise their ingenuity to no avail in the extraction of these etymologies, is far less surprising than that so good a scholar as Isaac Vossius should seek the origin of Pharos in the Greek language.</em> From ϕαἰνειν, “to shine,” he says, comes ϕανερός, and from ϕανερός, ϕάρος.... But the island was called Pharos seven or eight hundred years before it possessed either tower or beacon-light. </p><p> The most reasonable conjecture seems to be that the word is a Hellenic form of Phrah, the Egyptian name of the sun, to whom the Alexandrian lighthouse would naturally be compared by wondering spectators, or dedicated by a devout prince. </p><p> @@ -1183,7 +1190,6 @@ At a later date we find the word applied to very different objects, though alway <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-dlig">dlig</a> Discretionary Ligatures<br> <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-dnom">dnom</a> Denominators<br> <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_fj#tag-frac">frac</a> Fractions<br> - <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-liga">liga</a> Standard Ligatures<br> <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-locl">locl</a> Localized Forms<br> <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-numr">numr</a> Numerators<br> <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-ordn">ordn</a> Ordinals<br> @@ -1192,9 +1198,9 @@ At a later date we find the word applied to very different objects, though alway <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-sinf">sinf</a> Scientific Inferiors<br> <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-smcp">smcp</a> Small Capitals (limited)<br> <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss01</a> Open digits<br> - <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss02</a> Disambiguation (with zero<)<br> + <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss02</a> Disambiguation (with zero)<br> <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss03</a> Round quotes & commas<br> - <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss04</a> Disambiguation (no zero<)<br> + <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss04</a> Disambiguation (no zero)<br> <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss05</a> Circled characters<br> <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss06</a> Squared characters<br> <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss07</a> Square punctuation<br> @@ -1247,8 +1253,8 @@ At a later date we find the word applied to very different objects, though alway <input type="checkbox" name="opsz" checked> Small optical size </label> --> - <div class="slider opsz-slider" title='opsz from 14 "text" to 28 "display"'> - <input type="range" name="opsz" value=28 min=14 max=28 step=0.1> + <div class="slider opsz-slider" title='opsz from 14 "text" to 32 "display"'> + <input type="range" name="opsz" value=32 min=14 max=32 step=0.1> Optical size </div> <label class="switch-button opsz-switch"> diff --git a/docs/inter-display.css b/docs/inter-display.css index 04bb91329..8bebe8b8a 100644 --- a/docs/inter-display.css +++ b/docs/inter-display.css @@ -12,16 +12,16 @@ layout: none font-style: normal; font-weight: 100 900; font-display: swap; - src: url('font-files/Inter-Variable.woff2?v={{font_v}}') format('woff2'); - font-variation-settings: "opsz" 28; + src: url('font-files/InterVariable.woff2?v={{font_v}}') format('woff2'); + font-variation-settings: "opsz" 32; } @font-face { font-family: 'InterDisplay var'; font-style: italic; font-weight: 100 900; font-display: swap; - src: url('font-files/Inter-Variable-Italic.woff2?v={{font_v}}') format('woff2'); - font-variation-settings: "opsz" 28; + src: url('font-files/InterVariable-Italic.woff2?v={{font_v}}') format('woff2'); + font-variation-settings: "opsz" 32; } diff --git a/docs/inter.css b/docs/inter.css index 5e30e46ca..a517569cc 100644 --- a/docs/inter.css +++ b/docs/inter.css @@ -20,18 +20,18 @@ Usage example: font-style: normal; font-weight: 100 900; font-display: swap; - src: url('font-files/Inter-Variable.woff2?v={{font_v}}') format('woff2'); + src: url('font-files/InterVariable.woff2?v={{font_v}}') format('woff2'); } @font-face { font-family: InterVariable; font-style: italic; font-weight: 100 900; font-display: swap; - src: url('font-files/Inter-Variable-Italic.woff2?v={{font_v}}') format('woff2'); + src: url('font-files/InterVariable-Italic.woff2?v={{font_v}}') format('woff2'); } /* legacy name "Inter var" (Oct 2023) */ -@font-face { font-family:'Inter var'; font-style:normal; font-weight:100 900; font-display:swap; src: url('font-files/Inter-Variable.woff2?v={{font_v}}') format('woff2'); } -@font-face { font-family:'Inter var'; font-style:italic; font-weight:100 900; font-display:swap; src: url('font-files/Inter-Variable-Italic.woff2?v={{font_v}}') format('woff2'); } +@font-face { font-family:'Inter var'; font-style:normal; font-weight:100 900; font-display:swap; src: url('font-files/InterVariable.woff2?v={{font_v}}') format('woff2'); } +@font-face { font-family:'Inter var'; font-style:italic; font-weight:100 900; font-display:swap; src: url('font-files/InterVariable-Italic.woff2?v={{font_v}}') format('woff2'); } /* static fonts */ @font-face { font-family:Inter; font-style:normal; font-weight:100; font-display:swap; 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"); } diff --git a/docs/lab/font-files.js b/docs/lab/font-files.js index 897a2f495..a7a676457 100644 --- a/docs/lab/font-files.js +++ b/docs/lab/font-files.js @@ -1,11 +1,6 @@ -var fontFamilyName, - fontFamilyNameHinted, - fontFamilyNameVar, - fontFamilyNameVarHinted, - fontFamilyNameDisplay, - fontFamilyNameDisplayHinted, - fontFamilyNameDisplayVar, - fontFamilyNameDisplayVarHinted; +var fontFamilyName +var fontFamilyNameDisplay +var fontFamilyNameVar ;(()=>{ let isLocalServer = document.location.protocol == "http:" @@ -19,37 +14,29 @@ var fontFamilyName, ); fontFamilyName = 'Inter-v' + fontVersion - fontFamilyNameHinted = 'Inter-hinted-v' + fontVersion - fontFamilyNameVar = 'Inter-var-v' + fontVersion - fontFamilyNameVarHinted = 'Inter-var-hinted-v' + fontVersion fontFamilyNameDisplay = 'InterDisplay-v' + fontVersion - fontFamilyNameDisplayHinted = 'InterDisplay-hinted-v' + fontVersion - fontFamilyNameDisplayVar = 'InterDisplay-var-v' + fontVersion - fontFamilyNameDisplayVarHinted = 'InterDisplay-var-hinted-v' + fontVersion + fontFamilyNameVar = 'Inter-var-v' + fontVersion let outbuf = [] function w(s) { outbuf.push(s) } - function getStyleName(weight, isItalic) { - let style = "" + function genStaticFontFace(family, cssname, filepath, weight, isItalic) { + let styleName = "" switch (weight) { - case 100: style = "Thin"; break - case 200: style = "ExtraLight"; break - case 300: style = "Light"; break - case 400: style = ""; break - case 500: style = "Medium"; break - case 600: style = "SemiBold"; break - case 700: style = "Bold"; break - case 800: style = "ExtraBold"; break - case 900: style = "Black"; break + case 100: styleName = "Thin"; break + case 200: styleName = "ExtraLight"; break + case 300: styleName = "Light"; break + case 400: styleName = ""; break + case 500: styleName = "Medium"; break + case 600: styleName = "SemiBold"; break + case 700: styleName = "Bold"; break + case 800: styleName = "ExtraBold"; break + case 900: styleName = "Black"; break } - return style + (isItalic ? "Italic" : "") - } - - function genStaticFontFace(family, cssname, filepath, weight, isItalic) { - let styleName = getStyleName(weight, isItalic) if (styleName == "") { styleName = isItalic ? "Italic" : "Regular" + } else if (isItalic) { + styleName += "Italic" } let filename = `${family}-${styleName}` w(`@font-face {`) @@ -69,15 +56,10 @@ var fontFamilyName, w(` url("../font-files/${filename}.woff?${fontVersion}") format("woff2");`) w(`}`) } - - let families = [ - ["Inter", "static", fontFamilyName], - ["Inter", "static-hinted", fontFamilyNameHinted], - ["InterDisplay", "static", fontFamilyNameDisplay], - ["InterDisplay", "static-hinted", fontFamilyNameDisplayHinted], - ] - - for (let [family, filepath, cssname] of families) { + for (let [family, filepath, cssname] of [ + ["Inter", "static", fontFamilyName], + ["InterDisplay", "static", fontFamilyNameDisplay], + ]) { for (let weight of [100,200,300,400,500,600,700,800,900]) { for (let isItalic of [true,false]) { genStaticFontFace(family, cssname, filepath, weight, isItalic) @@ -85,61 +67,27 @@ var fontFamilyName, } } - for (let [family,cssname] of [ - ["Inter",fontFamilyNameVar], - ["InterDisplay",fontFamilyNameDisplayVar], + for (let [srcname,cssname] of [ + ["InterVariable", fontFamilyNameVar], + ["InterVariable-Italic", fontFamilyNameVar], ]) { w(`@font-face { font-family: '${cssname}'; - font-style: oblique 0deg 10deg; + font-style: ${srcname.indexOf("Italic") != -1 ? "italic" : "normal"}; font-weight: 100 900; font-display: block; src:`) if (includeLabLocalFiles) { - w(` url('fonts/var/${family}.var.woff2?${fontVersion}') format("woff2"),`) - } - w(` url('../font-files/${family}.var.woff2?${fontVersion}') format("woff2");`) - w(`}`) - - w(`@font-face { - font-family: '${cssname} safari'; - font-style: oblique 0deg 10deg; - font-display: block; - src:`) - if (includeLabLocalFiles) { - w(` url('fonts/var/${family}.var.woff2?${fontVersion}') format("woff2"),`) + w(` url('fonts/var/${srcname}.woff2?${fontVersion}') format("woff2"),`) } - w(` url('../font-files/${family}.var.woff2?${fontVersion}') format("woff2");`) + w(` url('../font-files/${srcname}.woff2?${fontVersion}') format("woff2");`) w(`}`) } let css = outbuf.join("\n") - // console.log(css) - const fontCSS = document.createElement("style") fontCSS.setAttribute('type', 'text/css') fontCSS.appendChild(document.createTextNode(css)) document.head.appendChild(fontCSS) - - // // update family names to include CSS fallbacks - // [rsms] Disabled to avoid local-font fallback - // fontFamilyName += ", 'Inter'" - // fontFamilyNameHinted += ", 'Inter'" - // fontFamilyNameVar += ", 'Inter var'" - // fontFamilyNameVarHinted += ", 'Inter var'" - })() - -// const fontCSSTemplate = document.querySelector('#font-css') -// const fontCSS = fontCSSTemplate.cloneNode(true) -// fontCSS.innerHTML = fontCSS.innerHTML -// .replace(/Inter-var-VERSION/g, fontFamilyNameVar) -// .replace(/Inter-var-hinted-VERSION/g, fontFamilyNameVarHinted) -// .replace(/Inter-hinted-VERSION/g, fontFamilyNameHinted) -// .replace(/Inter-VERSION/g, fontFamilyName) -// .replace(/(\.woff2?)/g, '$1?r='+fontVersion) -// fontCSS.setAttribute('id', '') -// fontCSS.setAttribute('type', 'text/css') -// document.head.appendChild(fontCSS) - diff --git a/docs/lab/glyphinfo.json b/docs/lab/glyphinfo.json index fa5931218..627d40536 100644 --- a/docs/lab/glyphinfo.json +++ b/docs/lab/glyphinfo.json @@ -1461,7 +1461,6 @@ , ["brokenbar", "brokenbar", 0, "00A6", "BROKEN BAR"] , ["backslash", "backslash", 0, "005C", "REVERSE SOLIDUS"] , ["hyphen", "hyphen", 0, "002D", "HYPHEN-MINUS"] -, ["softhyphen", "softhyphen", 0, "00AD", "SOFT HYPHEN"] , ["endash", "endash", 0, "2013", "EN DASH"] , ["figuredash", "figuredash", 0, "2012", "FIGURE DASH"] , ["emdash", "emdash", 0, "2014", "EM DASH"] @@ -2583,14 +2582,6 @@ , ["uni2053", "uni2053", 0, "2053", "SWUNG DASH"] , ["uni2054", "uni2054", 0, "2054", "INVERTED UNDERTIE"] , ["uni2055", "uni2055", 0, "2055", "FLOWER PUNCTUATION MARK"] -, ["uni2056", "uni2056", 0, "2056", "THREE DOT PUNCTUATION"] -, ["uni2058", "uni2058", 0, "2058", "FOUR DOT PUNCTUATION"] -, ["uni2059", "uni2059", 0, "2059", "FIVE DOT PUNCTUATION"] -, ["uni205a_", "uni205A", 0, "205A", "TWO DOT PUNCTUATION"] -, ["uni205b_", "uni205B", 0, "205B", "FOUR DOT MARK"] -, ["uni205c_", "uni205C", 0, "205C", "DOTTED CROSS"] -, ["uni205d_", "uni205D", 0, "205D", "TRICOLON"] -, ["uni205e_", "uni205E", 0, "205E", "VERTICAL FOUR DOTS"] , ["verticalbardbl", "verticalbardbl", 0, "2016", "DOUBLE VERTICAL LINE"] , ["hyphen____", "hyphen__", 0, "2010", "HYPHEN"] , ["hyphennobreak", "hyphennobreak", 0, "2011", "NON-BREAKING HYPHEN"] diff --git a/docs/lab/index.html b/docs/lab/index.html index 50c4ce8b7..db8376012 100644 --- a/docs/lab/index.html +++ b/docs/lab/index.html @@ -16,19 +16,10 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) { } } -// Safari? -(function(u){ if ( - u.indexOf('Safari/') != -1 && - u.indexOf('Chrome/') == -1 && - u.indexOf('Chromium/') == -1 -) { - document.documentElement.classList.add('safari') -} })(navigator.userAgent); - </script> - <script type="text/javascript" src="samples.js?v=3.19"></script> - <script type="text/javascript" src="build-version.js?v=3.19"></script> - <script type="text/javascript" src="font-files.js?v=3.19"></script> + <script type="text/javascript" src="samples.js?v=4.0"></script> + <script type="text/javascript" src="build-version.js?v=4.0"></script> + <script type="text/javascript" src="font-files.js?v=4.0"></script> <link href="lab.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese"> </head> @@ -76,12 +67,6 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) { <input type="range" value="400" step="1" min="100" max="900" name="varWeight"> </label> - <label class="label-and-value with-slider varfontControl"> - <span title="Slant">slnt:</span> - <input type="number" value="0" step="0.1" min="0" max="10" name="varSlantNum"> - <input type="range" value="0" step="0.01" min="0" max="10" name="varSlant"> - </label> - <label class="label-and-value staticfontControl"> <span>Weight:</span> <select name="weight" style="max-width:100px"> @@ -169,7 +154,7 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) { <span>Compare:</span> <select name="compare"> <option value="-" selected>Nothing</option> - <option value="inter-other">Other Inter family</option> + <!-- <option value="inter-other">Other Inter family</option> --> <option value="system">System font</option> </select> </label> @@ -178,44 +163,60 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) { <h3>Features</h3> <div class="checkbox-group"> - <!-- case --><label title="Upper case adjustments"><input type="checkbox" class="featopt" name="feat:case"><span>case (Case alternates)</span></label> - <!-- cpsp --><label title='Capital spacing (adds 16 UPM to each sidebearing)'><input type="checkbox" class="featopt" name="feat:cpsp"><span>cpsp (Capital spacing)</span></label> - <!-- dlig --><label title="Discretionary ligatures, e.g. !? -> interrobang"><input type="checkbox" class="featopt" name="feat:dlig"><span>dlig (Discretionary ligatures)</span></label> + <!-- case --><label title="Case-Sensitive Forms"><input type="checkbox" class="featopt" name="feat:case"><span>case (Case-Sensitive Forms)</span></label> + <!-- dlig --><label title="Discretionary ligatures"><input type="checkbox" class="featopt" name="feat:dlig"><span>dlig (Discretionary ligatures)</span></label> <!-- frac --><label title="Contextual automatic fractions"><input type="checkbox" class="featopt" name="feat:frac"><span>frac (Auto fractions)</span></label> <!-- dnom --><label title="Convert all numbers to denominators"><input type="checkbox" class="featopt" name="feat:dnom"><span>dnom (Denominators)</span></label> <!-- numr --><label title="Convert all numbers to numerators"><input type="checkbox" class="featopt" name="feat:numr"><span>numr (Numerators)</span></label> - <!-- salt --><label title='Stylistic Alternates'><input type="checkbox" class="featopt" name="feat:salt"><span>salt (Stylistic Alternates)</span></label> <!-- subs --><label title="Subscript"><input type="checkbox" class="featopt" name="feat:subs"><span>subs (Subscript)</span></label> <!-- sups --><label title="Superscript"><input type="checkbox" class="featopt" name="feat:sups"><span>sups (Superscript)</span></label> <!-- tnum --><label title="Tabular numbers (fixed width)"><input type="checkbox" class="featopt" name="feat:tnum"><span>tnum (Tabular numbers)</span></label> <!-- zero --><label title="Slashed zero"><input type="checkbox" class="featopt" name="feat:zero"><span>zero (Slashed zero)</span></label> - <label title='Stylistic set 1 "Open Digits"'><input type="checkbox" class="featopt" name="feat:ss01"><span>ss01 (Open Digits)</span></label> - <label title='Stylistic set 2 "Disambiguation"'><input type="checkbox" class="featopt" name="feat:ss02"><span>ss02 (Disambiguation)</span></label> - <label title='Stylistic set 3 "Lower case r curves into round neighbors"'><input type="checkbox" class="featopt" name="feat:ss03"><span>ss03 (Curved r)</span></label> - <label title='Stylistic set 4 "Disambiguation without slashed zero"'><input type="checkbox" class="featopt" name="feat:ss04"><span>ss04 (Disambiguation w/o zero)</span></label> - <label title='Character Variant 1 "Alternate one"'><input type="checkbox" class="featopt" name="feat:cv01"><span>cv01 (Alternate one)</span></label> - <label title='Character Variant 2 "Open four"'><input type="checkbox" class="featopt" name="feat:cv02"><span>cv02 (Open four)</span></label> - <label title='Character Variant 3 "Open six"'><input type="checkbox" class="featopt" name="feat:cv03"><span>cv03 (Open six)</span></label> - <label title='Character Variant 4 "Open nine"'><input type="checkbox" class="featopt" name="feat:cv04"><span>cv04 (Open nine)</span></label> - <label title='Character Variant 5 "Lower case L with tail")'><input type="checkbox" class="featopt" name="feat:cv05"><span>cv05 (Lower case L with tail)</span></label> - <label title='Character Variant 6 "Lower case r with curved tail")'><input type="checkbox" class="featopt" name="feat:cv06"><span>cv06 (Curved lower case r)</span></label> - <label title='Character Variant 7 "Alternate German double-s")'><input type="checkbox" class="featopt" name="feat:cv07"><span>cv07 (German double-s)</span></label> - <label title='Character Variant 8 "Upper-case i with serif")'><input type="checkbox" class="featopt" name="feat:cv08"><span>cv08 (Upper-case i with serif)</span></label> - <label title='Character Variant 9 "Flat top three")'><input type="checkbox" class="featopt" name="feat:cv09"><span>cv09 (Flat top three)</span></label> - <label title='Character Variant 10 "Capital G with spur")'><input type="checkbox" class="featopt" name="feat:cv10"><span>cv10 (Capital G with spur)</span></label> - <label title='Character Variant 11 "Single-storey a")'><input type="checkbox" class="featopt" name="feat:cv11"><span>cv11 (Single-storey a)</span></label> </div> <div class="checkbox-group"> - <span>Default-on features:</span> - <label title="Standard ligatures"><input type="checkbox" class="featopt" name="feat:liga=0"> Disable liga (Standard ligatures)</label> - <label title="Contextual alternates"><input type="checkbox" class="featopt" name="feat:calt=0"> Disable calt (Contextual alternates)</label> - <label title="Glyph Composition/Decomposition"><input type="checkbox" class="featopt" name="feat:ccmp=0"> Disable ccmp</label> - <label title="Kerning"><input type="checkbox" class="featopt" name="feat:kern=0"> Disable kern (Kerning)</label> + <span>Stylistic sets:</span> + <!-- ss01 --><label title='Stylistic set 1 "Open Digits"'><input type="checkbox" class="featopt" name="feat:ss01"><span>ss01 (Open Digits)</span></label> + <!-- ss02 --><label title='Stylistic set 2 "Disambiguation (with zero)"'><input type="checkbox" class="featopt" name="feat:ss02"><span>ss02 (Disambiguation w/ zero)</span></label> + <!-- ss03 --><label title='Stylistic set 3 "Round quotes & commas"'><input type="checkbox" class="featopt" name="feat:ss03"><span>ss03 (Round quotes & commas)</span></label> + <!-- ss04 --><label title='Stylistic set 4 "Disambiguation without slashed zero"'><input type="checkbox" class="featopt" name="feat:ss04"><span>ss04 (Disambiguation w/o zero)</span></label> + <!-- ss05 --><label title='Stylistic set 5 "Circled characters"'><input type="checkbox" class="featopt" name="feat:ss05"><span>ss05 (Circled characters)</span></label> + <!-- ss06 --><label title='Stylistic set 6 "Squared characters"'><input type="checkbox" class="featopt" name="feat:ss06"><span>ss06 (Squared characters)</span></label> + <!-- ss07 --><label title='Stylistic set 7 "Square punctuation"'><input type="checkbox" class="featopt" name="feat:ss07"><span>ss07 (Square punctuation)</span></label> + <!-- ss08 --><label title='Stylistic set 8 "Square quotes"'><input type="checkbox" class="featopt" name="feat:ss08"><span>ss08 (Square quotes)</span></label> </div> - <div> - <a href="var.html">Variable test page</a> + <div class="checkbox-group"> + <span>Character variants:</span> + <!-- cv01 --><label title='Character Variant 1 "Alternate one"'><input type="checkbox" class="featopt" name="feat:cv01"><span>cv01 (Alternate one)</span></label> + <!-- cv02 --><label title='Character Variant 2 "Open four"'><input type="checkbox" class="featopt" name="feat:cv02"><span>cv02 (Open four)</span></label> + <!-- cv03 --><label title='Character Variant 3 "Open six"'><input type="checkbox" class="featopt" name="feat:cv03"><span>cv03 (Open six)</span></label> + <!-- cv04 --><label title='Character Variant 4 "Open nine"'><input type="checkbox" class="featopt" name="feat:cv04"><span>cv04 (Open nine)</span></label> + <!-- cv05 --><label title='Character Variant 5 "Lower case L with tail")'><input type="checkbox" class="featopt" name="feat:cv05"><span>cv05 (Lower case L with tail)</span></label> + <!-- cv06 --><label title='Character Variant 6 "Simplified u")'><input type="checkbox" class="featopt" name="feat:cv06"><span>cv06 (Simplified u)</span></label> + <!-- cv07 --><label title='Character Variant 7 "Alternate German double-s")'><input type="checkbox" class="featopt" name="feat:cv07"><span>cv07 (German double-s)</span></label> + <!-- cv08 --><label title='Character Variant 8 "Upper-case i with serif")'><input type="checkbox" class="featopt" name="feat:cv08"><span>cv08 (Upper-case i with serif)</span></label> + <!-- cv09 --><label title='Character Variant 9 "Flat top three")'><input type="checkbox" class="featopt" name="feat:cv09"><span>cv09 (Flat top three)</span></label> + <!-- cv10 --><label title='Character Variant 10 "Capital G with spur")'><input type="checkbox" class="featopt" name="feat:cv10"><span>cv10 (Capital G with spur)</span></label> + <!-- cv11 --><label title='Character Variant 11 "Single-storey a")'><input type="checkbox" class="featopt" name="feat:cv11"><span>cv11 (Single-storey a)</span></label> + <!-- cv12 --><label title='Character Variant 12 "Compact f")'><input type="checkbox" class="featopt" name="feat:cv12"><span>cv12 (Compact f)</span></label> + <!-- cv13 --><label title='Character Variant 13 "Compact t")'><input type="checkbox" class="featopt" name="feat:cv13"><span>cv13 (Compact t)</span></label> + </div> + + <div class="checkbox-group"> + <span>Partial or uncommon:</span> + <!-- cpsp --><label title='Capital spacing (adds 16 UPM to each sidebearing)'><input type="checkbox" class="featopt" name="feat:cpsp"><span>cpsp (Capital spacing)</span></label> + <!-- c2sc --><label title="Small Capitals From Capitals"><input type="checkbox" class="featopt" name="feat:c2sc"><span>c2sc (Small Caps; incomplete)</span></label> + <!-- salt --><label title='Stylistic Alternates'><input type="checkbox" class="featopt" name="feat:salt"><span>salt (Stylistic Alternates)</span></label> + <!-- aalt --><label title='Access All Alternates'><input type="checkbox" class="featopt" name="feat:aalt"><span>aalt (Access All Alternates)</span></label> + </div> + + <div class="checkbox-group"> + <span>Enabled by default:</span> + <!-- calt --><label title="Contextual alternates"><input type="checkbox" class="featopt" name="feat:calt=0"> Disable calt (Contextual alternates)</label> + <!-- ccmp --><label title="Glyph Composition/Decomposition"><input type="checkbox" class="featopt" name="feat:ccmp=0"> Disable ccmp</label> + <!-- locl --><label title='Localized Forms'><input type="checkbox" class="featopt" name="feat:locl=0"><span>Disable locl (Localized Forms)</span></label> + <!-- kern --><label title="Kerning"><input type="checkbox" class="featopt" name="feat:kern=0"> Disable kern (Kerning)</label> </div> </div> @@ -254,16 +255,7 @@ function InterDynamicTracking(fontSize, family /* :"text"|"display" */) { return a + b * Math.pow(Math.E, c * fontSize) } -// provide hinted=1 to use TTF hinted fonts. -// not exposed in UI as it only works when serving the site locally -// with fonts in the build/fonts directory. -const hinted = location.search.indexOf('hinted=1') != -1 -const familyName = hinted ? fontFamilyNameHinted : fontFamilyName; - -if (hinted) { - document.body.classList.add('hinted') -} -document.body.style.fontFamily = familyName +document.body.style.fontFamily = fontFamilyName function parseQueryString(qs) { @@ -838,19 +830,16 @@ function main() { let usingVarFont = false let usingFontFamily = "text" - var varWeightRange, varSlantRange, varOpszRange + var varWeightRange, varOpszRange var varWeightSettingValueImpl = false - var varSlantSettingValueImpl = false var varOpszSettingValueImpl = false function getFontFamily(overrideFamily) { return ( (overrideFamily || usingFontFamily) == "text" ? ( - usingVarFont ? (hinted ? fontFamilyNameVarHinted : fontFamilyNameVar) : - hinted ? fontFamilyNameHinted : fontFamilyName + usingVarFont ? fontFamilyNameVar : fontFamilyName ) : ( - usingVarFont ? (hinted ? fontFamilyNameDisplayVarHinted : fontFamilyNameDisplayVar) : - hinted ? fontFamilyNameDisplayHinted : fontFamilyNameDisplay + usingVarFont ? fontFamilyNameDisplayVar : fontFamilyNameDisplay ) ) } @@ -866,33 +855,18 @@ function main() { var italicVar = vars.bind('italic', (e, on) => { document.body.classList[on ? 'add' : 'remove']('italic') - if (usingVarFont && !varSlantSettingValueImpl) { - if (varSlantRange) { - varSlantRange.setValue(on ? 100 : 0) - } - updateVarFont() - } }) let varState = { weight: 400, // 400..900 - slant: 0, // 0..-10 opsz: 14, // 14..32 } function updateVarFont() { if (usingVarFont) { - varSlantSettingValueImpl = true - if (varState.slant <= 0.1) { - varState.slant = 0 - italicVar.setValue(false) - } else { - italicVar.setValue(true) - } - varSlantSettingValueImpl = false setCSSProp( "font-variation-settings", - `"wght" ${varState.weight}, "slnt" ${-varState.slant}, "opsz" ${varState.opsz}` + `"wght" ${varState.weight}, "opsz" ${varState.opsz}` ) } else { setCSSProp("font-variation-settings", null) @@ -910,10 +884,6 @@ function main() { varWeightRange.setValue(w) } } - // document.body.style.fontFamily = ( - // hinted ? fontFamilyNameVarHinted : - // fontFamilyNameVar - // ) } else { if (!isInitial && varWeightRange) { // copy value of var weight to static weight @@ -922,10 +892,6 @@ function main() { vars.setValue("weight", Math.round(w / 100) * 100) } } - // document.body.style.fontFamily = ( - // hinted ? fontFamilyNameHinted : - // fontFamilyName - // ); } document.body.style.fontFamily = getFontFamily() updateVarFont() @@ -936,11 +902,6 @@ function main() { vars.setValue("wght", v) }) - let varSlantNum = vars.bind('_slnt', '[name="varSlantNum"]', (e, v) => { - if (varSlantRange && !varSlantSettingValueImpl) - vars.setValue("slnt", v) - }) - let varOpszNum = vars.bind('_opsz', '[name="varOpszNum"]', (e, v) => { if (varOpszRange && !varOpszSettingValueImpl) vars.setValue("opsz", v) @@ -964,18 +925,6 @@ function main() { return snapValue(e.valueAsNumber, 100) }) - varSlantRange = vars.bind('slnt', '[name="varSlant"]', (e, v) => { - varState.slant = v - varSlantSettingValueImpl = true - varSlantNum.setValue(v) - varSlantSettingValueImpl = false - updateVarFont() - }, (e, prevValue, ev) => { - if (prevValue === undefined) - return 0 - return snapValue(e.valueAsNumber, 1) - }) - varOpszRange = vars.bind('opsz', '[name="varOpsz"]', (e, v) => { varState.opsz = v varOpszSettingValueImpl = true @@ -1003,12 +952,12 @@ function main() { e.classList.remove(secondarySampleClassNameAddition)) } if (className) { - let explicitFontFamily = null - if (className == "inter-other-font") { - let otherFamily = usingFontFamily == "text" ? "display" : "text" - explicitFontFamily = getFontFamily(otherFamily) - } - secondarySample.style.fontFamily = explicitFontFamily + // let explicitFontFamily = null + // if (className == "inter-other-font") { + // let otherFamily = usingFontFamily == "text" ? "display" : "text" + // explicitFontFamily = getFontFamily(otherFamily) + // } + // secondarySample.style.fontFamily = explicitFontFamily secondarySample.classList.add(className) secondaryFontElements.forEach(e => e.classList.add(className)) } @@ -1029,9 +978,8 @@ function main() { vars.bind('compare', (e, v) => { disableSecondarySample() switch (v) { - // case 'roboto': enableSecondarySample('robotoFont'); break case 'system': enableSecondarySample('systemFont'); break - case 'inter-other': enableSecondarySample('inter-other-font'); break + //case 'inter-other': enableSecondarySample('inter-other-font'); break default: return '-'; } }, e => (e.value && e.value != '-') ? e.value : null) diff --git a/docs/lab/lab.css b/docs/lab/lab.css index b60c688d4..f9c5bb311 100644 --- a/docs/lab/lab.css +++ b/docs/lab/lab.css @@ -134,9 +134,6 @@ body { transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1); transition-property: color, background; } -.robotoFont { - font-family: "Roboto", serif; -} .systemFont { font-family: system-ui,-system,-system-ui,-apple-system,sans-serif; } diff --git a/docs/res/base.css b/docs/res/base.css index c6b5582c2..28d453d2a 100644 --- a/docs/res/base.css +++ b/docs/res/base.css @@ -5,12 +5,12 @@ layout: none @font-face { font-family: InterVariable; font-style: normal; font-weight: 100 900; font-display: block; /* <-- block, not swap */ - src: url('../font-files/Inter-Variable.woff2?v={{font_v}}') format('woff2'); + src: url('../font-files/InterVariable.woff2?v={{font_v}}') format('woff2'); } @font-face { font-family: InterVariable; font-style: italic; font-weight: 100 900; font-display: block; /* <-- block, not swap */ - src: url('../font-files/Inter-Variable-Italic.woff2?v={{font_v}}') format('woff2'); + src: url('../font-files/InterVariable-Italic.woff2?v={{font_v}}') format('woff2'); } @font-face { font-family: "jbmono"; diff --git a/docs/res/glyph-inspector.js b/docs/res/glyph-inspector.js index f620d23e0..24f16540f 100644 --- a/docs/res/glyph-inspector.js +++ b/docs/res/glyph-inspector.js @@ -27,6 +27,7 @@ function pxround(px) { } const monotime = performance.now.bind(performance) +const WGHT_MIN = 14, WGHT_MAX = 32 class GlyphInspector { constructor() { @@ -35,7 +36,7 @@ class GlyphInspector { this.glyphUnicode = 0 this.defaultGlyphUnicode = 0x0041 this.selectedGlyphGridCell = null - this.defaultAxisValues = {wght: 400, opsz: 28} + this.defaultAxisValues = {wght: 400, opsz: WGHT_MAX} this.axisValues = {wght: 0, opsz: 0} this.idNameElement = $(".identification .name", rootElement) this.idUnicodeElement = $(".identification .unicode", rootElement) @@ -83,13 +84,13 @@ class GlyphInspector { // enable clicking on label to toggle this.opszSlider.onclick = (ev) => ev.stopPropagation() this.opszSlider.parentElement.onclick = (ev) => { - this.setFontInstance({opsz: this.axisValues.opsz > 14 ? 14 : 28}) + this.setFontInstance({opsz: this.axisValues.opsz > WGHT_MIN ? WGHT_MIN : WGHT_MAX}) } this.opszCheckbox = $('input[name="opsz-switch"]') - this.defaultAxisValues.opsz = this.opszCheckbox.checked ? 14 : 28 + this.defaultAxisValues.opsz = this.opszCheckbox.checked ? WGHT_MIN : WGHT_MAX this.opszCheckbox.onchange = (ev) => { - this.setFontInstance({opsz: this.opszCheckbox.checked ? 14 : 28}) + this.setFontInstance({opsz: this.opszCheckbox.checked ? WGHT_MIN : WGHT_MAX}) } let showDetailsCheckbox = $('input[name="show-details"]') @@ -272,7 +273,7 @@ class GlyphInspector { if (ev.shiftKey) wght = Math.round(wght / 100) * 100 wght = max(100, min(900, wght)) - // opsz = max(14, min(28, opsz)) + // opsz = max(WGHT_MIN, min(WGHT_MAX, opsz)) this.hasDraggedWght = true if (this.draggedWghtStartTime == 0) this.draggedWghtStartTime = monotime() @@ -942,7 +943,7 @@ class GlyphInspector { // let wght = 100 // let inc = true // setInterval(x => { - // this.setFontInstance({wght, opsz: 28}) + // this.setFontInstance({wght, opsz: WGHT_MAX}) // if (inc) { // wght += 10 // if (wght > 900) { @@ -961,5 +962,5 @@ class GlyphInspector { } let inspector = new GlyphInspector() -await inspector.loadFont('font-files/Inter-Variable.ttf') +await inspector.loadFont('font-files/InterVariable.ttf') // await inspector.loadFont('font-files/InterDisplay-Regular.otf') |