I want to style some fonts in my css using the style- sharp found in Photoshop. Does anyone know the way?
Photoshop uses a custom font rendering engine which you won't be able to emulate using CSS. Furthermore, each platform has its own rendering engine which CSS cannot control.
For WebKit there is -webkit-font-smoothing but what it does is a far cry from what you're looking for.
No luck I'm afraid. The only way I know of (perhaps someone knows otherwise) to achieve this is to save the text in question as an image. Fine for headings etc., but not for body text.
The "sharpness" of a font is usually a thing of the font renderer which is part of the operating system. You should check the font settings. In Windows, for example, try turning off ClearType.
I'm afraid it's a browser/os combination that decides how your fonts are anti-aliased. Nothing you can do about it, except save the Photoshop output as an image, set it as a background for whichever container your text appears in and apply a negative text indent on it via css.
There is solution for font smoothing.
You can use cufon.js to render your font sharply & smoothly. This js renders your text as a cufon and if you right click on it it shows image. You can use this for heading.
Related
I have a web page with text and an image. I want to place the text very precisely over the image.
I have discovered that with the font I am using, when viewing the page on windows, everything gets shifted down by about 4px. On Mac, iphone and android, it is placed correctly.
This does not happen if I use Courier New as the font, so I know that the problem is the font, however I have no choice but to use this font.
Is there a way to compensate for this purely in CSS, or do I need a javascript callback to detect windows and add a class so I can deal with it?
first of all, I would try tuning ling height, if that did not work, then I think you need to edit the font itself, you can do that using this site: https://transfonter.org/, uploading your font file and convert it to the formats you use and the important point is to check this toggle button, it adjusts some properties in the font so it has similar experience on different operating systems
if that did not work, there is a program called fontforge it gives you the ability to change font metrics, for more info you could check this question
Font Rendering / Line-Height Issue on Mac/PC (outside of element)
We use custom icon font (inhouse font generated to icons with icomoon, or something similiar) in our webapp. I can set their size with font-size css property. but sometimes I need to adjust more proprties: for example increase the width or the height of the icon/font etc. Is there a way to do this with css/js?
I'll be glad for help with this, generating a specific font for each mini used isn't a path I would like to choose
font-stretch was supposed to do that but is not included in any current css standard and not supported by any browsers. I think you will have to create seperate icons for that case, sorry.
I did a Google Search trying to find the appropriate css descriptors, and stumbled upon this thread. Maybe it may help: Is it possible to change the font height, not just the line-height?
My client (who is obsessed with pixel perfection) dislikes the way browsers render font-face fonts.
At the moment I am using font-squirrel to convert OTF fonts to webfonts.
The problem is, I don't see any alternatives. I could create a PNG file holding all these texts, but that doesn't sound like a browser-user-friendly solution.
The typical example of a design I have to work on is:
What would be your approach?
I'm assuming that by "dislikes the way browsers render #font-face" your'e referring to the blink which happens. If not, you should elaborate.
The top one is web-font and the bottom one is screengrab from PSD. Both using same font family, same spacing. The client wants to look it more like the bottom one.
I'm assuming that by "dislikes the way browsers render #font-face" your'e referring to the blink which happens. If not, you should elaborate.
Currently there's only 3 options to remove that blink. The first two are obvious solutions - use images, or use web safe fonts. These, obviously, defeat the purpose.
The third option is to embed base64 code for the fonts in your CSS. This increases the size (kb) of your CSS files, but it will completely eliminate the blink which tends to occur because the font is loaded with the CSS so there's no blink when a secondary file is loaded.
usage for including bas64 fonts looks like this:
#font-face {
font-family: "FontName";
src: url("data:font/opentype;base64,[ the base64 code here ]");
}
There are a few online bas64 converters that you can feed a .otf file to and they'll spit out the base64 code. Here's one such converter.
An approach that I have used is to create background images to represent all display-text, and then use CSS to "hide" the actual text, and show only the image. For the sake of accessibility, the text should not be hidden using display:none or display:hidden though. Instead, use a large negative text indent to move the text off the left side of the display, or put it in a nested, absolutely-positioned element somewhere outside of the display area.
I usually use the negative indentation for all text not contained in a clickable element, and the nested, absolutely positioned element technique for anything that is contained in a clickable element (so the active element outline does not expand off the left side as can happen in some browsers).
Another common and popular way of handling this is automatic font replacement (using JavaScript). This solution is friendly to users of screen readers, because the HTML contains plain text and the replacement is done using JavaScript, in the browser.
An example of this is technique is sIFR, which is open source and uses Flash as the replacement.
It looks like it has been bolded. Try setting font-weight to normal.
Is it normal that fonts I used to create site layout are pixelated? I use Georgia, and in photoshop I've smooth lines everything looks great. But when I tried to slice it up and code the css, Georgia font same size looks noticeably uglier!
What are your thoughts?
p.s. I use em to declare sizes in css.
That's because photoshop is using anti-alias technique on text.
Both OS and browser will impact the appearance of text in web page.For example, Mac OS has anti-alias text on all system UI. For windows, I believe they have an option called 'ClearType', once switched on all system UI will have smooth texts.
All fonts on the web will look a little pixellated unless you're on a Mac which renders type considerably better than PC.
The best way I have found to replicate how a font will look on the web is to set the Anitialiasing in Photoshop to 'sharp'.
It is conceivable that there will be CSS markup in the future that will allow antialiasing in the browser rather than OS based.
It is a common problem.
See this article
http://jontangerine.com/log/2007/10/smoothing-out-the-creases-in-web-fonts
The alternative is to use something like Cufon that generates images for your text. Best practice would be to only use it for headings.
http://cufon.shoqolate.com/generate/
I've found this too - each browser renders fonts differently. I often find fonts look much better in IE. Sometimes I opt to use images created in PS to get that smooth look, but for the most part I think people are used to how fonts are rendered in their browser of choice.
In photoshop, there's an option to "smooth" text.
See this image. Bottom right corner.
Remove this anti-alising to have a better view (but not exact) of how the font will look in browser.
i've actually never encounter this problem before. I usually start designing my layout in photoshop then transfer it to my page.
Somehow, lately i've been using georgia font alot, and i love it when the style is italic, but what comes out in photoshop does not reflect back in the webpage when i set it in css.
in the pic above, 1. is what i saw in photoshop and what i wanted, but 2. is what i got, no matter what i try changing, be it font-weight or font-size it remains as bold. I want it thinner, is there a way? I tried font-stretch too btw.
It's not the bold, it is a system font smoothing.
You are able to change (or disable as in your case) font smoothing in Photoshop, but you can't do it with CSS, unless you are using CSS3 and compatible browser.
Added: I wouldn't recommend you to even try to change the font smoothing. That's the user right - to have fonts rendered the way she likes.