Is it possible to disable anti-aliasing in CSS when using @font-face with pixel fonts?
Font rendering is done by the operating system and browser, so, as of yet, I believe there is little that you can do with CSS. There may be some proposed CSS rules in discussion (I've seen mention "font-smooth" or something like that), but nothing in CSS3, as far as I know, and definitely nothing in CSS2.
@font-face anti-aliasing on windows and mac
This just looks like the normal ugly way fonts are rendered in WinXP. Some (IMO: misguided) people even prefer it.
To get anti-aliasing for desktop fonts in general on XP you have to turn it on, from Display Properties -> Appearance -> Effects -> Use the following method to smooth edges of screen fonts -> ClearType. The default setting “Standard” is the old-school Windows “font smudging” technique that only bothers to turn on at larger font sizes, and then often makes a mess.
IE7+ has an option—on by default—to always use ClearType anti-aliasing to render fonts in the web browser. Other web browsers will respect the user's configured font rendering method. It is a shame that so many people still have this beneficial setting turned off, but it's not really your problem.
(There is nasty hack to make Chrome perform some anti-aliasing on text, which is:
text-shadow: 0px 0px 1px rgba(0,0,0,0);
but I seriously wouldn't recommend it.)
One thing you can do when the “Use the following method...” setting is set to “Standard”, to try to make the font get some form of anti-aliasing, is to check that the font in question doesn't have a GASP
table telling old-fashioned TrueType renderers to disable anti-aliasing at particular font sizes. You can change the GASP table using a font editor or with the ttfgasp.exe
command-line tool.
Forcing anti-aliasing using css: Is this a myth?
No, there's not really any way to control this as a web developer.
Small exceptions are that you can do some fake forcing of anti-aliasing by using Flash through sIFR, and some browsers won't anti-alias bitmap/pixel fonts (as they shouldn't, more info: Anti-Aliasing / Anti-Anti-Aliasing).
Also, as Daniel mentioned, it's ideal to be using em
units for all fonts, see The Incredible Em & Elastic Layouts with CSS for more information about this.
How to draw a pixel font on the canvas without anti-aliasing
Was just hoping 5 years later they added an official way to fix this problem?
Well... not more than a few months ago, more text modifiers have been added to the canvas API, among which ctx.textRendering
, which is basically the equivalent of SVG's text-rendering
.
So, none of the options will really force turning off anti-aliasing, but you will certainly have better results using textRendering = "geometricPrecision"
.
Also, this is currently only being supported by Chromium based browsers ... and only with the chrome://flags/#enable-experimental-web-platform-features
turned on.
const label = document.querySelector( "label" );
const canvas = document.querySelector( "canvas" );
const ctx = canvas.getContext( "2d" );
if( !ctx.textRendering ) {
console.warn( `Your browser doesn't support the textRendering property on Canvas
If you are on Chrome be sure to enable chrome://flags/#enable-experimental-web-platform-features` );
}
let state = 0;
const states = [
() => {
label.textContent = "optimizeLegibility";
ctx.textRendering = "optimizeLegibility";
drawText();
},
() => {
label.textContent = "geometricPrecision";
ctx.textRendering = "geometricPrecision";
drawText();
},
() => {
label.textContent = "difference";
ctx.textRendering = "optimizeLegibility";
drawText();
ctx.globalCompositeOperation = "xor";
ctx.textRendering = "geometricPrecision";
drawText();
ctx.globalCompositeOperation = "source-over";
}
];
document.fonts.load( "120px pixel" ).then( begin );
function begin() {
ctx.clearRect( 0, 0, canvas.width, canvas.height );
ctx.font = "120px pixel";
states[ state ]();
state = (state + 1) % states.length;
setTimeout( begin, 1000 );
}
function drawText() {
ctx.textBaseline = "top";
ctx.fillText( "TESTING", 0, 0 );
}
@font-face {
font-family: pixel;
src: url("https://dl.dropboxusercontent.com/s/hsdwvz761xqphhb/pixel.ttf");
}
<label></label><br>
<canvas width="500"></canvas>
Font Anti-Aliasing on iPad SDK
Something like this might work if you are subclassing a UILabel or similar:
-(void) drawRect:(CGRect)r {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState( context );
CGContextSetShouldSmoothFonts( context , false );
[super drawRect:r];
CGContextRestoreGState( context );
}
If that does not work you can try these calls too:
CGContextSetAllowsAntialiasing( context , false );
CGContextSetShouldAntialias( context , false );
Related Topics
Using Class Set in Media Query as Mixin in Less
Is It Posible to Make an Input Checkbox a Bootstrap Glyphicon
What's the Difference Between Padding and Margin
A:Visited Links - Opacity Not Working
How to Remove a CSS Class from a Jqgrid Cell
CSS Keep All Flexbox Children Elements the Same Size
How to Evenly Distribute Menu Items with CSS When Width and Quantity Is Not Known
How to Make a Button Stretch Across the Width of a Column
CSS Border-Width:1Px Doesn't Give Me Equally Thin Borders
How to Change Image a When Hovering Over Image B Without JavaScript Only CSS
How to Disable Anti-Aliasing in CSS When Using @Font-Face with Pixel Fonts
Advanced CSS Selector - Select Based on Styling
CSS Dot Leaders with Textured Background
The Meaning and Benefits of Flex: 1