Created
December 19, 2012 11:00
-
-
Save bivald/4335951 to your computer and use it in GitHub Desktop.
Cross-browser fix for bad web font rendering. http://www.dropmocks.com/mBnnKJ (left is before, right is after)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Safari and Chrome (os x) both handles webfonts badly when compared | |
| with the Photoshop version of the same font. They are generally harder and rough. | |
| Example: | |
| http://www.dropmocks.com/mBnnKJ | |
| Left: Web font in Safari, Right: Fixed web font | |
| - In Chrome, the fonts can be (more) properly rendered using opacity: 0.99. | |
| This however makes Safari render it even worse. | |
| - For Safari, using rgba(X,X,X,0.99) works, but this has no effect on Chrome. | |
| - Even using opacity: 1 messes up safari. | |
| - Forcing hardware acceleration makes opacity: 0.99 work in Safari, and Chrome | |
| */ | |
| body { | |
| -webkit-transform: translate3d(0px, 0px, 0px); /* Force hardware acceleration to fix safari opacity bugg*/ | |
| } | |
| p,h1 { | |
| /* Add webfont CSS here */ | |
| opacity: 0.99; | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Note that setting translate3d on the entire body might mess up other css3 animations you have. In that case, set the -webkit-transform on the specific element.