I try pixel fonts from http://www.fontsquirrel.com/fonts/list/style/Pixel but It's not perfect in the browser and disable anti-aliasing is not an official CSS property (or don't find good sample).
I found this old question : Is it possible to disable anti-aliasing in CSS when using #font-face with pixel fonts?
And this JS http://devpro.it/pixelfont/ look very nice but default font is to small (make my own font is not a good deal).
So I would like to know if there is something new or others tips (without swf).
Here is a test with font-face (on webkit, firefox don't ?) : http://b4d455.fr/font/
This might do what you want to some extent:
font-smooth: never;
-webkit-font-smoothing : none;
I know I'm late, but Small Font lets you use this gladly.
Here's some working CSS with no links required:
body {font-family: "ＭＳ Ｐゴシック";}
<!--- Here's some HTML for the example --->
<h4>Small Font</h4>
<p>Small Font is a pixel font used by Windows when a font is too small to be displayed</p>
<h5>Recommended CSS:</h5>
<code>font-size: 75%;</code>
I'm not really sure what you're asking. But if you're looking to disable anti-aliasing, you might be able to use -webkit-font-smoothing: none;.
Related
How can we change the CSS rules of dingbats? The following does not work in iOS Safari.
<span class="dingbat">✖</span>
<style>
.dingbat {
color: blue;
font-size: 100px;
}
</style>
Below is a JSFiddle that demonstrates the issue. If you open the JSFiddle in a desktop browser, the dingbat X color will be blue and the size will be 100px. But if you open it in mobile Safari, the color will be black and the size will be small.
https://jsfiddle.net/ujs80tv1/2/
This question was marked as a possible duplicate of "Color of Unicode Emoji". I don't think this question is a duplicate, because I definitely can change the color of Unicode dingbats in most browsers (see JSFiddle for example). The only browser I am not able to change the color in is mobile Safari. You cannot change the color of emojis in any browser as far as I know.
The recommended answer in the "Color of Unicode Emoji" question says to use a new font or library. That may be a workaround, but it doesn't answer the question. If someone can prove that unicode dingbats cannot be styled in mobile Safari I would accept that as the correct answer.
A response in a similar post answers this. It worked for me!
HTML unicode arrow works on Safari desktop, but not Safari for iOS
font-family: 'Zapf Dingbats';
You cannot change the color of the default ✖ style.
You have to first set a font to it.
In the css just add font-family: "Times New Roman".
I have been searching for an answer for this for an hour now with no luck.
I am centering text vertically inside the box using the "line-height" CSS property. This is working fine with standard safe fonts and also works fine for ""#font-face"" font embedding on Windows.
On the Mac however, there is a problem with this centering using "#font-face". See: http://cl.ly/QBlE/o
I don't know what to do with this. The only way to fix this to use different line-height for Mac. But as far as I know this is not possible without JavaScript or server side programming and does not seem to be the proper solution for me.
Example (blue box at the top):
#header .login {
text-decoration:none;
margin:11px 9px 0 9px;
float:right;
font-size:11px;
color:#fff;
background:url(../img/header-login.png);
width:118px;
height:26px;
line-height:26px;
padding:0 0 0 10px;
text-transform:uppercase;
font-family: 'Helvetica55', Sans-Serif;
}
Instead of using different line heights, try using the font-size-adjust property with a value of auto.
From the W3C:
In situations where font fallback occurs, fallback fonts may not share the same aspect ratio as the desired font family and will thus appear less readable. The font-size-adjust property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same regardless of the font used.
First, try setting the line-height from px to em.
If that doesn't work, then it could be caused by default styles that are different for each browser. Those default styles could be messing with your styles. So try to use a reset.css in your page.
The problem most probably lies in the used font. Each font has its own metrics and when not optimized properly they can differ from one platform to another. See http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/ for a better explanation of this.
You could try to alter the font yourself using a tool like http://fontforge.org/. This isn't easy though and takes some trial and error to get it right. It may also violate the license of the font you're using.
My advice: choose a font that is better optimized for use on the web. Take any font from Typekit or the like and i bet you get more consistent results.
Perhaps 'vertical-align:' may help,
please check this fiddle
this will explain the difference, I think every browser have different default value,
here I have created 4 different span tag to show the top, middle, bottom, and default(unassigned) value of the vertical align value,
Please change values if that helps,
as you are using images in the button, please verify the image are set with 0 0
i.e background:url(../img/header-login.png) no-repeat 0 0;
this will render the image from the 0 left and 0 top that will help you idnetify if and image is not properly generated..
Please reply if problem not solved..
From my experience for multi browser and multi platform websites you should really drop the pixels in fonts and start using ems.
Here's a useful convertion table tool:
http://pxtoem.com/
Let me know if it still happens using em. Keep in mind also that different fonts have different behaviors and the default (base) size may differ too. If you want to make sure it is exactly the same size, appart from using 'em' you should also use an openType font and embbed it into your CSS, having exactly the same font and size in any screen or browser.
Operating systems may render fonts different ways. One can start from bottom and other can start from top as their algorithm different. If the problem was CSS, it wouldn't be resolved by another type of font.
I found another question similiar to your one, you can check if it works for your situation:
Mac vs. Windows Browser Font Height Rendering Issue
I have Font Verdana + Bold + 16pt + Stong in PSD
So In html Conversion,
we have Font-family: Verdana + Font-weight:bold + Font-Size:16pt + What for Strong ? (strong html tag is not working for this )
there are 5 Font Styles there in PSD
Sharp , Crisp, Strong , Smooth ,None
so I don’t know how to make Font Strong, Smooth, Sharp etc
How can i resolve this issue in all browsers (old + new).
Thanks.
Sharp, Crisp, Strong, and Smooth are special font effects that affect how Photoshop renders anti-aliased text. There is no equivalent in CSS as far as I know.
What you can try is using CSS effects to scale/transform the text yourself but you will probably have to that for every letter of the text individually, possibly for each browser, certainly for each OS (because the same font is rendered differently in Windows, Mac and Linux).
If this matters to you, the usual approach is to replace the text with a background image using Fahrner Image Replacement (FIR). This shows the text as a fallback or the image with your nicely anti-aliased font.
Check the below links. CSS3 property
http://webdesign.about.com/od/examples/l/bl_fontsmooth.htm
http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm
http://www.usabilitypost.com/2010/08/26/font-smoothing/
http://webtypography.net/Harmony_and_Counterpoint/Size/3.1.1/ might help solve the issue of text looking a bit less crisp in older Internet Explorers.
As for having a bit more control over the font presentation - light, bold, medium etc I would recommend choosing a nice readable serif or san serif font from www.fontsquirrel.com, most font families will come with a variety of weights that you can play with - run up some spans for different weights.
I'm new to CSS and maybe this question is trivial, but I have googled a little and I didn't find what I'm looking for.
I have declared a font-family for all my site. Now, I want to override the font family for some sections. I need the browser's default font family. How can I specify the browser's default font family in a css?
.browser-defatults {
font-family: ?????
}
Maybe I need to ignore all styles, how could I do this?
From what I know CSS doesn't offer an option to ignore all previous user styles for a property.
A work-around to your problem may be to use a generic font-family,
font-family: serif;
and let the browser choose.
Answered
The best answer below was good for the bounty, but user Aaron's answer is the correct answer. Setting:
.sIFR-flash {
width:100%;
}
corrects the issue in Chrome. Sadly, I cannot change my best answer as I guess that's how bounties work.
Answered
I seem to be having some issues with Chrome specifically rendering sIFR replaced text stretched out (and blurry) in it's flash container. No other browser does this (looks good in IE6,7,8, FF, Safari, Opera). Is this a known bug/does anyone have a workaround?
Here's an example you can look at on this site: http://uvph.com/
And here's the replace code:
// -- configure sifr
var futura = { src: '/swf/bfuturah.swf' };
sIFR.activate(futura);
sIFR.replace(futura, {
css: [
'.sIFR-root { background-color:transparent; color: #999999; font-size:24px; text-transform:uppercase; }'
],
fitExactly : true,
forceClear : true,
forceSingleLine : true,
selector : 'h2',
transparent : true
});
I can't use #font-face as my font embeds poorly and I need selectable text. To fix the vertical stretching for my sIFR in IE9 I added
display:block;
height:1.45em;
to the .sIFR-flash
which seemed to match up to IE8 and Firefox
I also used a body font-size of 70%
It gives an extra little flicker while loading but the stretching has stopped.
I noticed that setting the width of .sIFR-flash to 100% seems to correct the issue.
hmmm this is a really strange one. i've uploaded a testcase of your site to my server and everything works fine in chrome. the much better alternative to sifr is http://cufon.shoqolate.com/generate/ its much smaller and much faster, but you cant select the text anymore
Use #font-face property of CSS. It is now supported across all popular browsers(including IE and Chrome). http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/ has a very good post about using #font-face across all browsers and the page itself uses custom fonts. Worth checking =)
First of all: set "forceSingleLine" to "false".
If this still doesn't help: check the CSS properties of the text you want to be rendered. Display-type of the rendered element itself (not the parent!) should be "block", otherwise "width: 100%" has no effect at all. The best results for Chrome can be achieved if sIFR is applied to a block element with fixed width - but this approach will not always be feasible.
I suspect it's something odd between Chrome and the Flash player. It's as if the Flash movie is scaled up incorrectly. The movie fixes itself when you click on it.
What if you set sIFR.useDomLoaded = false before sIFR.activate()?