72 lines
1.6 KiB
HTML
72 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Autonym font Example</title>
|
|
<meta name="description" content="" />
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
|
|
<script src="../lib/jquery.uls/src/jquery.uls.data.js"></script>
|
|
<script src="../lib/jquery.uls/src/jquery.uls.data.utils.js"></script>
|
|
<style>
|
|
|
|
@font-face {
|
|
font-family: 'Autonym';
|
|
src: url('../data/fontrepo/fonts/Autonym/Autonym.eot');
|
|
src: local('Autonym'),
|
|
url('../data/fontrepo/fonts/Autonym/Autonym.woff') format('woff'),
|
|
url('../data/fontrepo/fonts/Autonym/Autonym.ttf') format('truetype');
|
|
font-style: normal;
|
|
}
|
|
|
|
.autonym {
|
|
font-family: 'Autonym';
|
|
font-size: 1em;
|
|
}
|
|
|
|
.list {
|
|
width: 100%;
|
|
-moz-column-count: 6; /* Firefox */
|
|
-webkit-column-count: 6; /* Safari and Chrome */
|
|
-moz-column-rule:3px outset #555; /* Firefox */
|
|
-webkit-column-rule:3px outset #555; /* Safari and Chrome */
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
font-size: 1em;
|
|
line-height: 2em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Autonym Font</h1>
|
|
<p>Following content in this page uses <a href="https://github.com/santhoshtr/AutonymFont">Autonym</a>
|
|
font for displaying language names without font issues.</p>
|
|
<div class="dropdown">A dropdown example:
|
|
<select class="autonym">
|
|
</select>
|
|
</div>
|
|
<hr/>
|
|
<div class="list">
|
|
A list example
|
|
<ul class="autonym"></ul>
|
|
<script>
|
|
$.each( $.uls.data.languages, function( langCode) {
|
|
var autonym = $.uls.data.getAutonym( langCode );
|
|
$( 'select' ).append(
|
|
$( '<option>')
|
|
.attr( 'lang', langCode )
|
|
.text( autonym )
|
|
|
|
)
|
|
$( 'ul' ).append(
|
|
$( '<li>')
|
|
.attr( 'lang', langCode )
|
|
.text( autonym )
|
|
)
|
|
} );
|
|
</script>
|
|
|
|
|
|
</div>
|
|
</body> |