Looking for a font 5x5 and switched to a 4x5

Posted on
  • I remember it is possible to convert bitmaps into fonts.

    Has some been working on a 5x5 font module and like to share it?

  • Ok, this is the bitmap to font converter for Espruino

    http://ebfc.mattbrailsford.com/

    But no luck when searching for a 5x5 font as bmp or jpg file ....

  • There are many free ttf files and ttf to bmp converter that generate a useless output for the converter.

  • I think you need an image that's a tile of bitmaps.

    Also worth checking out http://www.espruino.com/Font+Converter for working from Web fonts, although it's only really tested with the Google fonts (PRs welcome ;).

    At some point, given it's 5x5 you may decide it's easier to make it yourself. It's actually not that painful:

    var fontBitmap = Graphics.createImage(`
    
    11111
    1   1
    1   1
    11111
    
    
    11111
    
    
    
    111 1 
    1 1 1
    1 1 1
    1 111
    
    1 1 1
    1 1 1
    1 1 1
    11111`.substr(1)).buffer;
    
    g.setFontCustom(fontBitmap, '0'.charCodeAt(), 5, 5);
    
    g.drawString("0123 3210");
    

    Once you have fontBitmap you can do btoa(fontBitmap) to get the base64 and can turn it into a font module

  • Thanks

    It is all about using the correct search string :)

    Search for 3x5 or. 4x5 will give some nice results for bmp files.

    eg this conversation https://graphicdesign.stackexchange.com/­questions/91478/a-font-thats-readable-wi­th-a-5px-height

  • It's actually not that painful

    here we go, first part 0 - Z

    exports.add = function(graphics) {
    
           graphics.prototype.setFont4x5 = function() {
    this.setFontCustom(atob("/H4EfAC9egrX4OE­+Dtbg/W4IQ+D9fg7X4AKAAKgAiogFKUAioghVAL1­UB9Hg/VQHRUD8XA/WoP0oB0Zg+T4AfAAQfA+TYPh­CD6Pg/B4HRcD9EAfNwP0WBNZAh+APh+DwfA+L4Nk­2DB8AnXIA"), '0', 4, 5);};
    };
    

    1 Attachment

    • Bildschirmfoto 2020-11-10 um 22.01.03.jpg
  • see attached code


    1 Attachment

  • Awesome, thanks! Do you think it's worth pulling that into the Fonts page?

  • Sure, I am already working on a Font4x5.js file for a pr :)

    Is there a possibility to skip chars with using createImage like lowercase chars?

  • ...looks like the uc Q's 'leg' is on the wrong side? ...and the I should have serifs to be distinct from the vertical / or - bar |

    (CH gets to precision, D goes all the way to perfection... haha - @MaBe, stay safe and have a nice late afternoon - m)

  • ... oh no ... Thanks!

    added some more chars so this is ' ' to '~'

    any wishes for 0x7f ?


    1 Attachment

    • Bildschirmfoto 2020-11-11 um 17.25.34.jpg
  • @allObjects have a great day and stay save too.

  • Is there a possibility to skip chars with using createImage like lowercase chars?

    Yes there is, I use '\n\n\n' for all unmapped chars

  • @allObjects just sharing the latest version so you can go for a nice C


    1 Attachment

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

Looking for a font 5x5 and switched to a 4x5

Posted by Avatar for MaBe @MaBe

Actions