From e0bf066e066a20c4f7943f0cfb24bb4d5d883e76 Mon Sep 17 00:00:00 2001 From: be5invis Date: Fri, 18 Dec 2015 07:28:46 +0800 Subject: [PATCH] Make an oblique. --- glyphs/letters-unified-basic.ptl | 11 ++-- onegroup.mk | 77 ++++++++++++++----------- parameters.toml | 8 +++ testdrive/fonts.css | 99 +++++++++++++++++++++++++------- testdrive/index.html | 62 +++++++++++++------- 5 files changed, 174 insertions(+), 83 deletions(-) diff --git a/glyphs/letters-unified-basic.ptl b/glyphs/letters-unified-basic.ptl index e0c451eb8..10f80077f 100644 --- a/glyphs/letters-unified-basic.ptl +++ b/glyphs/letters-unified-basic.ptl @@ -493,8 +493,8 @@ symbol-block 'a' include eMarks set-anchor 'trailing' BASE (RIGHTSB - markHalfStroke) 0 local bartop (XH * BARPOS * 1.02 + HALFSTROKE) - local lowslope : let [k : linreg 18 0 126 0.85 STROKE] : [shoulderMidSlope SHOULDERFINE nothing (-1)] * k - TANSLANT * (1 - k) - local lowmiddle : [mix (SB + OX) (RIGHTSB - HALFSTROKE * HVCONTRAST) [linreg 72 0.51 126 0.56 STROKE]] + CORRECTION_OMIDS + local lowslope : shoulderMidSlope SHOULDERFINE nothing (-1) + local lowmiddle : [mix (SB + OX) (RIGHTSB - HALFSTROKE * HVCONTRAST) [linreg 72 0.51 126 0.58 STROKE]] + CORRECTION_OMIDS * 0.5 local barsmooth : mix SB RIGHTSB 0.55 include : dispiro widths.lhs @@ -510,9 +510,8 @@ symbol-block 'a' g4 (SB + OX) (bartop * 0.95 * (SMALLSMOOTHB / (SMALLSMOOTHA + SMALLSMOOTHB))) arcvh g4 (lowmiddle + (-lowslope) * STROKE) O [heading {.y 1 .x lowslope}] - archv - flat (RIGHTSB - STROKE * HVCONTRAST) (SMALLSMOOTHB * 0.9) [widths 0 SHOULDERFINE] - curl (RIGHTSB - STROKE * HVCONTRAST) (SMALLSMOOTHB * 0.9 + 1) + archv 16 + straight.up.end (RIGHTSB - STROKE * HVCONTRAST + SHOULDERFINE * HVCONTRAST) (SMALLSMOOTHB * 0.9) [widths.lhs SHOULDERFINE] if SLAB : begin include : tagged 'serifRB' : RightwardBottomSerif RIGHTSB 0 SIDEJUT @@ -2393,7 +2392,7 @@ define {LongSShape} : symbol-block 'f' g4 (RIGHTSB + RBALANCE2 - OXE) (CAP - HOOK * 0.7) hookstart (CAP - O) true flat barleft [CAP - SMOOTHA * 0.85] - curl barleft 0 + curl barleft 0 [heading DOWNWARD] include : HBarTop [mix SB RIGHTSB 0] [mix SB RIGHTSB 0.95] fbar if SLAB : include : HBarBottom [mix SB RIGHTSB 0.02] [mix SB RIGHTSB 0.875] 0 diff --git a/onegroup.mk b/onegroup.mk index bb0c3ddfe..57d381687 100644 --- a/onegroup.mk +++ b/onegroup.mk @@ -21,10 +21,8 @@ NODE = node UPRIGHT = $(OBJDIR)/$(PREFIX)-thin.ttf $(OBJDIR)/$(PREFIX)-extralight.ttf $(OBJDIR)/$(PREFIX)-light.ttf $(OBJDIR)/$(PREFIX)-regular.ttf $(OBJDIR)/$(PREFIX)-medium.ttf $(OBJDIR)/$(PREFIX)-bold.ttf $(OBJDIR)/$(PREFIX)-heavy.ttf ITALIC = $(OBJDIR)/$(PREFIX)-thinitalic.ttf $(OBJDIR)/$(PREFIX)-extralightitalic.ttf $(OBJDIR)/$(PREFIX)-lightitalic.ttf $(OBJDIR)/$(PREFIX)-italic.ttf $(OBJDIR)/$(PREFIX)-mediumitalic.ttf $(OBJDIR)/$(PREFIX)-bolditalic.ttf $(OBJDIR)/$(PREFIX)-heavyitalic.ttf -EXTUPRG = -EXTITAL = -OUTPUTS = $(UPRIGHT) $(ITALIC) -TARGETS = $(UPRIGHT) $(ITALIC) $(EXTUPRG) $(EXTITAL) +OBLIQUE = $(OBJDIR)/$(PREFIX)-thinoblique.ttf $(OBJDIR)/$(PREFIX)-extralightoblique.ttf $(OBJDIR)/$(PREFIX)-lightoblique.ttf $(OBJDIR)/$(PREFIX)-oblique.ttf $(OBJDIR)/$(PREFIX)-mediumoblique.ttf $(OBJDIR)/$(PREFIX)-boldoblique.ttf $(OBJDIR)/$(PREFIX)-heavyoblique.ttf +TARGETS = $(UPRIGHT) $(ITALIC) $(OBLIQUE) MAPS = $(subst .ttf,.charmap,$(TARGETS)) @@ -32,57 +30,66 @@ FDTS = $(subst .ttf,.fdt,$(subst $(OBJDIR)/,$(OBJDIR)/.pass0-,$(TARGETS))) SVG0 = $(subst .ttf,.svg,$(subst $(OBJDIR)/,$(OBJDIR)/.pass0-,$(TARGETS))) ABFEAT = $(subst .ttf,.ab.fea,$(subst $(OBJDIR)/,$(OBJDIR)/.pass0-,$(TARGETS))) -FEATURE = $(subst .ttf,.fea,$(subst $(OBJDIR)/,$(OBJDIR)/.pass0-,$(UPRIGHT) $(EXTUPRG))) -FEATITA = $(subst .ttf,.fea,$(subst $(OBJDIR)/,$(OBJDIR)/.pass0-,$(ITALIC) $(EXTITAL))) +FEATURE = $(subst .ttf,.fea,$(subst $(OBJDIR)/,$(OBJDIR)/.pass0-,$(UPRIGHT) $(OBLIQUE))) +FEATITA = $(subst .ttf,.fea,$(subst $(OBJDIR)/,$(OBJDIR)/.pass0-,$(ITALIC))) PASS1 = $(subst $(OBJDIR)/,$(OBJDIR)/.pass0-,$(TARGETS)) PASS1 = $(subst $(OBJDIR)/,$(OBJDIR)/.pass1-,$(TARGETS)) PASS2 = $(subst $(OBJDIR)/,$(OBJDIR)/.pass2-,$(TARGETS)) PASS3 = $(subst $(OBJDIR)/,$(OBJDIR)/.pass3-,$(TARGETS)) PASS4 = $(subst $(OBJDIR)/,$(OBJDIR)/.pass4-,$(TARGETS)) -fonts : $(OUTPUTS) +fonts : $(TARGETS) -OUTPUT_FDTS = $(subst .ttf,.fdt,$(subst $(OBJDIR)/,$(OBJDIR)/.pass0-,$(OUTPUTS))) -OUTPUT_SVG0 = $(subst .ttf,.svg,$(subst $(OBJDIR)/,$(OBJDIR)/.pass0-,$(OUTPUTS))) - -fdts : $(OUTPUT_FDTS) -svgs : $(OUTPUT_SVG0) +fdts : $(FDTS) +svgs : $(SVG0) # Pass 0 : file construction $(OBJDIR)/.pass0-$(PREFIX)-thin.fdt : $(SCRIPTS) | $(OBJDIR) $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-thin s-upright $(STYLE_UPRIGHT) $(STYLE_SUFFIX) -$(OBJDIR)/.pass0-$(PREFIX)-thinitalic.fdt : $(SCRIPTS) | $(OBJDIR) - $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-thin s-italic $(STYLE_UPRIGHT) $(STYLE_SUFFIX) $(OBJDIR)/.pass0-$(PREFIX)-extralight.fdt : $(SCRIPTS) | $(OBJDIR) $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-extralight s-upright $(STYLE_UPRIGHT) $(STYLE_SUFFIX) -$(OBJDIR)/.pass0-$(PREFIX)-extralightitalic.fdt : $(SCRIPTS) | $(OBJDIR) - $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-extralight s-italic $(STYLE_UPRIGHT) $(STYLE_SUFFIX) $(OBJDIR)/.pass0-$(PREFIX)-light.fdt : $(SCRIPTS) | $(OBJDIR) $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-light s-upright $(STYLE_UPRIGHT) $(STYLE_SUFFIX) -$(OBJDIR)/.pass0-$(PREFIX)-lightitalic.fdt : $(SCRIPTS) | $(OBJDIR) - $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-light s-italic $(STYLE_UPRIGHT) $(STYLE_SUFFIX) $(OBJDIR)/.pass0-$(PREFIX)-regular.fdt : $(SCRIPTS) | $(OBJDIR) $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-book s-upright $(STYLE_UPRIGHT) $(STYLE_SUFFIX) -$(OBJDIR)/.pass0-$(PREFIX)-italic.fdt : $(SCRIPTS) | $(OBJDIR) - $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-book s-italic $(STYLE_ITALIC) $(STYLE_SUFFIX) $(OBJDIR)/.pass0-$(PREFIX)-medium.fdt : $(SCRIPTS) | $(OBJDIR) $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-medium s-upright $(STYLE_UPRIGHT) $(STYLE_SUFFIX) -$(OBJDIR)/.pass0-$(PREFIX)-mediumitalic.fdt : $(SCRIPTS) | $(OBJDIR) - $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-medium s-italic $(STYLE_ITALIC) $(STYLE_SUFFIX) $(OBJDIR)/.pass0-$(PREFIX)-bold.fdt : $(SCRIPTS) | $(OBJDIR) $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-bold s-upright $(STYLE_UPRIGHT) $(STYLE_SUFFIX) -$(OBJDIR)/.pass0-$(PREFIX)-bolditalic.fdt : $(SCRIPTS) | $(OBJDIR) - $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-bold s-italic $(STYLE_ITALIC) $(STYLE_SUFFIX) -#$(OBJDIR)/.pass0-$(PREFIX)-extrabold.fdt : $(SCRIPTS) | $(OBJDIR) -# $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-extrabold s-upright $(STYLE_UPRIGHT) $(STYLE_SUFFIX) -#$(OBJDIR)/.pass0-$(PREFIX)-extrabolditalic.fdt : $(SCRIPTS) | $(OBJDIR) -# $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-extrabold s-italic $(STYLE_ITALIC) $(STYLE_SUFFIX) $(OBJDIR)/.pass0-$(PREFIX)-heavy.fdt : $(SCRIPTS) | $(OBJDIR) $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-heavy s-upright $(STYLE_UPRIGHT) $(STYLE_SUFFIX) + +$(OBJDIR)/.pass0-$(PREFIX)-thinitalic.fdt : $(SCRIPTS) | $(OBJDIR) + $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-thin s-italic $(STYLE_UPRIGHT) $(STYLE_SUFFIX) +$(OBJDIR)/.pass0-$(PREFIX)-extralightitalic.fdt : $(SCRIPTS) | $(OBJDIR) + $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-extralight s-italic $(STYLE_UPRIGHT) $(STYLE_SUFFIX) +$(OBJDIR)/.pass0-$(PREFIX)-lightitalic.fdt : $(SCRIPTS) | $(OBJDIR) + $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-light s-italic $(STYLE_UPRIGHT) $(STYLE_SUFFIX) +$(OBJDIR)/.pass0-$(PREFIX)-italic.fdt : $(SCRIPTS) | $(OBJDIR) + $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-book s-italic $(STYLE_ITALIC) $(STYLE_SUFFIX) +$(OBJDIR)/.pass0-$(PREFIX)-mediumitalic.fdt : $(SCRIPTS) | $(OBJDIR) + $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-medium s-italic $(STYLE_ITALIC) $(STYLE_SUFFIX) +$(OBJDIR)/.pass0-$(PREFIX)-bolditalic.fdt : $(SCRIPTS) | $(OBJDIR) + $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-bold s-italic $(STYLE_ITALIC) $(STYLE_SUFFIX) $(OBJDIR)/.pass0-$(PREFIX)-heavyitalic.fdt : $(SCRIPTS) | $(OBJDIR) $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-heavy s-italic $(STYLE_ITALIC) $(STYLE_SUFFIX) +$(OBJDIR)/.pass0-$(PREFIX)-thinoblique.fdt : $(SCRIPTS) | $(OBJDIR) + $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-thin s-oblique $(STYLE_UPRIGHT) $(STYLE_SUFFIX) +$(OBJDIR)/.pass0-$(PREFIX)-extralightoblique.fdt : $(SCRIPTS) | $(OBJDIR) + $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-extralight s-oblique $(STYLE_UPRIGHT) $(STYLE_SUFFIX) +$(OBJDIR)/.pass0-$(PREFIX)-lightoblique.fdt : $(SCRIPTS) | $(OBJDIR) + $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-light s-oblique $(STYLE_UPRIGHT) $(STYLE_SUFFIX) +$(OBJDIR)/.pass0-$(PREFIX)-oblique.fdt : $(SCRIPTS) | $(OBJDIR) + $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-book s-oblique $(STYLE_oblique) $(STYLE_SUFFIX) +$(OBJDIR)/.pass0-$(PREFIX)-mediumoblique.fdt : $(SCRIPTS) | $(OBJDIR) + $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-medium s-oblique $(STYLE_oblique) $(STYLE_SUFFIX) +$(OBJDIR)/.pass0-$(PREFIX)-boldoblique.fdt : $(SCRIPTS) | $(OBJDIR) + $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-bold s-oblique $(STYLE_oblique) $(STYLE_SUFFIX) +$(OBJDIR)/.pass0-$(PREFIX)-heavyoblique.fdt : $(SCRIPTS) | $(OBJDIR) + $(NODE_FDT) generate -o $@ iosevka $(STYLE_COMMON) w-heavy s-oblique $(STYLE_oblique) $(STYLE_SUFFIX) + $(SVG0) : $(OBJDIR)/.pass0-%.svg : $(OBJDIR)/.pass0-%.fdt $(NODE) extract --uprightify 1 --svg $@ $< $(ABFEAT) : $(OBJDIR)/.pass0-%.ab.fea : $(OBJDIR)/.pass0-%.fdt @@ -97,7 +104,7 @@ $(FEATITA) : $(OBJDIR)/.pass0-%.fea : $(OBJDIR)/.pass0-%.ab.fea features/common. # Pass 1 : Outline cleanup and merge $(PASS1) : $(OBJDIR)/.pass1-%.ttf : pass1-cleanup.py $(OBJDIR)/.pass0-%.svg - fontforge -quiet -script $^ $@ $(if $(findstring italic,$@),10,0) $(FAST) $(SUPPRESS_ERRORS) + fontforge -quiet -script $^ $@ $(if $(findstring italic,$@),10,$(if $(findstring oblique,$@),10,0)) $(FAST) $(SUPPRESS_ERRORS) $(PASS2) : $(OBJDIR)/.pass2-%.ttf : pass2-smartround.js $(OBJDIR)/.pass1-%.ttf $(OBJDIR)/.pass0-%.fdt $(NODE) $^ -o $@ --upm $(TARGETUPM) $(PASS3) : $(OBJDIR)/.pass3-%.ttf : pass3-features.py $(OBJDIR)/.pass2-%.ttf $(OBJDIR)/.pass0-%.fea @@ -117,12 +124,12 @@ $(OBJDIR) : RELEASEDIR = releases ARCHIVEDIR = release-archives -RELEASES = $(subst $(OBJDIR)/,$(RELEASEDIR)/,$(OUTPUTS)) +RELEASES = $(subst $(OBJDIR)/,$(RELEASEDIR)/,$(TARGETS)) $(RELEASES) : $(RELEASEDIR)/%.ttf : $(OBJDIR)/%.ttf cp $< $@ PAGEDIR = pages/assets -PAGESTTF = $(subst $(OBJDIR)/,$(PAGEDIR)/,$(OUTPUTS)) +PAGESTTF = $(subst $(OBJDIR)/,$(PAGEDIR)/,$(TARGETS)) $(PAGESTTF) : $(PAGEDIR)/%.ttf : $(OBJDIR)/%.ttf cp $< $@ PAGESWOFF = $(subst .ttf,.woff,$(PAGESTTF)) @@ -132,9 +139,9 @@ PAGESMAPS = $(subst $(OBJDIR)/,$(PAGEDIR)/,$(MAPS)) $(PAGESMAPS) : $(PAGEDIR)/%.charmap : $(OBJDIR)/%.charmap cp $< $@ -$(ARCHIVEDIR)/$(ARCPREFIX)$(ARCPREFIXB)-$(VERSION).tar.bz2 : $(OUTPUTS) +$(ARCHIVEDIR)/$(ARCPREFIX)$(ARCPREFIXB)-$(VERSION).tar.bz2 : $(TARGETS) cd $(OBJDIR) && tar -cjvf ../$@ $(subst $(OBJDIR)/,,$^) -$(ARCHIVEDIR)/$(ARCPREFIX)$(ARCPREFIXB)-$(VERSION).zip : $(OUTPUTS) +$(ARCHIVEDIR)/$(ARCPREFIX)$(ARCPREFIXB)-$(VERSION).zip : $(TARGETS) cd $(OBJDIR) && 7z a -tzip ../$@ $(subst $(OBJDIR)/,,$^) archives : $(ARCHIVEDIR)/$(ARCPREFIX)$(ARCPREFIXB)-$(VERSION).tar.bz2 $(ARCHIVEDIR)/$(ARCPREFIX)$(ARCPREFIXB)-$(VERSION).zip @@ -143,13 +150,13 @@ release : $(RELEASES) archives pages # testdrive TESTDIR = testdrive/assets -TESTTTF = $(subst $(OBJDIR)/,$(TESTDIR)/,$(OUTPUTS)) +TESTTTF = $(subst $(OBJDIR)/,$(TESTDIR)/,$(TARGETS)) $(TESTTTF) : $(TESTDIR)/%.ttf : $(OBJDIR)/%.ttf cp $< $@ TESTWOFF = $(subst .ttf,.woff,$(TESTTTF)) $(TESTWOFF) : $(TESTDIR)/%.woff : $(TESTDIR)/%.ttf sfnt2woff $< -OUTMAPS = $(subst .ttf,.charmap,$(OUTPUTS)) +OUTMAPS = $(subst .ttf,.charmap,$(TARGETS)) TESTMAPS = $(subst $(OBJDIR)/,$(TESTDIR)/,$(OUTMAPS)) $(TESTMAPS) : $(TESTDIR)/%.charmap : $(OBJDIR)/%.charmap cp $< $@ diff --git a/parameters.toml b/parameters.toml index 278143d26..8bf91df53 100644 --- a/parameters.toml +++ b/parameters.toml @@ -192,6 +192,14 @@ jhook = 120 [s-italic.adds] style = " Italic" +[s-oblique] +isItalic = false +slantAngle = 10 +jhook = 120 + +[s-oblique.adds] +style = " Oblique" + # Slab variant [slab] slab = true diff --git a/testdrive/fonts.css b/testdrive/fonts.css index 4c76b0f4d..d0e7d6af8 100644 --- a/testdrive/fonts.css +++ b/testdrive/fonts.css @@ -9,6 +9,12 @@ font-style: italic; src: url('assets/iosevka-thinitalic.woff') format('woff'), url('assets/iosevka-thinitalic.ttf') format('truetype'); } +@font-face { + font-family: IosevkaWEB; + font-weight: 100; + font-style: oblique; + src: url('assets/iosevka-thinoblique.woff') format('woff'), url('assets/iosevka-thinoblique.ttf') format('truetype'); +} @font-face { font-family: IosevkaWEB; font-weight: 200; @@ -20,6 +26,12 @@ font-style: italic; src: url('assets/iosevka-extralightitalic.woff') format('woff'), url('assets/iosevka-extralightitalic.ttf') format('truetype'); } +@font-face { + font-family: IosevkaWEB; + font-weight: 200; + font-style: oblique; + src: url('assets/iosevka-extralightoblique.woff') format('woff'), url('assets/iosevka-extralightoblique.ttf') format('truetype'); +} @font-face { font-family: IosevkaWEB; font-weight: 300; @@ -31,6 +43,12 @@ font-style: italic; src: url('assets/iosevka-lightitalic.woff') format('woff'), url('assets/iosevka-lightitalic.ttf') format('truetype'); } +@font-face { + font-family: IosevkaWEB; + font-weight: 300; + font-style: oblique; + src: url('assets/iosevka-lightoblique.woff') format('woff'), url('assets/iosevka-lightoblique.ttf') format('truetype'); +} @font-face { font-family: IosevkaWEB; src: url('assets/iosevka-regular.woff') format('woff'), url('assets/iosevka-regular.ttf') format('truetype'); @@ -40,6 +58,11 @@ font-style: italic; src: url('assets/iosevka-italic.woff') format('woff'), url('assets/iosevka-italic.ttf') format('truetype'); } +@font-face { + font-family: IosevkaWEB; + font-style: oblique; + src: url('assets/iosevka-oblique.woff') format('woff'), url('assets/iosevka-oblique.ttf') format('truetype'); +} @font-face { font-family: IosevkaWEB; font-weight: 500; @@ -51,6 +74,12 @@ font-weight: 500; src: url('assets/iosevka-mediumitalic.woff') format('woff'), url('assets/iosevka-mediumitalic.ttf') format('truetype'); } +@font-face { + font-family: IosevkaWEB; + font-style: oblique; + font-weight: 500; + src: url('assets/iosevka-mediumoblique.woff') format('woff'), url('assets/iosevka-mediumoblique.ttf') format('truetype'); +} @font-face { font-family: IosevkaWEB; font-weight: 700; @@ -62,19 +91,12 @@ font-weight: 700; src: url('assets/iosevka-bolditalic.woff') format('woff'), url('assets/iosevka-bolditalic.ttf') format('truetype'); } -/* @font-face { font-family: IosevkaWEB; - font-weight: 800; - src: url('assets/iosevka-extrabold.woff') format('woff'), url('assets/iosevka-extrabold.ttf') format('truetype'); + font-style: oblique; + font-weight: 700; + src: url('assets/iosevka-boldoblique.woff') format('woff'), url('assets/iosevka-boldoblique.ttf') format('truetype'); } -@font-face { - font-family: IosevkaWEB; - font-style: italic; - font-weight: 800; - src: url('assets/iosevka-extrabolditalic.woff') format('woff'), url('assets/iosevka-extrabolditalic.ttf') format('truetype'); -} -*/ @font-face { font-family: IosevkaWEB; font-weight: 900; @@ -86,6 +108,12 @@ font-weight: 900; src: url('assets/iosevka-heavyitalic.woff') format('woff'), url('assets/iosevka-heavyitalic.ttf') format('truetype'); } +@font-face { + font-family: IosevkaWEB; + font-style: oblique; + font-weight: 900; + src: url('assets/iosevka-heavyoblique.woff') format('woff'), url('assets/iosevka-heavyoblique.ttf') format('truetype'); +} @font-face { font-family: IosevkaSlabWEB; font-weight: 100; @@ -97,6 +125,12 @@ font-style: italic; src: url('assets/iosevka-slab-thinitalic.woff') format('woff'), url('assets/iosevka-slab-thinitalic.ttf') format('truetype'); } +@font-face { + font-family: IosevkaSlabWEB; + font-weight: 100; + font-style: oblique; + src: url('assets/iosevka-slab-thinoblique.woff') format('woff'), url('assets/iosevka-slab-thinoblique.ttf') format('truetype'); +} @font-face { font-family: IosevkaSlabWEB; font-weight: 200; @@ -108,6 +142,12 @@ font-style: italic; src: url('assets/iosevka-slab-extralightitalic.woff') format('woff'), url('assets/iosevka-slab-extralightitalic.ttf') format('truetype'); } +@font-face { + font-family: IosevkaSlabWEB; + font-weight: 200; + font-style: oblique; + src: url('assets/iosevka-slab-extralightoblique.woff') format('woff'), url('assets/iosevka-slab-extralightoblique.ttf') format('truetype'); +} @font-face { font-family: IosevkaSlabWEB; font-weight: 300; @@ -119,6 +159,12 @@ font-style: italic; src: url('assets/iosevka-slab-lightitalic.woff') format('woff'), url('assets/iosevka-slab-lightitalic.ttf') format('truetype'); } +@font-face { + font-family: IosevkaSlabWEB; + font-weight: 300; + font-style: oblique; + src: url('assets/iosevka-slab-lightoblique.woff') format('woff'), url('assets/iosevka-slab-lightoblique.ttf') format('truetype'); +} @font-face { font-family: IosevkaSlabWEB; src: url('assets/iosevka-slab-regular.woff') format('woff'), url('assets/iosevka-slab-regular.ttf') format('truetype'); @@ -128,6 +174,11 @@ font-style: italic; src: url('assets/iosevka-slab-italic.woff') format('woff'), url('assets/iosevka-slab-italic.ttf') format('truetype'); } +@font-face { + font-family: IosevkaSlabWEB; + font-style: oblique; + src: url('assets/iosevka-slab-oblique.woff') format('woff'), url('assets/iosevka-slab-oblique.ttf') format('truetype'); +} @font-face { font-family: IosevkaSlabWEB; font-weight: 500; @@ -139,32 +190,29 @@ font-weight: 500; src: url('assets/iosevka-slab-mediumitalic.woff') format('woff'), url('assets/iosevka-slab-mediumitalic.ttf') format('truetype'); } +@font-face { + font-family: IosevkaSlabWEB; + font-style: oblique; + font-weight: 500; + src: url('assets/iosevka-slab-mediumoblique.woff') format('woff'), url('assets/iosevka-slab-mediumoblique.ttf') format('truetype'); +} @font-face { font-family: IosevkaSlabWEB; font-weight: 700; src: url('assets/iosevka-slab-bold.woff') format('woff'), url('assets/iosevka-slab-bold.ttf') format('truetype'); } - @font-face { font-family: IosevkaSlabWEB; font-style: italic; font-weight: 700; src: url('assets/iosevka-slab-bolditalic.woff') format('woff'), url('assets/iosevka-slab-bolditalic.ttf') format('truetype'); } -/* @font-face { font-family: IosevkaSlabWEB; - font-weight: 800; - src: url('assets/iosevka-slab-extrabold.woff') format('woff'), url('assets/iosevka-slab-extrabold.ttf') format('truetype'); + font-style: oblique; + font-weight: 700; + src: url('assets/iosevka-slab-boldoblique.woff') format('woff'), url('assets/iosevka-slab-boldoblique.ttf') format('truetype'); } - -@font-face { - font-family: IosevkaSlabWEB; - font-style: italic; - font-weight: 800; - src: url('assets/iosevka-slab-extrabolditalic.woff') format('woff'), url('assets/iosevka-slab-extrabolditalic.ttf') format('truetype'); -} -*/ @font-face { font-family: IosevkaSlabWEB; font-weight: 900; @@ -176,6 +224,12 @@ font-weight: 900; src: url('assets/iosevka-slab-heavyitalic.woff') format('woff'), url('assets/iosevka-slab-heavyitalic.ttf') format('truetype'); } +@font-face { + font-family: IosevkaSlabWEB; + font-style: oblique; + font-weight: 900; + src: url('assets/iosevka-slab-heavyoblique.woff') format('woff'), url('assets/iosevka-slab-heavyoblique.ttf') format('truetype'); +} .thin { font-weight: 100 } .extralight { font-weight: 200 } @@ -185,4 +239,5 @@ .extrabold { font-weight: 800 } .heavy { font-weight: 900 } .italic { font-style: italic } +.oblique { font-style: oblique } .slab { font-family: "IosevkaSlabWEB", monospace } \ No newline at end of file diff --git a/testdrive/index.html b/testdrive/index.html index 03174ad52..a0ad4c0c8 100644 --- a/testdrive/index.html +++ b/testdrive/index.html @@ -130,24 +130,32 @@ right: 0; top: 4rem; background: #ddd; - font-size: 1.25rem; } #picker:hover .menu{ display: block; } - #picker:hover .menu .group { + #picker .menu .group { display: flex; } - #picker:hover .menu .group a { + #picker .menu .group a { display: block; padding: 0.5rem; flex: 1; min-width: 10rem; background: #eee; text-shadow: none; - font-size: 0.8em; + font-size: 1rem; } - #picker:hover .menu .group a:hover { + #picker .menu .group a.italic, #picker .menu .group a.oblique { + flex: 2 + } + #picker .menu .group a.slab { + flex: 5 + } + #picker .menu .group a.slab.italic, #picker .menu .group a.slab.oblique { + flex: 7 + } + #picker .menu .group a:hover { background: #ddd; } #picker .title { @@ -181,7 +189,7 @@
- {{current.display}} Specimen + Iosevka {{current.display}} Specimen
{{item.display}} @@ -209,20 +217,34 @@ } var BLOCKSIZE = 16 * 4; var fonts = [ - [ {name: 'iosevka-thin', cls: 'thin', display: 'Iosevka Thin'}, {name: 'iosevka-slab-thin', cls: 'slab thin', display: 'Iosevka Slab Thin'}, - {name: 'iosevka-thinitalic', cls:'thin italic', display: 'Iosevka Thin Italic'}, {name: 'iosevka-slab-thinitalic', cls:'slab thin italic', display: 'Iosevka Slab Thin Italic'} ], - [ {name: 'iosevka-extralight', cls: 'extralight', display: 'Iosevka Extralight'}, {name: 'iosevka-slab-extralight', cls: 'slab extralight', display: 'Iosevka Slab Extralight'}, - {name: 'iosevka-extralightitalic', cls:'extralight italic', display: 'Iosevka Extralight Italic'}, {name: 'iosevka-slab-extralightitalic', cls:'slab extralight italic', display: 'Iosevka Slab Extralight Italic'} ], - [ {name: 'iosevka-light', cls: 'light', display: 'Iosevka Light'}, {name: 'iosevka-slab-light', cls: 'slab light', display: 'Iosevka Slab Light'}, - {name: 'iosevka-lightitalic', cls:'light italic', display: 'Iosevka Light Italic'}, {name: 'iosevka-slab-lightitalic', cls:'slab light italic', display: 'Iosevka Slab Light Italic'} ], - [ {name: 'iosevka-regular', cls: '', display: 'Iosevka'}, {name: 'iosevka-slab-regular', cls: 'slab', display: 'Iosevka Slab'}, - {name: 'iosevka-italic', cls:'italic', display: 'Iosevka Italic'}, {name: 'iosevka-slab-italic', cls:'slab italic', display: 'Iosevka Slab Italic'} ], - [ {name: 'iosevka-medium', cls: 'medium', display: 'Iosevka Medium'}, {name: 'iosevka-slab-medium', cls: 'slab medium', display: 'Iosevka Slab Medium'}, - {name: 'iosevkamediumitalic', cls:'medium italic', display: 'Iosevka Medium Italic'}, {name: 'iosevka-slab-mediumitalic', cls:'slab medium italic', display: 'Iosevka Slab Medium Italic'} ], - [ {name: 'iosevka-bold', cls: 'bold', display: 'Iosevka Bold'}, {name: 'iosevka-slab-bold', cls: 'slab bold', display: 'Iosevka Slab Bold'}, - {name: 'iosevka-bolditalic', cls:'bold italic', display: 'Iosevka Bold Italic'}, {name: 'iosevka-slab-bolditalic', cls:'slab bold italic', display: 'Iosevka Slab Bold Italic'} ], - [ {name: 'iosevka-heavy', cls: 'heavy', display: 'Iosevka Heavy'}, {name: 'iosevka-slab-heavy', cls: 'slab heavy', display: 'Iosevka Slab Heavy'}, - {name: 'iosevka-heavyitalic', cls:'heavy italic', display: 'Iosevka Heavy Italic'}, {name: 'iosevka-slab-heavyitalic', cls:'slab heavy italic', display: 'Iosevka Slab Heavy Italic'} ] + [ {name: 'iosevka-thin', cls: 'thin', display: 'Thin'}, {name: 'iosevka-slab-thin', cls: 'slab thin', display: 'Slab Thin'}, + {name: 'iosevka-thinitalic', cls:'thin italic', display: 'Thin Italic'}, {name: 'iosevka-slab-thinitalic', cls:'slab thin italic', display: 'Slab Thin Italic'}, + {name: 'iosevka-thinoblique', cls:'thin oblique', display: 'Thin Oblique'}, {name: 'iosevka-slab-thinoblique', cls:'slab thin oblique', display: 'Slab Thin Oblique'} + ], + [ {name: 'iosevka-extralight', cls: 'extralight', display: 'Extralight'}, {name: 'iosevka-slab-extralight', cls: 'slab extralight', display: 'Slab Extralight'}, + {name: 'iosevka-extralightitalic', cls:'extralight italic', display: 'Extralight Italic'}, {name: 'iosevka-slab-extralightitalic', cls:'slab extralight italic', display: 'Slab Extralight Italic'}, + {name: 'iosevka-extralightoblique', cls:'extralight oblique', display: 'Extralight Oblique'}, {name: 'iosevka-slab-extralightoblique', cls:'slab extralight oblique', display: 'Slab Extralight Oblique'} + ], + [ {name: 'iosevka-light', cls: 'light', display: 'Light'}, {name: 'iosevka-slab-light', cls: 'slab light', display: 'Slab Light'}, + {name: 'iosevka-lightitalic', cls:'light italic', display: 'Light Italic'}, {name: 'iosevka-slab-lightitalic', cls:'slab light italic', display: 'Slab Light Italic'}, + {name: 'iosevka-lightoblique', cls:'light oblique', display: 'Light Oblique'}, {name: 'iosevka-slab-lightoblique', cls:'slab light oblique', display: 'Slab Light Oblique'} + ], + [ {name: 'iosevka-regular', cls: '', display: 'Regular'}, {name: 'iosevka-slab-regular', cls: 'slab', display: 'Slab'}, + {name: 'iosevka-italic', cls:'italic', display: 'Italic'}, {name: 'iosevka-slab-italic', cls:'slab italic', display: 'Slab Italic'}, + {name: 'iosevka-oblique', cls:'oblique', display: 'Oblique'}, {name: 'iosevka-slab-oblique', cls:'slab oblique', display: 'Slab Oblique'} + ], + [ {name: 'iosevka-medium', cls: 'medium', display: 'Medium'}, {name: 'iosevka-slab-medium', cls: 'slab medium', display: 'Slab Medium'}, + {name: 'iosevkamediumitalic', cls:'medium italic', display: 'Medium Italic'}, {name: 'iosevka-slab-mediumitalic', cls:'slab medium italic', display: 'Slab Medium Italic'}, + {name: 'iosevkamediumoblique', cls:'medium oblique', display: 'Medium Oblique'}, {name: 'iosevka-slab-mediumoblique', cls:'slab medium oblique', display: 'Slab Medium Oblique'} + ], + [ {name: 'iosevka-bold', cls: 'bold', display: 'Bold'}, {name: 'iosevka-slab-bold', cls: 'slab bold', display: 'Slab Bold'}, + {name: 'iosevka-bolditalic', cls:'bold italic', display: 'Bold Italic'}, {name: 'iosevka-slab-bolditalic', cls:'slab bold italic', display: 'Slab Bold Italic'}, + {name: 'iosevka-boldoblique', cls:'bold oblique', display: 'Bold Oblique'}, {name: 'iosevka-slab-boldoblique', cls:'slab bold oblique', display: 'Slab Bold Oblique'} + ], + [ {name: 'iosevka-heavy', cls: 'heavy', display: 'Heavy'}, {name: 'iosevka-slab-heavy', cls: 'slab heavy', display: 'Slab Heavy'}, + {name: 'iosevka-heavyitalic', cls:'heavy italic', display: 'Heavy Italic'}, {name: 'iosevka-slab-heavyitalic', cls:'slab heavy italic', display: 'Slab Heavy Italic'}, + {name: 'iosevka-heavyoblique', cls:'heavy oblique', display: 'Heavy Oblique'}, {name: 'iosevka-slab-heavyoblique', cls:'slab heavy oblique', display: 'Slab Heavy Oblique'} + ] ]; var REGULAR = 3; var lipsums = ['Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper ipsum quam, at molestie libero euismod vitae. Etiam vehicula felis mi, et ultricies libero consequat at. Donec consequat, nunc id elementum tempor, lectus orci vulputate leo, eget lobortis lectus nulla sed orci. Donec in dolor non orci aliquet gravida. Nulla volutpat magna et nulla pretium, quis consequat nibh euismod. Suspendisse eget metus enim. Fusce vulputate scelerisque eros et consequat. Quisque dapibus accumsan augue, et semper lectus vehicula sit amet. Ut ornare venenatis tortor, non gravida tellus mattis interdum. In hac habitasse platea dictumst. Donec interdum commodo ex eu tincidunt. Curabitur non fermentum enim. Proin luctus orci ut commodo auctor. Pellentesque accumsan id sem eu semper. Sed non pharetra nibh. Vivamus mattis luctus arcu, a rutrum dui venenatis sit amet. aja ojo ojoined',