Skip to content

Instantly share code, notes, and snippets.

@384400 384400/test.html
Created Oct 8, 2016

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.