Monday, October 26th, 2009
Be a CSS Ninja with your Font Dragr
Category: Firefox
, Showcase, Typography
The CSS Ninja has created a Font Dragr drag and drop font tester:
Font dragr is an experimental web app that uses HTML5 & CSS3 to create a useful standalone web based application for testing custom fonts, once you visit it for the first time you don’t need to be online to use it after the initial visit. It allows you, in Firefox 3.6+, to drag and drop font files from your file system into the drop area. The browser will then create a data URL encoded copy to use in the page and render the content in the dropped font.
Used in the app:
- HTML5
- Offline access applicationCache
- Drag and drop API
- File API
- contenteditable attribute set to true so the text can be edited.
- CSS3
- Custom fonts with @font-face
- Gradients
- Rounded corners using border-radius
- Drop shadows with text-shadow & box-shadow
- Attribute and pseudo selectors
- Multiple border colours
- Box model adjust using box-sizing
See it in action:
1.4 rating from 45 votes
Editors, when will you fix the content fitting the article width?
MartijnHoutman, they’ve never even acknowledged it. They rarely even respond to comments directed at them, and I suspect they probably just don’t read them. My suggestion is to use a custom stylesheet for ajaxian.com. This is the one I use, which preserves the design appearance but extends the main column to the right of the full content area:
#sidebar {display: none;
}
#maincontent {
width: 700px;
padding-left: 27px;
padding-right: 20px;
}
#maincontent #commentlist dd {
margin-bottom: -5px;
padding-bottom: 1.3em;
}
.igBar {
width: 644px;
}
.syntax_hilite {
width: 633px;
}
#commentscontainer, p.commentbar {
background-image: none !important;
}
Theres one more feature which I only added a few days ago. The main content area will save any edits you do using localStorage.
eyelidlessness, I like your hacks.
GH337, as a digital mobile phone, empire wedding dresseswhether it is performance or other aspects are much better than the analog phones could also say that empire waist wedding dresseswas the fashion trend.Ericsson T68: the first color screen mobile phone Ericsson T68 was launched in the finalstrappless empire waist wedding dresses of a cell phone, but also a location in the high-end mobile phones, evening formal dressesit is the emergence of the mobile phone world has become Behind colorful.Ericsson GH398: Custom ring tones plus size evening dressescan be the first mobile phone Ericsson has brought unconventional way this could be composing ringtones GH398,Unfortunately, mobilecheap flower girl dresses phones have not yet popular in that era, which ended in failure.Ericsson T39mc: wedding dressthe first built-in Bluetooth-enabled mobile phone August 2001 Ericsson released the world’s first built-in Bluetooth chip for mobile phones T39mc,Empire Halter Satin WeddingDresswhich is Ericsson’s first tri-band GSM and GPRS high-speed Internet-ready phones.Ericsson R250 PRO: the first three anti-cell phonewedding dressR250 PRO is the first with a waterproof,Empire Halter Chiffon Wedding Dress shockproof, dust-proof function of the “three defenses” outdoor-type mobile phone. It is in the third quarter of 1999 to the market.
I created a similar project at http://www.bruechner.de/md5file/js/ a local JavaScript MD5 check tool.