3

I want to alias the text in HTML or CSS. Or, I am sure it can be done with javascript (and maybe vbscript or tcl).
In a similar question a user posted these codes: 

font-smooth: auto | never | always |  | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased
However, font-smooth: never; and -webkit-font-smoothing : none; did not do the job and I suspect there may [sadly] be no option to alias text.

P.S: Aliased text: text rendered as either black or white pixels:

enter image description here

Community
  • 1
  • 1
Rublacava
  • 414
  • 1
  • 4
  • 16
  • i am also facing same issues !! in a similar ques.. http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/ – Arul Sidthan Mar 02 '15 at 06:26
  • 1
    You're correct that there is no way to do this in CSS. Font rendering is handled almost entirely by the operating system. – Nick Coad Mar 04 '15 at 23:13
  • I understand that you want to achieve some visual effect(?) then why you don't use font looking like this??? – Kinga Mar 05 '15 at 15:35

3 Answers3

1

It will be hard to do this via css for many reasons:

1.- you are fighting, first and foremost, against browsers and OS settings. Cleartype, DirectWrite, etc. are not always set via the browser's settings but rather through the OS.

2.- css properties for antialiasing are not consistent among all primary browsers.

3.- font-smoothing is no longer existent if I recall correctly.

So, having said that, why don't you look for a font that has the style you want, such as :

http://www.fontspace.com/kreative-korporation/chixa

G

Capagris
  • 3,811
  • 5
  • 30
  • 44
1

You can't force a font to be aliased at the extent you have in your example. That's not aliased as much as a blown-up pixel font.

Fonts that you use in a web page are not bitmap fonts. They are vector fonts. Meaning there are no pixels to alias. *

Your best bet is to find a standard font that is drawn to look like bitmaps and simply use that...with or without font smoothing.

* back in the day fonts did have a set of bitmaps that went along with the vector data. This was called hinting. However, these, too, were not designed to be blown up beyond their 1 image to 1 screen pixel ratio.

DA.
  • 39,848
  • 49
  • 150
  • 213
0

In Chrome and Safari on OSX, you can use:

-webkit-font-smoothing: none

I don't think this will work on any other operating systems, or in Firefox.

If you need something that will work on a broader range of browsers, try using a font that's created to look pixelated, like http://www.google.com/fonts/specimen/Press+Start+2P

Chris Herbert
  • 6,145
  • 3
  • 19
  • 31