Foros del Web » Creando para Internet » CSS »

Tamaños de letras

Estas en el tema de Tamaños de letras en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/05/2011, 23:35
 
Fecha de Ingreso: julio-2010
Mensajes: 158
Antigüedad: 7 años, 5 meses
Puntos: 3
Tamaños de letras

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?
  #2 (permalink)  
Antiguo 12/05/2011, 03:37
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años, 8 meses
Puntos: 252
Respuesta: Tamaños de letras

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.

Etiquetas: letras, tamaños
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:02.