techno-font

<!DOCTYPE html> <html> <head> <title>techno-font glyphs preview</title> <style> /* Page Styles */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } body { background: #fff; color: #444; font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; } a, a:visited { color: #888; text-decoration: underline; } a:hover, a:focus { color: #000; } header { border-bottom: 2px solid #ddd; margin-bottom: 20px; overflow: hidden; padding: 20px 0; } header h1 { color: #888; float: left; font-size: 36px; font-weight: 300; } header a { float: right; font-size: 14px; } .container { margin: 0 auto; max-width: 1200px; min-width: 960px; padding: 0 40px; width: 90%; } .glyph { border-bottom: 1px dotted #ccc; padding: 10px 0 20px; margin-bottom: 20px; } .preview-glyphs { vertical-align: bottom; } .preview-scale { color: #888; font-size: 12px; margin-top: 5px; } .step { display: inline-block; line-height: 1; position: relative; width: 10%; } .step .letters, .step i { -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -ms-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; } .step:hover .letters { opacity: 1; } .step:hover i { opacity: .3; } .letters { opacity: .3; position: absolute; } .characters-off .letters { display: none; } .characters-off .step:hover i { opacity: 1; } .size-12 { font-size: 12px; } .size-14 { font-size: 14px; } .size-16 { font-size: 16px; } .size-18 { font-size: 18px; } .size-21 { font-size: 21px; } .size-24 { font-size: 24px; } .size-36 { font-size: 36px; } .size-48 { font-size: 48px; } .size-60 { font-size: 60px; } .size-72 { font-size: 72px; } .usage { margin-top: 10px; } .usage input { font-family: monospace; margin-right: 3px; padding: 2px 5px; text-align: center; } .usage .point { width: 150px; } .usage .class { width: 250px; } footer { color: #888; font-size: 12px; padding: 20px 0; } /* Icon Font: techno-font */ @font-face { font-family: "techno-font"; src: url("../assets/techno-font.eot"); src: url("../assets/techno-font.eot?#iefix") format("embedded-opentype"), url("../assets/techno-font.woff") format("woff"), url("../assets/techno-font.ttf") format("truetype"), url("../assets/techno-font.svg#techno-font") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: "techno-font"; src: url("../assets/techno-font.svg#techno-font") format("svg"); } } [data-icon]:before { content: attr(data-icon); } [data-icon]:before, .tf-apple:before, .tf-archlinux:before, .tf-bitbucket:before, .tf-bluetooth:before, .tf-cassandra:before, .tf-centos:before, .tf-css3:before, .tf-debian:before, .tf-desktop:before, .tf-docker:before, .tf-dropbox:before, .tf-empire:before, .tf-fedora:before, .tf-firstorder:before, .tf-freebsd:before, .tf-gentoo:before, .tf-git:before, .tf-github:before, .tf-github-alt:before, .tf-hdd:before, .tf-html5:before, .tf-jsfiddle:before, .tf-linuxmint:before, .tf-microchip:before, .tf-mobile:before, .tf-mongodb:before, .tf-nodejs:before, .tf-npm:before, .tf-opensuse:before, .tf-python:before, .tf-qrcode:before, .tf-qrcode-alt:before, .tf-raspberrypi:before, .tf-rebel:before, .tf-redhat:before, .tf-rocket:before, .tf-slackware:before, .tf-stackexchange:before, .tf-stackoverflow:before, .tf-tablet:before, .tf-tux:before, .tf-twitter:before, .tf-ubuntu:before, .tf-ubuntu-inverse:before, .tf-vimeo:before, .tf-wireless:before, .tf-youtube:before { display: inline-block; font-family: "techno-font"; font-style: normal; font-weight: normal; font-variant: normal; line-height: 1; text-decoration: inherit; text-rendering: optimizeLegibility; text-transform: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .tf-apple:before { content: "\f116"; } .tf-archlinux:before { content: "\f100"; } .tf-bitbucket:before { content: "\f129"; } .tf-bluetooth:before { content: "\f12a"; } .tf-cassandra:before { content: "\f117"; } .tf-centos:before { content: "\f101"; } .tf-css3:before { content: "\f136"; } .tf-debian:before { content: "\f102"; } .tf-desktop:before { content: "\f12b"; } .tf-docker:before { content: "\f118"; } .tf-dropbox:before { content: "\f12c"; } .tf-empire:before { content: "\f12d"; } .tf-fedora:before { content: "\f103"; } .tf-firstorder:before { content: "\f13e"; } .tf-freebsd:before { content: "\f10f"; } .tf-gentoo:before { content: "\f111"; } .tf-git:before { content: "\f119"; } .tf-github:before { content: "\f11a"; } .tf-github-alt:before { content: "\f138"; } .tf-hdd:before { content: "\f135"; } .tf-html5:before { content: "\f139"; } .tf-jsfiddle:before { content: "\f11c"; } .tf-linuxmint:before { content: "\f105"; } .tf-microchip:before { content: "\f13a"; } .tf-mobile:before { content: "\f12f"; } .tf-mongodb:before { content: "\f11d"; } .tf-nodejs:before { content: "\f125"; } .tf-npm:before { content: "\f11f"; } .tf-opensuse:before { content: "\f109"; } .tf-python:before { content: "\f120"; } .tf-qrcode:before { content: "\f121"; } .tf-qrcode-alt:before { content: "\f13b"; } .tf-raspberrypi:before { content: "\f122"; } .tf-rebel:before { content: "\f130"; } .tf-redhat:before { content: "\f10a"; } .tf-rocket:before { content: "\f131"; } .tf-slackware:before { content: "\f10b"; } .tf-stackexchange:before { content: "\f134"; } .tf-stackoverflow:before { content: "\f126"; } .tf-tablet:before { content: "\f132"; } .tf-tux:before { content: "\f128"; } .tf-twitter:before { content: "\f133"; } .tf-ubuntu:before { content: "\f10d"; } .tf-ubuntu-inverse:before { content: "\f10e"; } .tf-vimeo:before { content: "\f13c"; } .tf-wireless:before { content: "\f123"; } .tf-youtube:before { content: "\f13d"; } </style>  <script> function toggleCharacters() { var body = document.getElementsByTagName('body')[0]; body.className = body.className === 'characters-off' ? '' : 'characters-off'; } </script> </head> <body class="characters-off"> <div id="page" class="container"> <header> <h1>techno-font contains 47 glyphs:</h1> <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a> </header> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-apple" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf116;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-archlinux" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf100;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-bitbucket" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf129;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-bluetooth" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf12a;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-cassandra" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf117;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-centos" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf101;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-css3" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf136;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-debian" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf102;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-desktop" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf12b;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-docker" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf118;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-dropbox" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf12c;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-empire" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf12d;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-fedora" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf103;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-firstorder" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf13e;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-freebsd" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf10f;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-gentoo" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf111;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-git" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf119;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-github" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf11a;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-github-alt" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf138;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-hdd" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf135;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-html5" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf139;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-jsfiddle" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf11c;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-linuxmint" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf105;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".tf-microchip" /> <input class="point" type="text"