js: Allow CSS to set the font used by the puzzle

This means that the calculated font properties of the HTML canvas now
control what font is used.  The size is overridden, and for monospaced
text so is the family.

I'd like to be able to also specify the monospaced font, maybe using a
CSS variable, but that looks like being quite a lot of extra complexity.

My experience when testing this was that constructing a valid "font"
string for a canvas context is prone to breakage, but broke in a way
that left the font unchanged, so we always set a simple specification
first before trying to construct one from CSS.
This commit is contained in:
Ben Harris
2022-12-05 14:02:59 +00:00
parent a3310ab857
commit 02f1d55a02
4 changed files with 38 additions and 22 deletions

View File

@ -305,6 +305,7 @@ main {
#puzzlecanvas {
display: block;
width: 100%;
/* This sets the font that will be used in the puzzle. */
font-family: sans-serif;
}