384400/test.html

## test.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Visualisateur de glyphes</title>
<style>
    @font-face {
        font-family: 'My Sans Serif font';
        src: url('source/SourceSansPro-Regular.ttf') format('truetype');
    }
    @font-face {
        font-family: 'My Serif font';
        src: url('source/SourceSerifPro-Regular.ttf') format('truetype');
    }
    @font-face {
        font-family: 'My Monospace font';
        src: url('source/SourceCodePro-Regular.ttf') format('truetype');
    }
    html {
        font-family: 'My Sans Serif font';
    }
    body {
        font-size: 2em;
        margin: auto;
        width: 1024px;
    }
    .sans-serif {
        font-family: 'My Sans Serif Font';
    }
    .serif {
        font-family: 'My Serif Font';
    }
    .monospace {
        font-family: 'My Monospace Font';
    }
    ul.zoom li {
        background-color: #444;
        color: #fff;
        cursor: pointer;
        display: inline;
        font-family: 'Consolas', monospace;
        padding: 0.25em;
    }
    ul.zoom li:nth-child(1) {
        margin-right: 0.25em;
    }
    ul.zoom li:nth-child(2) {
        margin-left: 0.25em;
    }
</style>
</head>
<body>
    <h1>Visualisateur de glyphes</h1>
    <h2><em>Sans Serif</em> (sans empattements)</h2>
    <div class="sans-serif">
        <p>Dès Noël où un zéphyr haï me vêt de glaçons würmiens je dîne d&#x2019;exquis rôtis de bœuf au kir à l’aÿ d&#x2019;âge mûr & cætera !</p>
        <p>Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l&#x2019;alcôve ovoïde, où les bûches se consument dans l&#x2019;âtre, ce qui lui permet de penser à la cænogénèse de l&#x2019;être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.</p>
        <ul class="zoom">
            <li onclick="resizeText(1); return false;" title="agrandir le texte">A +</li>
            <li onclick="resizeText(-1); return false;" title="rétrécir le texte">A -</li>
        </ul>
    </div>
    <h2><em>Serif</em> (avec empattements)</h2>
    <div class="serif">
        <p>Dès Noël où un zéphyr haï me vêt de glaçons würmiens je dîne d&#x2019;exquis rôtis de bœuf au kir à l’aÿ d&#x2019;âge mûr & cætera !</p>
        <p>Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l&#x2019;alcôve ovoïde, où les bûches se consument dans l&#x2019;âtre, ce qui lui permet de penser à la cænogénèse de l&#x2019;être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.</p>
        <ul class="zoom">
            <li onclick="resizeText(1); return false;" title="agrandir le texte">A +</li>
            <li onclick="resizeText(-1); return false;" title="rétrécir le texte">A -</li>
        </ul>
    </div>
    <h2><em>Monospace</em> (à chasse fixe)</h2>
    <div class="monospace">
        <p>Dès Noël où un zéphyr haï me vêt de glaçons würmiens je dîne d&#x2019;exquis rôtis de bœuf au kir à l’aÿ d&#x2019;âge mûr & cætera !</p>
        <p>Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l&#x2019;alcôve ovoïde, où les bûches se consument dans l&#x2019;âtre, ce qui lui permet de penser à la cænogénèse de l&#x2019;être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.</p>
        <ul class="zoom">
            <li onclick="resizeText(1); return false;" title="agrandir le texte">A +</li>
            <li onclick="resizeText(-1); return false;" title="rétrécir le texte">A -</li>
        </ul>
    </div>
    <script>
        function resizeText(multiplier) {
            if (document.body.style.fontSize == '') {
                document.body.style.fontSize = '2em';
            }
            document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + 'em';
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="utf-8" />
	<title>Visualisateur de glyphes</title>
	<style>
	@font-face {
	font-family: 'My Sans Serif font';
	src: url('source/SourceSansPro-Regular.ttf') format('truetype');
	}
	@font-face {
	font-family: 'My Serif font';
	src: url('source/SourceSerifPro-Regular.ttf') format('truetype');
	}
	@font-face {
	font-family: 'My Monospace font';
	src: url('source/SourceCodePro-Regular.ttf') format('truetype');
	}
	html {
	font-family: 'My Sans Serif font';
	}
	body {
	font-size: 2em;
	margin: auto;
	width: 1024px;
	}
	.sans-serif {
	font-family: 'My Sans Serif Font';
	}
	.serif {
	font-family: 'My Serif Font';
	}
	.monospace {
	font-family: 'My Monospace Font';
	}
	ul.zoom li {
	background-color: #444;
	color: #fff;
	cursor: pointer;
	display: inline;
	font-family: 'Consolas', monospace;
	padding: 0.25em;
	}
	ul.zoom li:nth-child(1) {
	margin-right: 0.25em;
	}
	ul.zoom li:nth-child(2) {
	margin-left: 0.25em;
	}
	</style>
	</head>
	<body>
	<h1>Visualisateur de glyphes</h1>
	<h2><em>Sans Serif</em> (sans empattements)</h2>
	<div class="sans-serif">
	<p>Dès Noël où un zéphyr haï me vêt de glaçons würmiens je dîne d’exquis rôtis de bœuf au kir à l’aÿ d’âge mûr & cætera !</p>
	<p>Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l’alcôve ovoïde, où les bûches se consument dans l’âtre, ce qui lui permet de penser à la cænogénèse de l’être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.</p>
	<ul class="zoom">
	<li onclick="resizeText(1); return false;" title="agrandir le texte">A +</li>
	<li onclick="resizeText(-1); return false;" title="rétrécir le texte">A -</li>
	</ul>
	</div>
	<h2><em>Serif</em> (avec empattements)</h2>
	<div class="serif">
	<p>Dès Noël où un zéphyr haï me vêt de glaçons würmiens je dîne d’exquis rôtis de bœuf au kir à l’aÿ d’âge mûr & cætera !</p>
	<p>Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l’alcôve ovoïde, où les bûches se consument dans l’âtre, ce qui lui permet de penser à la cænogénèse de l’être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.</p>
	<ul class="zoom">
	<li onclick="resizeText(1); return false;" title="agrandir le texte">A +</li>
	<li onclick="resizeText(-1); return false;" title="rétrécir le texte">A -</li>
	</ul>
	</div>
	<h2><em>Monospace</em> (à chasse fixe)</h2>
	<div class="monospace">
	<p>Dès Noël où un zéphyr haï me vêt de glaçons würmiens je dîne d’exquis rôtis de bœuf au kir à l’aÿ d’âge mûr & cætera !</p>
	<p>Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l’alcôve ovoïde, où les bûches se consument dans l’âtre, ce qui lui permet de penser à la cænogénèse de l’être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.</p>
	<ul class="zoom">
	<li onclick="resizeText(1); return false;" title="agrandir le texte">A +</li>
	<li onclick="resizeText(-1); return false;" title="rétrécir le texte">A -</li>
	</ul>
	</div>
	<script>
	function resizeText(multiplier) {
	if (document.body.style.fontSize == '') {
	document.body.style.fontSize = '2em';
	}
	document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + 'em';
	}
	</script>
	</body>
	</html>