2

Oi, estou fazendo uso da fonte Raleway da CDN Google Fonts, porém os números parecem flutuantes, a serifa para as letras são boas, clean, mas para os números tem um aspecto "largado", pensei em usar outra fonte para os números mas o problema é que tenho mais de 500 páginas no projeto e poucas páginas são de conteúdo estático, pensei se existe algum modo de alterar a tipografia dos números através de alguma expressão regular em javascript, que reconhece números os números 123123 e insere uma tag <span class='fontNum'>123123</span> mas com algumas ressalvas.

Para números únicos: <span class='fontNum'>1</span>

Para números com mais de um dígito: <span class='fontNum'>1234</span>

Para um formato ex, CPF: <span class='fontNum'>111.111.111-00</span>

E não: <span class='fontNum'>111</span>.<span class='fontNum'>111</span>.<span class='fontNum'>111</span>-<span class='fontNum'>00</span>

Se puder me ajudarem com os três formatos farei os outros formatos baseando-se no último do CPF.

A alteração seria apenas estética na DOM, creio que com javascript a leitura dos robôs não teriam problemas em anexar as strings do modo que veio do banco de dados ou que estão inseridas no HTML estático, pois creio eu que os robôs lêem o HTML processado e não como ficou o código depois de todo javascript executado. Desse modo o HTML fica íntegro e os números alterados apenas na tela do usuário.

Se de fato os buscadores não lerem o código modificado na DOM pelo javascript, poderia ficar assim mesmo:

<span class='fontNum'>111</span>.<span class='fontNum'>111</span>.<span class='fontNum'>111</span>-<span class='fontNum'>00</span>

1 Resposta 1

3

Tem uma forma de corrigir isso apenas com CSS, não funciona com todas as Fonts, mas com a Raleway felizmente funciona por ela ser OpenType

lining-nums ativa o conjunto de figuras onde os números estão todos na linha de base. Corresponde aos valores OpenType lnum.

inserir a descrição da imagem aqui

Para corrigir isso vc vai precisa colocar a propriedade font-variant-numeric: lining-nums; no CSS do seu body. Dessa forma vc não precisa encapsular todas as strings de algarismos em uma tag e colocar outro css com outra fonte, vc pode "corrigir" a própria fonte original

Vc pode ler mais sobre essa propriedade aqui: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric

Código da imagem acima

body {
  font-family: 'Raleway', sans-serif;
  font-variant-numeric: lining-nums;
  font-size: 20px;
}
span {
  font-variant-numeric: initial;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<p>Fonte corrigida com font-variant-numeric</p>
1234567890
<br>
<br>
<i>Padrão original: </i><span>1234567890</span>

Suporte atual dos browsers a propriedade: https://caniuse.com/#feat=font-variant-numeric

inserir a descrição da imagem aqui

10
  • não funcionou, elas continuam "largadas/dançantes", não ficou alinhadas como a tipografia das letras, cliquei em executar no exemplo acima e também ficaram "largadas/dançantes".
    – ElvisP
    Commented 22/03/2019 às 13:53
  • @EliseuB. Cara não sei pq não funcionou ai não aqui no Snippet fica perfeito no Chrome, usando Windows. Testei no FireFox e tudo como o esperado tb... prntscr.com/n1h84u olha a imagem ai no link, print direto do site no FireFox
    – hugocsl
    Commented 22/03/2019 às 14:00
  • Eu estou fazendo uso do Firefox 66.0 e não funcionou, mas se tem um suporte mediano para o uso da variante não sei se é uma boa ideia. Fazer a manobra do javascript é custoso, provavelmente voltarei para a fonte Lato que acho bem borracha mas o cliente gosta.
    – ElvisP
    Commented 22/03/2019 às 14:03
  • *mediano não, até que é um suporte amplo, mas não sei o que houve e não funcionou, nem no seu exemplo.
    – ElvisP
    Commented 22/03/2019 às 14:06
  • 1
    🔥 a referência da propriedade no site da mozilla tá completão, ganhei o dia 🔥
    – ElvisP
    Commented 22/03/2019 às 14:41

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 .