CODEWITHSUNDEEP
htmlcsstextfontsalias
Rublacava
Rublacava

Reputation: 519

Alias text in HTML or CSS?

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

Upvotes: 3

Views: 1750

Answers (3)

DA.
DA.

Reputation: 40691

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.

Upvotes: 1

Chris Herbert
Chris Herbert

Reputation: 6295

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

Upvotes: 0

Capagris
Capagris

Reputation: 3841

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

Upvotes: 1

Related Questions