Tamaños de letras

cyber_dark · #1 (**permalink**) 11/05/2011, 22:35

Saludos, acuedo de nuevo a ustedes por unos problemas que eh estado teniendo, eh estado trabajando para mudar toda mi web de tablas a solo divs, todo iba bastante bien en mi navegador opera, hasta que decide ver como se veia en explorer y para mi gran decepción se veia muy mal, el problema era en los tamaños de los divs, pues muchas propiedades no me las aceptaba como el overflow, y lo peor era con versiones antiguas como IE6 asi que para hacerla toda bien eh estado pensando que lo mejor es que todo lo haga con tamaños exactos y no con % ni con propiedades que no son reconocidad por todos los navegadores.

Sin tanto rollo, mis dudas son, las letras en css se que pueden ser manejadas en px y no solo en pt, pero los px que tamaño afectan el largo o lo ancho por ejemplo si usara:

font-size: 8px;
font-family: Arial;

¿Que dimensiones tendrian las letras, tendrian 8px de ancho?, u 8px de alto?, u 8px de largo y ancho?

vgonga1986 · #2 (**permalink**) 12/05/2011, 02:37

Buenas,

La pregunta es sencilla: cuando usas font-size se refiere al alto siempre, ya que el ancho dependerá del tipo de letra que utilices, algunas son más anchas que otras.

De todas formas, es fácil de comprobar si no te fías:
HTML:

Código:

<html>
<head>
	<title>Test</title>
	<link rel="StyleSheet" type="text/css" href="style\test.css" />
</head>
<body>
	<span id="texto">Á</span><div id="derecha"></div>
	<div id="abajo"></div>
</body>
</html>

CSS:

Código HTML:

#texto {
	float: left;
	font-size: 20px;
	font-family: Arial;
}

#derecha {
	float: left;
	height: 20px;
	width: 200px;
	background-color: blue;
}

#abajo {
	clear: both;
	height: 200px;
	width: 20px;
	background-color: red;
}

Esto crea una letra Á (el acento lo añado porque las letras normales dejan también sitio por arriba para los símbolos de acentuación) de 20px, un div a la derecha de 20px de alto y un div abajo de 20px de ancho. Verás que la letra coincide con el div de la derecha, luego font-size afecta al alto siempre.

Pero ten cuidado con estos cálculos, porque si es verdad que las fuentes suelen dejar espacio vacío por arriba, por abajo no lo hacen. Si sustituyes la 'Á' por una 'y', por ejemplo, verás que la parte de abajo de la letra se sale de los 20px de tamaño.

Espero que te sirva y, como consejo, siempre intenta hacer pruebas sencillitas, muchas veces es muy útil sacar el trozo de código que quieras a un HTML nuevo y probar, así evitas que los demás elementos afecten.

Un saludo.