Skip to content

Instantly share code, notes, and snippets.

@vincentbernat

vincentbernat/gist:1361948

Created November 13, 2011 10:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vincentbernat/1361948 to your computer and use it in GitHub Desktop.
Save vincentbernat/1361948 to your computer and use it in GitHub Desktop.
Download ZIP
Testing ligatures vs font substitution
Raw
gistfile1.html
<html>
<head>
<meta charset="utf-8">
<title>Ligature tests</title>
<!-- For example to work:
1. The typekit stack should contain FF Tisa Web Pro with default subset.
2. Droid Serif should be installed on the system (with a complete subset).
-->
<script type="text/javascript" src="//use.typekit.com/hen2cfo.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style>
body {
font-size: 16px;
line-height: 16px;
font-family: ff-tisa-web-pro;
margin: 0;
}
.specimen {
float: left;
padding-left: 1em;
}
.specimen div {
height: 16px;
}
.ligature {
margin-left: -0.172em;
}
.fallback {
font-family: Droid Serif;
}
.grid {
position: absolute;
z-index: 1000;
width: 100%;
left: 0;
}
.grid1 {
top: 7px; /* Wild guess */
}
.grid2 {
top: 15px;
}
.grid div {
border-top: 1px dotted red;
height: 15px;
}
</style>
</head>
<body>
<div class="specimen">
<div>cœur</div>
<div>c<span class="fallback">œ</span>ur</div>
<div>co<span class="ligature">e</span>ur</div>
</div>
<div style="font-style: italic;" class="specimen">
<div>cœur</div>
<div>c<span class="fallback">œ</span>ur</div>
<div>co<span class="ligature">e</span>ur</div
</div>
<!-- Grid -->
<div class="grid grid1">
<div> </div>
<div> </div>
<div> </div>
</div>
<div class="grid grid2">
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment