Menu
I'm a bit struggling with the @font-face CSS option. After a lot of reading, trying, retrying I finally came across a website that makes you a ready-to-go package when you upload your font. It's running now but it seems the font doesn't get anti-aliased. While I see this happening at other websites, mine does not render the headings the way I want.
My CSS code:
@font-face { font-family: 'YanoneKaffeesatzThin'; src: url('../fonts/yanonekaffeesatzthin-webfont.eot'); src: local('☺'), url('../fonts/yanonekaffeesatzthin-webfont.woff') format('woff'), url('../fonts/yanonekaffeesatzthin-webfont.ttf') format('truetype'), url('../fontsyanonekaffeesatzthin-webfont.svg#webfontyC5sm3N9') format('svg'); font-weight: normal; font-style: normal;} What is left to do to make this last, but anoying, issue go away?
609
Antialiasing refers to the smoothing of jagged edges of drawn graphics and text to improve their appearance or readability.
If you're design is placing text onto a dark background then you have a good reason to look towards using the WebKit and Firefox prefixed font-smoothing options to make the text look lighter, but you should be warned that these only work on Mac and OSX and leaves the billions of other users with a sub-standard view.
The font-smooth CSS property controls the application of anti-aliasing when fonts are rendered. This feature is non-standard and is not on a standards track. It depends on the browser used and the system specifications; thus, it may not work for every user.
Also see: http://www.elfboy.com/blog/text-shadow_anti-aliasing/
The gist is that adding text-shadow: 0 0 1px rgba(0,0,0,0.3); gives the appearance of anti-aliasing.
101
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
