adobe font similar to digital (for numbers)?

[nickx58900764]

I want to display the readings of a multimeter in HTML5 Canvas project. So I need a font which resembles the digital numbers shown in an actual multimeter or digital clock. Is there such an Adobe Font?

[nickx58900764]

I mean like the 7-segment display

[ClayUUID]

Yes, we know what you meant.

Why does it have to be an Adobe font? There are dozens of free LED/LCD display fonts.

[nickx58900764]

My project is an HTML5 Canvas one. I have read that I cannot use a custom font, like the one (7-segment) I have installed in my machine.

[JoãoCésar]

Hi.

In fact you can.

Please have a look at this answer:

HTML5 custom text embed in Animate CC

Regards,

JC

[nickx58900764]

Well I need a dynamic text because I want to be able to change the numerals with code. The html page will be fetched through the Internet for the general public, so the

CSS @font-face Rule

suggested here

HTML5 custom text embed in Animate CC

doesn't help either. The closest thing I have found is the "refridgerator deluxe" Adobe font, but it isn't what I wished. The next choice is to use bitmap(or vector) images for every digit I have found in Adobe Stock and change it with code but I guess this is not an optimal solution.

[JoãoCésar]

The CSS font-face rule is specially useful for cases where the final user may or may not have the font you wish to use installed on their devices or you don't have a web font version alternative.

Here is a sample where I show the current time using a font called LCD / LCD Mono Font that I've downloaded from dafont.com.

Custom Font Example

Regards,

JC

[nickx58900764]

Ok, I will try it!

[JoãoCésar]

Nice!

Please let me know if you find any issues.

[RaccoonAndRaptor]

Thank you for sharing this!!! This is what im looking for!

[ClayUUID · Accepted solution]

Since you're simulating a digital display, it wouldn't be too hard to break apart each digit into a vector shape, then put each digit image in a 10-frame movieclip (with this.stop(); in the first frame), line up however many instances of it you need for the number of digits you have, then to update have a bit of code that converts your number to a string, then iterates over the string and sets each movieclip to the appropriate frame number.

For example, if you had five digit-containing clips named, from right to left, d1, d2, d3, d4, d5, you could use this function to set them to display any positive integer:

var digitRoot = this;

function updateDigits(num) {

    var outDigits = 5; // number of digits in the faux digital display

    var inDigits = Math.floor(num).toString();

    var inDigLen = inDigits.length;

    for (var d = 1; d <= outDigits; d++) {

        digitRoot["d" + d].gotoAndStop(d <= inDigLen ? inDigits.charCodeAt(inDigLen - d) - 48 : 0);

    }

}

[JoãoCésar]

Just one thing.

I've edited the answer I've given in that thread because the font-family property value may be the one in the title of the dialog window or in the Font name field.

The rest should be the same.

[Subramaniam340515931fdl]

Thankyou