Is it possible to set the font size dynamically?

Asked

Viewed 130 times

1

I’m having to develop some views, and frankly define my knowledge of CSS as structural.

I wonder if it is possible to create a method, without using Javascript, to set the font size to be used in the text dynamically.

Example:

<div class="text-20"> <!-- font-size : 20px; -->
</div>


<div class="text-25"> <!-- font-size : 25px; -->
</div>


<div class="text-15"> <!-- font-size : 15px; -->
</div>

I mean, basically the class would be .text and the -{num} corresponding to the font size.

css

  • Do you want it to work with any value, without setting the classes manually? It doesn’t. But you can generate CSS for a certain range of values. Or use steps that make sense in website design.

  • I understand, yes my intention was for any value, thank you the help, I will do by javascript even.

  • 1

    Why don’t you just use the inline style? <div style="font-size:20px"</div>?

2 answers

0

You can use the units of measures EM and REM that are based on the font size of your parent elements and main body element. The calculation of the units is done by dividing the font size you want to use (in px) divided by the font size of your parent element. Ex.: 16px/16px = 1em(or rem)

  • The IN: It is based on its parent element, follows the example

<div style="font-size: 32px">
  <p style="font-size: 1em">Exemplo em EM.</p> 
</div>

In this example, the paragraph will have the size of its parent element "div" which are 32px, the size of 1in will equal 32px.

  • REM: Based on its parent element, 'body'. By default this element has 16px. Follow another example below:

<body style="font-size: 50px">
  <div style="font-size: 32px">
    <p style="font-size: 1rem">Exemplo em REM.</p> 
  </div>
</body>

In the above example, the 'p' or 1rem equals 50px, influenced by the 'body' element'.

0

You have not demonstrated your real need, but why use the class to do this if you can also use the "style attribute" ?

<div style="font-size:20px"></div>


<div style="font-size:25px"></div>


<div style="font-size:15px"></div>

  • I don’t think this answers the question. He wants to specify a class with a number e.g texto-<?>, where<?> is the font size that should render the content of that element. For example: <p class='texto-10'>foo</p>, the word "foo" would have 10px. <p class='texto-100'>bar</p>, the word "bar" would have 100px... etc..

  • I understood what he wants, but since he didn’t give many details I didn’t understand why he wants it. People don’t always know what they really want. We are here to help and suggest. He could also use <div style="font-size:<?>px"></div> that would give in the same. I just did not understand the need to have to be a Class

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.