CSS tamanho da fonte em CSS ficam maiores q deveriam

[ezequiel972]

Pessoal, boa noite!!

estou com um problema um pouco estranho do meu ponto de vista, estou montando um site para o negocio da familia, nada grande e bem simples. https://moreirasbuffet.com/

 

o problema e com o tamanho de algumas fontes na pagina, que na maioria dos pc fica bem configurado, mas quando visualizo o site em qualquer navegador no ubuntu, as fontes ficam maiores que deveriam fazendo o layout fica bagunçado.

 

ja testei em varios pcs e com varios OS e varios navegadores, so acontece com o Ubuntu.

 

 

Segue trecho do meu css q mais da problemas.

.coluna_rodape {
	height: 100%;
	width: 330px;
	background-color: #F2F2F2;
	position: relative;
	float: left;
	margin-right: 5px;
	margin-left: 5px;
	border-radius: 5px;
	margin-top: 20px;
}



.coluna_rodape #citacao {
	font-family: "Palace script MT";
	position: absolute;
	bottom: 20;
	text-align: center;
	font-size: 34px;   /* FONT_SIZE ERROR */
	padding-left: 10px;
	font-weight: bold;
}

 

[zopek]

@ezequiel972  Use %, isso faz a fonte se ajustar automaticamente a resolução do monitor. Outra dica é usar fontes San-serif, fica bem bonito. Eu não entendi isso:

bottom: 20; //?

 

[groutmoustache]

Não tenho certeza se o problema está em usar unidades relativas ou não.

 

No entanto, podemos tentar utilizar a unidade rem. Assim, você pode alterar o CSS para o seguinte:

/* Esse bloco de declarações deve ficar no topo do CSS */
html{
  	/* O tamanho padrão de fonte HTML é 16px.
  	Por isso, se configurarmos ela para 62.5% vamos obter 1rem = 10px */
	font-size: 62.5%;
}

.coluna_rodape #citacao{
	...
	font-size: 3.4rem; /* Se 1rem vale 10x, então 3.4rem valem 34px */
	...
}

Aqui, você pode entender como funciona essa abordagem que mostrei em CSS: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/