Highlighted

Dynamic Textfield path vs Text Input Component path in CSS.

Participant ,
Mar 18, 2019

Copy link to clipboard

Copied

I've decided to use my own fonts for my HTML5 Canvas project.

Using the CSS component I can apply my fonts to input text fields using the TextInput Component by:

          #myInputTextName{

          font-family: arialbold, sans-serif;

          font-style: normal;

          font-weight: 500;

          font-size: 24px;

          color: #222222;

          }

How can I do the same for a dynamic textfield (a textfield on the canvas)?

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Canvas text fields cannot be referenced by CSS like this as far as I can tell. Because they are not independent DOM elements.

This is not an Animate CC limitation only. It's a HTML/canvas limitation.

Your options are:

- Web fonts;

- Set the font family in the properties panel and use the @font-face I mentioned earlier;

- Use yourTextFieldInstane.font = "70px 'Times New Roman'".

Regards,

JC

.

TOPICS
Discussions

Views

270

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Dynamic Textfield path vs Text Input Component path in CSS.

Participant ,
Mar 18, 2019

Copy link to clipboard

Copied

I've decided to use my own fonts for my HTML5 Canvas project.

Using the CSS component I can apply my fonts to input text fields using the TextInput Component by:

          #myInputTextName{

          font-family: arialbold, sans-serif;

          font-style: normal;

          font-weight: 500;

          font-size: 24px;

          color: #222222;

          }

How can I do the same for a dynamic textfield (a textfield on the canvas)?

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Canvas text fields cannot be referenced by CSS like this as far as I can tell. Because they are not independent DOM elements.

This is not an Animate CC limitation only. It's a HTML/canvas limitation.

Your options are:

- Web fonts;

- Set the font family in the properties panel and use the @font-face I mentioned earlier;

- Use yourTextFieldInstane.font = "70px 'Times New Roman'".

Regards,

JC

.

TOPICS
Discussions

Views

271

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 18, 2019 0
Adobe Community Professional ,
Mar 18, 2019

Copy link to clipboard

Copied

Hi.

If the font you want is not available in the web fonts menu, use the @font-face rule.

CSS @font-face Rule

Like this:

@font-face

{

    font-family: 'EthnocentricRg-Regular';

    src: url("fonts/ethnocentric rg.ttf");

}

* The font family name that works for me is the one on the top of the window.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 18, 2019 0
Participant ,
Mar 18, 2019

Copy link to clipboard

Copied

I was actually just looking for the CSS path, for example

           canvas.myDynamicTextName{

          font-family: arialbold, sans-serif;

          font-style: normal;

          font-weight: 500;

          font-size: 24px;

          color: #222222;

          }

But of course canvas.myDynamicTextName is incorrect.

Again I am using the CSS component.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 18, 2019 0
Adobe Community Professional ,
Mar 18, 2019

Copy link to clipboard

Copied

Canvas text fields cannot be referenced by CSS like this as far as I can tell. Because they are not independent DOM elements.

This is not an Animate CC limitation only. It's a HTML/canvas limitation.

Your options are:

- Web fonts;

- Set the font family in the properties panel and use the @font-face I mentioned earlier;

- Use yourTextFieldInstane.font = "70px 'Times New Roman'".

Regards,

JC

.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 18, 2019 1