generated from googlefonts/googlefonts-project-template-blank
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #26 from gferreira2/main
updates to Roman & Italic sources + fresh avar2 fonts
- Loading branch information
Showing
2,141 changed files
with
125,160 additions
and
40,300 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,11 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <html lang="en" data-bs-theme="dark"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> | ||
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> | ||
| <title>AmstelvarA2 Roman avar2 × Amstelvar Roman (compare)</title> | ||
| <style> | ||
| body { | ||
| color: white; | ||
| background-color: black; | ||
| } | ||
| @font-face { | ||
| font-family: "Amstelvar Roman"; | ||
| src: url('Amstelvar-Roman[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,wdth,wght,opsz].ttf') format('truetype'); | ||
|
|
@@ -24,7 +20,7 @@ | |
| font-weight: regular; | ||
| font-display: auto; | ||
| } | ||
| .Amstelvar-Roman-avar1 { | ||
| .Amstelvar-Roman-original { | ||
| font-family: "Amstelvar Roman"; | ||
| } | ||
| .Amstelvar-Roman-avar2 { | ||
|
|
@@ -37,9 +33,6 @@ | |
| -moz-osx-font-smoothing: grayscale; | ||
| font-optical-sizing: none; | ||
| } | ||
| #avar1_container { | ||
| background-color: black; | ||
| } | ||
| output.form-control { | ||
| font-size: 0.85em !important; | ||
| } | ||
|
|
@@ -118,9 +111,66 @@ | |
| <body class='h-100 overflow-hidden'> | ||
| <div class='container-fluid p-3'> | ||
| <div class="row"> | ||
| <div class="col-4 col-lg-3"> | ||
| <div class="col-6 col-sm-5 col-md-4 col-lg-3 col-xxl-2"> | ||
|
|
||
| <small> | ||
| This is a test page comparing: | ||
| <ul> | ||
| <li>AmstelvarA2 avar2 (top)</li> | ||
| <li>Amstelvar original (bottom)</li> | ||
| </ul> | ||
| </small> | ||
|
|
||
| <hr/> | ||
|
|
||
| <!-- <h3 class='h6'>display options</h3> | ||
| <div class="row"> | ||
| <div class="col-4"> | ||
| <label for="mode" class="form-label"><small>color mode</small></label> | ||
| </div> | ||
| <div class="col-8"> | ||
| <select class="form-select-sm w-100" aria-label="select mode"> | ||
| <option value="light">light</option> | ||
| <option value="dark" selected>dark</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-4"> | ||
| <label for="fontsize" class="form-label"><small>font style</small></label> | ||
| </div> | ||
| <div class="col-8"> | ||
| <select class="form-select-sm w-100" aria-label="select style"> | ||
| <option value="roman" selected>Roman</option> | ||
| <option value="italic">Italic</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-4"> | ||
| <label for="language" class="form-label"><small>language</small></label> | ||
| </div> | ||
| <div class="col-8"> | ||
| <select class="form-select-sm w-100" aria-label="select language"> | ||
| <option value="english" selected>English</option> | ||
| <option value="french">French</option> | ||
| <option value="german">German</option> | ||
| <option value="greek">Greek</option> | ||
| <option value="portugues">Portuguese</option> | ||
| <option value="spanish">Spanish</option> | ||
| <option value="russian">Russian</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
| <h3 class='h6'>text properties</h3> | ||
| <hr/> | ||
| --> | ||
|
|
||
| <!-- <h3 class='h6'>text properties</h3> --> | ||
|
|
||
| <div class="row"> | ||
| <div class="col-4"> | ||
|
|
@@ -130,7 +180,7 @@ <h3 class='h6'>text properties</h3> | |
| <input type="range" class="form-range" min="8" max="144" value='14' id="fontsize"> | ||
| </div> | ||
| <div class="col-2"> | ||
| <output class="form-control text-light border-0 bg-transparent" id='fontsize_value'>14</output> | ||
| <output class="form-control border-0 bg-transparent" id='fontsize_value'><small>14</small></output> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
@@ -142,7 +192,7 @@ <h3 class='h6'>text properties</h3> | |
| <input type="range" class="form-range" min="1.00" max="1.60" value='1.20' step="0.05" id="lineheight"> | ||
| </div> | ||
| <div class="col-2"> | ||
| <output class="form-control text-light border-0 bg-transparent" id='lineheight_value'>1.20</output> | ||
| <output class="form-control border-0 bg-transparent" id='lineheight_value'><small>1.20</small></output> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
@@ -155,7 +205,7 @@ <h3 class='h6'>text properties</h3> | |
| <input type="range" class="form-range axis" min="-100" max="100" value='0' id="XTSP"> | ||
| </div> | ||
| <div class="col-2"> | ||
| <output class="form-control text-light border-0 bg-transparent" id='XTSP_value'>0</output> | ||
| <output class="form-control border-0 bg-transparent" id='XTSP_value'>0</output> | ||
| </div> | ||
| </div> | ||
| --> | ||
|
|
@@ -173,7 +223,7 @@ <h3 class='h6'>text properties</h3> | |
|
|
||
| <hr/> | ||
|
|
||
| <h3 class='h6'>blended axes</h3> | ||
| <!-- <h3 class='h6'>blended axes</h3> --> | ||
|
|
||
| <div class="row"> | ||
| <div class="col-4"> | ||
|
|
@@ -183,7 +233,7 @@ <h3 class='h6'>blended axes</h3> | |
| <input type="range" class="form-range axis" min="8" max="144" value='18' id="opsz"> | ||
| </div> | ||
| <div class="col-2"> | ||
| <output class="form-control text-light border-0 bg-transparent" id='opsz_value'>18</output> | ||
| <output class="form-control border-0 bg-transparent" id='opsz_value'><small>18</small></output> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
@@ -195,7 +245,7 @@ <h3 class='h6'>blended axes</h3> | |
| <input type="range" class="form-range axis" min="100" max="1000" value='400' id="wght"> | ||
| </div> | ||
| <div class="col-2"> | ||
| <output class="form-control text-light border-0 bg-transparent" id='wght_value'>400</output> | ||
| <output class="form-control border-0 bg-transparent" id='wght_value'><small>400</small></output> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
@@ -207,7 +257,7 @@ <h3 class='h6'>blended axes</h3> | |
| <input type="range" class="form-range axis" min="50" max="125" value='100' id="wdth"> | ||
| </div> | ||
| <div class="col-2"> | ||
| <output class="form-control text-light border-0 bg-transparent" id='wdth_value'>100</output> | ||
| <output class="form-control border-0 bg-transparent" id='wdth_value'><small>100</small></output> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
@@ -219,25 +269,21 @@ <h3 class='h6'>blended axes</h3> | |
| <input type="range" class="form-range axis" min="-300" max="500" value='0' id="GRAD"> | ||
| </div> | ||
| <div class="col-2"> | ||
| <output class="form-control text-light border-0 bg-transparent" id='GRAD_value'>0</output> | ||
| <output class="form-control border-0 bg-transparent" id='GRAD_value'><small>0</small></output> | ||
| </div> | ||
| </div> | ||
|
|
||
| <hr/> | ||
| <p><small>This is a test page comparing AmstelvarA2 Roman avar2 (top) with Amstelvar Roman (bottom).</small></p> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="col-8 col-lg-9 vh-100 position-relative"> | ||
| <div class="w-100 pe-3 position-absolute top-0 start-0 vh-100 ms-3 overflow-hidden"> | ||
| <div class="col-6 col-sm-7 col-md-8 col-lg-9 col-xxl-10 vh-100 position-relative"> | ||
| <div class="w-100 position-absolute top-0 start-0 vh-50 pt-3 ms-3 overflow-hidden"> | ||
| <span class="badge bg-primary float-end me-1">avar2</span> | ||
| <p id='sample_avar2' class='sample w-100 Amstelvar-Roman-avar2' contenteditable="true"> | ||
| <p id='sample_avar2' class='sample w-100 ps-3 Amstelvar-Roman-avar2' contenteditable="true"> | ||
| OpenType variable fonts are an adaptation of Apple's TrueType GX font variations to OpenType, with integration into key aspects of the OpenType format including OpenType Layout tables and both TrueType and CFF glyph outline formats. It also surpasses TrueType GX by providing better interoperability, both between different fonts, and between variable fonts and font-formatting specifications such as those found in Cascading Style Sheets. The technology allows software to access any design instance for a continuous range of designs defined within the font. When a specific design instance has been selected, the glyph outlines or other data values for that design instance are computed as font data is being processed during text layout and rasterization. The technology uses interpolation and extrapolation mechanisms that have been supported in font-development tools and used by font designers for many years. In that paradigm, the font designer creates a variable design, but then chooses specific instances to generate as static, non-variable fonts that get distributed to customers. With variable fonts, however, the font produced and distributed by the font designer can have built-in variability, and the interpolation mechanisms can now be built into operating systems and Web browsers or other applications, with specific design instances selected at time of use. One of the key benefits of the technology is that it can significantly reduce the combined size of font data whenever multiple styles are in use. On the Web, this may allow a site to use more font styles while at the same time reducing page load times. A further benefit is that it gives access to a continuous range of style variations, which can provide benefits for responsive design. | ||
| </p> | ||
| </div> | ||
| <div class="w-100 pe-3 position-absolute top-50 start-0 vh-50 pt-3 ms-3 border-top border-secondary overflow-hidden" id='avar1_container'> | ||
| <div class="w-100 pe-3 position-absolute top-50 start-0 vh-50 pt-3 ms-3 border-top border-secondary overflow-hidden bg-body" id='avar1_container'> | ||
| <span class="badge bg-primary float-end me-2">original</span> | ||
| <p id='sample_original' class='sample w-100 Amstelvar-Roman-avar1'> | ||
| <p id='sample_original' class='sample w-100 ps-3 Amstelvar-Roman-original'> | ||
| OpenType variable fonts are an adaptation of Apple's TrueType GX font variations to OpenType, with integration into key aspects of the OpenType format including OpenType Layout tables and both TrueType and CFF glyph outline formats. It also surpasses TrueType GX by providing better interoperability, both between different fonts, and between variable fonts and font-formatting specifications such as those found in Cascading Style Sheets. The technology allows software to access any design instance for a continuous range of designs defined within the font. When a specific design instance has been selected, the glyph outlines or other data values for that design instance are computed as font data is being processed during text layout and rasterization. The technology uses interpolation and extrapolation mechanisms that have been supported in font-development tools and used by font designers for many years. In that paradigm, the font designer creates a variable design, but then chooses specific instances to generate as static, non-variable fonts that get distributed to customers. With variable fonts, however, the font produced and distributed by the font designer can have built-in variability, and the interpolation mechanisms can now be built into operating systems and Web browsers or other applications, with specific design instances selected at time of use. One of the key benefits of the technology is that it can significantly reduce the combined size of font data whenever multiple styles are in use. On the Web, this may allow a site to use more font styles while at the same time reducing page load times. A further benefit is that it gives access to a continuous range of style variations, which can provide benefits for responsive design. | ||
| </p> | ||
| </div> | ||
|
|
@@ -246,6 +292,7 @@ <h3 class='h6'>blended axes</h3> | |
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> | ||
| </body> | ||
| </html> | ||
Oops, something went wrong.