Variação do tamanho da fonte em mobiles diferente

[rikaschmitt 54]

 

Estou tendo dificuldades em deixar um padrão nas fontes do meu site mobile.

Já usei "em", usei "px".. e sempre dá variação de tamanho entre celulares diferentes..

 

No meu iPhone, o site fica bom.. mas testei em outros 2 (androids) e zua a fonte, como na imagem acima.

 

Alguém tem uma sugestão?

[ignoredxyz 17]

Se for uma fonte importanda (usando @font-face) o problema pode estar na incompatibilidade da fonte com o navegador, sendo assim, ele usa a fonte padrão.

[rikaschmitt 54]

Se for uma fonte importanda (usando @font-face) o problema pode estar na incompatibilidade da fonte com o navegador, sendo assim, ele usa a fonte padrão.

Hm... pode ser.

Mas eu usei o @font-face e coloquei várias extensões da font (ttf, svg, woff, etc), creio que alguma delas funcione...

 

Li que talvez setar um "body { font-size:100%; }" ajude, vou testar depois.

 

 

Ainda com esse problema e não sei o que é.

 

No meu CSS, estou usando isso:

 

 

@font-face {   font-family: 'DIN-Light';  src: url('../fonts/DIN-Light.eot');  src: url('../fonts/DIN-Light.eot?#iefix') format('embedded-opentype'),       url('../fonts/DIN-Light.woff') format('woff'),       url('../fonts/DIN-Light.ttf') format('truetype'),       url('../fonts/DIN-Light.otf') format('opentype'),       url('../fonts/DIN-Light.svg') format('svg');  font-weight: normal;  font-style: normal;}@font-face {   font-family: 'DIN-Medium';  src: url('../fonts/DIN-Medium.eot');  src: url('../fonts/DIN-Medium.eot?#iefix') format('embedded-opentype'),       url('../fonts/DIN-Medium.woff') format('woff'),       url('../fonts/DIN-Medium.ttf') format('truetype'),       url('../fonts/DIN-Medium.svg') format('svg');  font-weight: normal;  font-style: normal;}@font-face {   font-family: 'DIN-Regular';  src: url('../fonts/DIN-Regular.eot');  src: url('../fonts/DIN-Regular.eot?#iefix') format('embedded-opentype'),       url('../fonts/DIN-Regular.woff') format('woff'),       url('../fonts/DIN-Regular.ttf') format('truetype'),       url('../fonts/DIN-Regular.svg') format('svg');  font-weight: normal;  font-style: normal;}@font-face {   font-family: 'OpenSans-Regular';  src: url('../fonts/OpenSans-Regular.ttf') format('truetype');  font-weight: normal;  font-style: normal;}@font-face {   font-family: 'OpenSans-Light';  src: url('../fonts/OpenSans-Light.ttf') format('truetype');  font-weight: normal;  font-style: normal;}

aparentemente está certo, neh?

[Douglas Julião 34]

Talvez o problema seja esse, você está chamando vários modelos da mesma monte, faça um teste com apenas uma chamada e defina poe weigth, talvez os mobiles busquem pela font mais relevante na hora de interpretar o código e carregue fontes maiores ou menores em lugares indesejados.

Se eu não me engano tem uma fonte chamada roboto que é bastante utilizada em mobile.

 

mas tente fazer isso, deixe o minimo de chamada dessas font-face.

[rikaschmitt 54]

Talvez o problema seja esse, você está chamando vários modelos da mesma monte, faça um teste com apenas uma chamada e defina poe weigth, talvez os mobiles busquem pela font mais relevante na hora de interpretar o código e carregue fontes maiores ou menores em lugares indesejados.

Se eu não me engano tem uma fonte chamada roboto que é bastante utilizada em mobile.

 

mas tente fazer isso, deixe o minimo de chamada dessas font-face.

Sim, a Roboto eu quase sempre utilizo, mas nesse site precisa ser essa DIN.

Vou verificar qual extensão é melhor..

 

valeu.

 

 

Então, não consegui identificar essa variação no tamanho da fonte. A fonte em sí funciona, pois ela é identificada.. só o tamanho dela que varia mesmo.

 

Nos iOS da vida, o site apresentou uma boa renderização.

Mas para os Androids, as fontes tiveram muita variação, dependendo do modelo do telefone.

 

O que eu tive que fazer é reduzir todas as fontes em até 5px... :\