Esa herramienta no es nueva. En verdad aquí no la recomendamos mucho porque da la falsa idea de que se pueden ajustar las medidas en
em desde el código fuente como si fueran absolutas. Y no es así.
Las medidas relativas dependen de la configuración del documento. En algún caso podemos (y sería lógico) asignar nuestras medidas en el estilo del
body y así arrastrar todas las medidas heredadas; pero acá se juegan otros temas, como la accesibilidad y la interpretación que le hagan los navegadores.
Por otro lado, creo que esa herramienta no toma en cuenta las familias de fuentes. La medida en pixeles de una no tiene que mostrar necesariamente el mismo tamaño en la otra.
Además de tener un bug del cual también se habló por aquí, cuando se le buscaba un uso práctico a la medición de caracteres.
Dejo un ejemplo comparando serif con monospace, y usando los mismos códigos, por supuesto.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
bo/dy {font-size: 100%; }
</style>
</head>
<body>
<h2><span style="color:yellow">█</span> : serif.
<span style="color:lime">█</span> : monospace.</h2>
<table>
<tbody>
<tr><td style="font-family:serif; font-size: 3em; background-color:yellow;
line-height:1.2em; width:5em; height:3em">
█
<div style="width:1em; height:1em; background-color:black; overflow:hidden"></div>
</td><td style="font-family:monospace; font-size: 3em;
background-color:lime; line-height:1.2em; width:5em; height:3em">
█
<div style="width:1em; height:1em; background-color:black; overflow:hidden"></div>
</td></tr>
<tr><td style="font-family:monospace; font-size: 3em;
background-color:lime; line-height:1.2em; width:5em; height:3em">
█
<div style="width:1em; height:1em; background-color:black; overflow:hidden"></div>
</td><td style="font-family:serif; font-size: 3em;
background-color:yellow; line-height:1.2em; width:5em; height:3em">
█
<div style="width:1em; height:1em; background-color:black; overflow:hidden"></div>
</td></tr>
</tbody></table></body>
</html> Aprovecho el mensaje y pongo algún enlace hacia las decenas de temas donde tratamos el asunto.
Saludos
furoya.
Sobre la medida em Confimación de fuente instalada.