1

Estou tendo que desenvolver algumas views, e francamente definiria meu conhecimento de CSS como estrutural.

Gostaria de saber se é possível criar um método, sem utilização de Javascript, de definir o tamanho da fonte a ser usada no texto dinamicamente.

Exemplo:

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


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


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

Ou seja, basicamente a class seria .text e o -{num} correspondente ao tamanho da fonte.

3
  • Você quer que funcione com qualquer valor, sem definir as classes manualmente? Não dá. Mas você pode gerar o CSS para um determinado range de valores. Ou usar passos que façam sentido no design do site.
    – bfavaretto
    Commented 1/10/2015 às 20:02
  • Compreendo, sim meu intuito era para qualquer valor, obrigado o auxilio, farei por javascript mesmo. Commented 1/10/2015 às 20:09
  • 1
    Por que você não simplesmente usa o estilo inline? <div style="font-size:20px"</div>?
    – ndvo
    Commented 1/10/2015 às 23:35

2 Respostas 2

0

Você não demonstrou sua real necessidade, mas por que usar o class para fazer isso se você também pode usar o atributo "style" ?

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


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


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

2
  • Acho que isso não responde a pergunta. Ele quer especificar uma classe com um número e.g texto-<?>, onde<?> é o tamanho da fonte que deve renderizar o conteúdo esse elemento. Por exemplo: <p class='texto-10'>foo</p>, a palavra "foo" teria 10px. <p class='texto-100'>bar</p>, a palavra "bar" teria 100px... etc. Commented 2/10/2015 às 0:28
  • Eu entendi o que ele quer, mas como não deu muitos detalhes eu não entendi o porquê ele quer. Nem sempre as pessoas sabem oque realmente querem. Estamos aqui pra ajudar e sugerir. Ele também poderia usar <div style="font-size:<?>px"></div> que daria no mesmo. Só não entendi a necessidade de ter que ser uma Classe Commented 2/10/2015 às 1:18
0

Voce pode usar as unidades de medidas EM e REM que são baseadas no tamanho da font de seus elementos pais e elemento principal 'body'. O calculo das unidades é feito pela divisão do tamanho da fonte que deseja usar (em px) divido pelo tamanho da fonte de seu elemento pai. Ex.: 16px/16px = 1em(ou rem)

  • O EM: É baseado em seu elemento pai, segue o exemplo

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

Neste exemplo, o paragrafo terá o tamanho tamanho de seu elemento pai "div" que sao 32px, o tamanho de 1em ira equivaler a 32px.

  • REM: Baseado em seu elemento pai, 'body'. Por padrao este elemento tem 16px. Segue outro exemplo abaixo:

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

No exemplo acima, o 'p' o 1rem equivalera a 50px, influenciado do elemento 'body'.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .