archive/inter-font
Archived
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

website: expose light weights in samples and dynmetrics

Browse source
This commit is contained in:
Rasmus Andersson 2019-01-06 11:56:06 -08:00
parent 3f554a92ac
commit 897201a74d
4 changed files with 44 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

8
docs/_includes/ctxedit.html
View file

@ -20,7 +20,13 @@ endfor
<div class="wrapper"> <div class="wrapper">
<div class="control popup"> <div class="control popup">
<select data-binding="style"> <select data-binding="style">
<option value="regular" default>Regular</option> <option value="thin">Thin</option>
<option value="thin-italic">Thin Italic</option>
<option value="extra-light">Extra Light</option>
<option value="extra-light-italic">Extra Light Italic</option>
<option value="light">Light</option>
<option value="light-italic">Light Italic</option>
<option value="regular" default selected>Regular</option>
<option value="italic">Italic</option> <option value="italic">Italic</option>
<option value="medium">Medium</option> <option value="medium">Medium</option>
<option value="medium-italic">Medium Italic</option> <option value="medium-italic">Medium Italic</option>

18
docs/dynmetrics/index.html
View file

@ -85,17 +85,23 @@ endfor
<div class="control"> <div class="control">
<img title="Style" class="icon" src="../samples/icons/style.svg"> <img title="Style" class="icon" src="../samples/icons/style.svg">
<select data-binding="style"> <select data-binding="style">
<option value="regular" default>Regular</option> <option value="thin">Thin</option>
<option value="thin-italic">Thin Italic</option>
<option value="extra-light">Extra Light</option>
<option value="extra-light-italic">Extra Light Italic</option>
<option value="light">Light</option>
<option value="light-italic">Light Italic</option>
<option value="regular" default selected>Regular</option>
<option value="italic">Italic</option> <option value="italic">Italic</option>
<option value="medium" default>Medium</option> <option value="medium">Medium</option>
<option value="medium-italic">Medium Italic</option> <option value="medium-italic">Medium Italic</option>
<option value="semi-bold" default>Semi Bold</option> <option value="semi-bold">Semi Bold</option>
<option value="semi-bold-italic">Semi Bold Italic</option> <option value="semi-bold-italic">Semi Bold Italic</option>
<option value="bold" default>Bold</option> <option value="bold">Bold</option>
<option value="bold-italic">Bold Italic</option> <option value="bold-italic">Bold Italic</option>
<option value="extra-bold" default>Extra Bold</option> <option value="extra-bold">Extra Bold</option>
<option value="extra-bold-italic">Extra Bold Italic</option> <option value="extra-bold-italic">Extra Bold Italic</option>
<option value="black" default>Black</option> <option value="black">Black</option>
<option value="black-italic">Black Italic</option> <option value="black-italic">Black Italic</option>
</select> </select>
</div> </div>

30
docs/res/base.css
View file

@ -27,18 +27,24 @@ body {
/* Font style classifiers used by samples and dynmetrics */ /* Font style classifiers used by samples and dynmetrics */
/* Note: font-variation-settings is needed for Safari. */ /* Note: font-variation-settings is needed for Safari. */
.font-style-regular { font-variation-settings: "wght" 400, "slnt" 0 !important; font-weight:400 !important; font-style:normal !important; } .font-style-thin { font-variation-settings: "wght" 100, "slnt" 0 !important; font-weight:100 !important; font-style:normal !important; }
.font-style-italic { font-variation-settings: "wght" 400, "slnt" 100 !important; font-weight:400 !important; font-style:oblique !important; } .font-style-thin-italic { font-variation-settings: "wght" 100, "slnt" 100 !important; font-weight:100 !important; font-style:oblique !important; }
.font-style-medium { font-variation-settings: "wght" 500, "slnt" 0 !important; font-weight:500 !important; font-style:normal !important; } .font-style-extra-light { font-variation-settings: "wght" 200, "slnt" 0 !important; font-weight:100 !important; font-style:normal !important; }
.font-style-medium-italic { font-variation-settings: "wght" 500, "slnt" 100 !important; font-weight:500 !important; font-style:oblique !important; } .font-style-extra-light-italic { font-variation-settings: "wght" 200, "slnt" 100 !important; font-weight:100 !important; font-style:oblique !important; }
.font-style-semi-bold { font-variation-settings: "wght" 600, "slnt" 0 !important; font-weight:600 !important; font-style:normal !important; } .font-style-light { font-variation-settings: "wght" 300, "slnt" 0 !important; font-weight:300 !important; font-style:normal !important; }
.font-style-semi-bold-italic { font-variation-settings: "wght" 600, "slnt" 100 !important; font-weight:600 !important; font-style:oblique !important; } .font-style-light-italic { font-variation-settings: "wght" 300, "slnt" 100 !important; font-weight:300 !important; font-style:oblique !important; }
.font-style-bold { font-variation-settings: "wght" 700, "slnt" 0 !important; font-weight:700 !important; font-style:normal !important; } .font-style-regular { font-variation-settings: "wght" 400, "slnt" 0 !important; font-weight:400 !important; font-style:normal !important; }
.font-style-bold-italic { font-variation-settings: "wght" 700, "slnt" 100 !important; font-weight:700 !important; font-style:oblique !important; } .font-style-italic { font-variation-settings: "wght" 400, "slnt" 100 !important; font-weight:400 !importants; font-style:oblique !important; }
.font-style-extra-bold { font-variation-settings: "wght" 800, "slnt" 0 !important; font-weight:800 !important; font-style:normal !important; } .font-style-medium { font-variation-settings: "wght" 500, "slnt" 0 !important; font-weight:500 !important; font-style:normal !important; }
.font-style-extra-bold-italic { font-variation-settings: "wght" 800, "slnt" 100 !important; font-weight:800 !important; font-style:oblique !important; } .font-style-medium-italic { font-variation-settings: "wght" 500, "slnt" 100 !important; font-weight:500 !important; font-style:oblique !important; }
.font-style-black { font-variation-settings: "wght" 900, "slnt" 0 !important; font-weight:900 !important; font-style:normal !important; } .font-style-semi-bold { font-variation-settings: "wght" 600, "slnt" 0 !important; font-weight:600 !important; font-style:normal !important; }
.font-style-black-italic { font-variation-settings: "wght" 900, "slnt" 100 !important; font-weight:900 !important; font-style:oblique !important; } .font-style-semi-bold-italic { font-variation-settings: "wght" 600, "slnt" 100 !important; font-weight:600 !important; font-style:oblique !important; }
.font-style-bold { font-variation-settings: "wght" 700, "slnt" 0 !important; font-weight:700 !important; font-style:normal !important; }
.font-style-bold-italic { font-variation-settings: "wght" 700, "slnt" 100 !important; font-weight:700 !important; font-style:oblique !important; }
.font-style-extra-bold { font-variation-settings: "wght" 800, "slnt" 0 !important; font-weight:800 !important; font-style:normal !important; }
.font-style-extra-bold-italic { font-variation-settings: "wght" 800, "slnt" 100 !important; font-weight:800 !important; font-style:oblique !important; }
.font-style-black { font-variation-settings: "wght" 900, "slnt" 0 !important; font-weight:900 !important; font-style:normal !important; }
.font-style-black-italic { font-variation-settings: "wght" 900, "slnt" 100 !important; font-weight:900 !important; font-style:oblique !important; }
@supports (font-variation-settings: normal) { @supports (font-variation-settings: normal) {
body { body {

7
docs/res/ctxedit.js
View file

@ -48,14 +48,21 @@ class FontStyleProp {
valueInStyle(s) { valueInStyle(s) {
let italic = s['font-style'] == 'italic' || s['font-style'].indexOf('oblique') != -1 let italic = s['font-style'] == 'italic' || s['font-style'].indexOf('oblique') != -1
let weight = parseFloat(s['font-weight']) let weight = parseFloat(s['font-weight'])
console.log("s['font-weight']:", s['font-weight'])
if (isNaN(weight)) { if (isNaN(weight)) {
weight = s['font-weight'] weight = s['font-weight']
if (weight == 'thin') { return italic ? 'thin-italic' : 'thin' }
if (weight == 'extra-light') {return italic ? 'extra-light-italic' :'extra-light' }
if (weight == 'light') { return italic ? 'light-italic' : 'light' }
if (weight == 'normal') { return italic ? 'italic' : 'regular' } if (weight == 'normal') { return italic ? 'italic' : 'regular' }
if (weight == 'medium') { return italic ? 'medium-italic' : 'medium' } if (weight == 'medium') { return italic ? 'medium-italic' : 'medium' }
if (weight == 'semi-bold') { return italic ? 'semi-bold-italic' : 'semi-bold' } if (weight == 'semi-bold') { return italic ? 'semi-bold-italic' : 'semi-bold' }
if (weight == 'bold') { return italic ? 'bold-italic' : 'bold' } if (weight == 'bold') { return italic ? 'bold-italic' : 'bold' }
if (weight == 'extra-bold') { return italic ? 'extra-bold-italic' : 'extra-bold' } if (weight == 'extra-bold') { return italic ? 'extra-bold-italic' : 'extra-bold' }
} else { } else {
if (weight <= 150) { return italic ? 'thin-italic' : 'thin' }
if (weight <= 250) { return italic ? 'extra-light-italic' :'extra-light' }
if (weight <= 350) { return italic ? 'light-italic' : 'light' }
if (weight <= 450) { return italic ? 'italic' : 'regular' } if (weight <= 450) { return italic ? 'italic' : 'regular' }
if (weight <= 550) { return italic ? 'medium-italic' : 'medium' } if (weight <= 550) { return italic ? 'medium-italic' : 'medium' }
if (weight <= 650) { return italic ? 'semi-bold-italic' : 'semi-bold' } if (weight <= 650) { return italic ? 'semi-bold-italic' : 'semi-bold' }