1

This is a tricky question:
Does CSS transition with fonts work with font-weight and font-family?
See for example:
https://www.cqrl.in/dev/font-transition.html

This is actually a Donald Knuth MetaFont question that will make Douglas Hofstadter smile!
Is there any hope of doing it through Canvas/SVG/SVG-font or some such thing?
If you think of them as curves it is topologically a simple homotopy deformation.

Sukii
  • 267
  • 2
  • 8
  • This could be worth looking into: https://opentype.js.org/ – Robby Cornelissen Jan 12 '21 at 09:24
  • The question is assuming you have the letter forms, how do we do the smooth transition from one form to another? – Sukii Jan 12 '21 at 10:59
  • Thanks Robby for pointing out the tremendous JavaScript work on openype font. – Sukii Jan 12 '21 at 11:01
  • For the transitions there's a couple of SVG/Canvas path tweening/morphing libraries out there that might help, but I don't have any experience with any of them myself. – Robby Cornelissen Jan 12 '21 at 11:21
  • Yes, I found one that is pretty interesting here: https://css-tricks.com/svg-shape-morphing-works/ – Sukii Jan 12 '21 at 11:37
  • It's all fun and games until you try to morph between two paths with a different number of vertices, which is likely to be the case when switching between font families (or even font weights). – Robby Cornelissen Jan 12 '21 at 11:44
  • You can always resample both the curves to provide equidistant points along the path of the curve (usually donated as "s"), assuming one can obtain the other by a simple homotopy transformation. – Sukii Jan 12 '21 at 18:12
  • https://en.wikipedia.org/wiki/Simple-homotopy_equivalence – Sukii Jan 12 '21 at 18:15
  • Raphael of course comes quite handy at handling SVG paths (https://dmitrybaranovskiy.github.io/raphael/) – Sukii Jan 13 '21 at 17:57
  • See Chapter 13: Metafont, Metamathematics, and Metaphysics: Comments on .Donald Knuth's Article "The Concept of a Meta-Font". in Douglas Hofstadter [Metamagical Themas](https://www.amazon.in/Metamagical-Themas-Douglas-Hofstadter/dp/0465045669) – Sukii Jan 17 '21 at 12:58

1 Answers1

2

Font transition solution using Javascript opentype.js and raphael.js library

Along with the hint given in https://css-tricks.com/svg-shape-morphing-works/
I was able to cook-up something that is preliminary here:
https://cqrl.in/dev/font-transition-js.html

Pushed the code to github: https://github.com/Sukii/font-transition

Sukii
  • 267
  • 2
  • 8
  • This preliminary solution only works for the case when the font glyph is topologically singe connected disc. – Sukii Jan 14 '21 at 06:41
  • 1
    Code has been updated to work for for characters with holes like O,Q,A, P, R etc. and also by fluke for B (which has two holes). – Sukii Jan 16 '21 at 11:24
  • It now also works for glyphs with two holes like B and g. – Sukii Jan 17 '21 at 12:22