I have the following HTML:
<div class='box'>text</div>
and CSS:
.box {
/* non-essential */
display: inline-block;
margin: 2em;
background: plum;
/* ESSENTIAL */
transform: rotate(45deg);
font-family: Courier;
}
And this is the fiddle. I've omitted the prefixes here, but they are in the fiddle.
Expected result:
It is also the result I get in Chrome, Firefox, IE9, Safari.
However, in Opera it looks like this:
If I take out the transform (that is, the div is not rotated
anymore), then the text is shown.
If I replace the font with another one, then the text is shown.
So why is this happening and what other solutions do I have?
In case this helps:
Why is this happening
It's happening because Opera has resolved Courier to courier.fon a bit-mapped font, and Opera has not implemented rotation for bit-mapped fonts.
You get the same results with Modern and Roman and any other font where you have a .fon version.
You can look in C:\Windows\Fonts for a complete list.
What other solutions do I have
If you are relying on the exact metrics of the font when it is presented on the page, you may want to consider using a web font.
If calling the font "courier" is important, then you could ignore opera: It's not very popular, this is a bit of an obscure bug, and since Opera is ditching Presto for Webkit, it simply involves waiting.
If you change the font-family tag to the below it works:
font-family:"Courier New", Courier, monospace;
http://jsfiddle.net/3tTyp/1/
Related
I started creating an app using Bootstrap, and ended up customizing the CSS so much as to not need Bootstrap at all. However, when removing the bootstrap CSS file, I ran into a problem.
I have an element which I am assigning 120% font-size:
#page-title {
font-size:120%;
}
Now with Bootstrap 3.3.5, the font is one size, apparently calculated to 14px according to chrome dev tools.
However, if I remove the Bootstrap CSS and just set body to have a font-size of 14px (and the various other Bootstrap styles such as line-height), the font is a different size, but only on Windows Phone 8.1 IE11.
my body css is the following:
body{
margin:0px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
}
Which is, as far as I can tell, the same as Bootstrap's. I am also still including all the same meta tags. The only difference is the CSS file.
My question is not why does this specific version of IE do this (as I cannot recreate it on Windows 8.1 IE11), but what magic does Bootstrap's CSS have that I can copy?
I went digging through the entirety of the Bootstrap CSS and found the bit that was missing.
#-ms-viewport {
width: device-width;
}
This fixes the font sizing (and a few other tweaks) On Windows Phones and Tablets that appear correctly with Bootstrap, but not without.
When using white text on black background the text looks fatter than it should look. Its pure text with css. I'm using typekit.org font.
Is there any way to fix this or is it some kind of anti-aliasing problem?
The text is bold because of the anti-aliasing algorithm being used in your browser. It's easy to verify. Take screengrabs in IE, Safari, Firefox and Chrome. They all anti-alias differently. Some make the text look thicker than others. Generally the better text looks white-on-black, the fatter it looks reversed.
There's a full explanation here: http://www.lighterra.com/articles/macosxtextaabug/
This will turn off anti-aliasing in most browsers:
body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}
Actually, it is a known bug:
I was able to fix this by using:
-webkit-font-smoothing:antialiased
Source: this article (cached on archive.org).
Kinda late, but it may still be useful to some.
Just remember this is not recommended. Unless you're on MacOS and are using light text on dark background.
This is not an optical illusion. It is an OS and browser related issue which still exists in 2018. This little snippet demonstrates the problem:
<div style="background-color: #000; font-size: 16px; position: relative;">
<div style="color: #fff;">Hello World</div>
<div style="color: #000; position: absolute; top:0;">Hello World</div>
</div>
If you are sitting in front of a macOS box you might notice the white outlines. They are the result of over motivated font smoothing. Try using
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; to reduce this effect.
I've found that a combination of font-smoothing: antialiased or font-smoothing: grayscale (like the others have mentioned) and text-rendering: optimizeLegibility can produce consistent results on light and dark colors and also across different browsers. You need to do proper testing in each browser because you don't get the same results with every font. Sometimes only setting font-smoothing does the trick, sometimes only setting text-rendering does the trick, and sometimes you need to use both.
After deleting some of my CSS code in a rails application, I restart the server and refresh the page and I find the code is still being used. I can still see it when I use the Chrome element inspector.
#media screen and (min-width: 961px) {
.logow { position:absolute; left:0px; top:0px;
}
body {
font-family: Verdana, Arial, Tahoma, sans-serif;
background-image: url('bg.png');
}
}
For example, if I delete the background-image: url('bg.png'); from my code, the background still stays the same. I am a CSS and rails noob so it is probably something very simple.
Press Ctl+Shift+Del and you can remove cache, cookies and whatever you want, then load your page.
This is happening because your browser is caching the page.
Make sure that you reload the page. Sometimes Opera still uses the old and cached style, which means that you should avoid Opera and use Chrome, Mozilla or Safari.
If you still have to work on Opera, delete history. Reload F5 will be sufficient on Chrome, Mozilla or Safari
I have custom-made web fonts used on my site. To style my rendering output, I used the following code:
//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;
This works fine on Safari and Chrome (edges are sharper and lines are thinner).
Is there any way of implementing the same style on Firefox and Opera?
As Opera is powered by Blink since Version 15.0 -webkit-font-smoothing: antialiased does also work on Opera.
Firefox has finally added a property to enable grayscaled antialiasing. After a long discussion it will be available in Version 25 with another syntax, which points out that this property only works on OS X.
-moz-osx-font-smoothing: grayscale;
This should fix blurry icon fonts or light text on dark backgrounds.
.font-smoothing {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
You may read my post about font rendering on OSX which includes a Sass mixin to handle both properties.
Well, Firefox does not support something like that.
In the reference page from Mozilla specifies font-smooth as CSS property controls the application of anti-aliasing when fonts are rendered, but this property has been removed from this specification and is currently not on the standard track.
This property is only supported in Webkit browsers.
If you want an alternative you can check this:
Text-Shadow Anti-Aliasing | Philip Renich, Websites - blog
cufón - fonts for the people
Case: Light text with jaggy web font on dark background Firefox (v35)/Windows
Example: Google Web Font Ruda
Surprising solution -
adding following property to the applied selectors:
selector {
text-shadow: 0 0 0;
}
Actually, result is the same just with text-shadow: 0 0;, but I like to explicitly set blur-radius.
It's not an universal solution, but might help in some cases. Moreover I haven't experienced (also not thoroughly tested) negative performance impacts of this solution so far.
After running into the issue, I found out that my WOFF file was not done properly, I sent a new TTF to FontSquirrel which gave me a proper WOFF that was smooth in Firefox without adding any extra CSS to it.
I found the solution with this link :
http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/
Step by step method :
send your font to a WebFontGenerator and get the zip
find the TTF font on the Zip file
then, on linux, do this command (or install by apt-get install ttfautohint):
ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
then, one more, send the new TTF file (neosansstd-black.changed.ttf) on the WebFontGenerator
you get a perfect Zip with all your webfonts !
I hope this will help.
... in the body tag and these from the content and the typeface looks better in general...
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}
#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
When the color of text is dark, in Safari and Chrome, I have better result with the text-stroke css property.
-webkit-text-stroke: 0.5px #000;
Adding
font-weight: normal;
To your #font-face fonts will fix the bold appearance in Firefox.
Fonts in the latest Chrome, Opera, Safari and Firefox look fine but in IE9 they look blurry and small in comparison. On other sites they look alright though?
Is there anything I can change in CSS to make them all look the same? Mainly the size as it makes the whole website look odd...
I'm using the following CSS:
margin: 0px;
padding: 0px;
font: 11px Verdana, Arial;
line-height: 13px;
Declaring
<!DOCTYPE html>
will make IE9 behave just that bit better.
I would look in HTML5 Boiler Template. They've already solved all these little quirks and created a nice boilerplate for people to use.