Buenas tardes señores.
Estoy practicando con la regla @media print para darle un estilo específico al texto de un documento sólo cuando se imprima en papel.
Supongamos que tenemos un documento con varios párrafos con distintos tamaños de fuente, pero queremos que todo el documento se imprima en un solo tamaño, en 5px, para ahorrar toner. Hasta donde sé, el CSS sería así:
@media print {body {font-size:8px}}
Lo he puesto en px, cm, em, pero no funciona, ¿por qué? Les dejo todo el código fuente del documento. (Ya saben, no necesitan imprimir para ver el resultado, sólo hay que ver VISTA PRELIMINAR)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Versión para imprimir</title>
<style type="text/css">
#parrafo1 {font-size:20px;}
#parrafo2 {font-size:30px;}
#parrafo3 {font-size:40px;}
@media print { body {font-family:"Comic Sans MS", cursive; font-size:5px;}} <!-- Esta regla debería poner todo el texto que se encuentre dentro del BODY en 5px, pero sólo imprime en 5px el contenido de H1 del HTML-->
</style>
</head>
<body>
<div>
<h1>Este texto es un encabezado H1</h1>
<p id="parrafo1">Texto en 20 px</p>
<p id="parrafo2">Texto en 30 px</p>
</div>
<div>
<p id="parrafo3">Texto en 40 px</p>
</div>
</body>
</html>