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.
Related
I'm currently using {font-weight:bold} for an Arial font, but it seems to be too thick. Can I make things a little thinner? I cant find any other method to do it. I've used {font-weight:400} - Specifying in increments of 100. But it's the same thing. Too thick. Any other way to make a font a bit bolder than the other text?
There are many many many fonts that look like Arial that you can play with , some are bolder then others ,
Try looking for a font In Google WebFonts and you can attach it into your css to ensure it will work in every browser
The Arial font has no typeface with a weight between normal (400) and bold (700). Some other fonts do. So you might choose a different that either has an in-between weight or has a bold typeface that suits you needs and eye.
For example, the Google fonts Source Sans Pro and Open Sans are more or less similar to Arial, and both of them have a semi-bold (600) typeface.
It is possible to create sort-of fake bolding of different degrees using text shadowing, with the color being the same as text color, in CSS, e.g. text-shadow: 1px 0 black. But the result is poor. Genuine bolding is rather different from such artificial thickening of strokes.
Sorry man, but Arial Bold is not too thick as you say, It's just "Bold". (Arial Black or Alfa Slab is what then?). But if YOU feel it's too thick for you, you can try a webFont that have a light style and then you can use the regular one as as your Bold style.
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;.
I'm writing a webpage where I want to use one font for normal text and another for code, so I have the following CSS:
body {
font-family:Verdana, sans-serif;
font-size:100%;
}
code, pre {
font-family:Consolas, monospace;
}
This works except that the Consolas text comes out considerably smaller than the Verdana text. I can sort of fix it by adding font-size:1.2em; to the code, pre settings, but that feels like a hack, particularly since the number isn't derived from anything other than trial and error.
Is this something that happens to be a quirk of the particular fonts involved, or am I doing something wrong?
Alas this is because Consolas has a smaller x-height than Verdana. You can indeed "sort of fix it" by using a larger font size, but if the user doesn't have Consolas the page will fall back to the default monospace font, which will appear too large.
The proper solution lies in CSS3's font-size-adjust. Alas it isn't very well supported at all; as far as I know then only mainstream browser to support it is Firefox.
When you define a font-size in CSS, what you're doing is defining a concept known as an "em square" or "em box" even if you aren't using em units.
The em square gets its name because in the days of metal press printing, each letter was put in its own metal "box" and in traditional typefaces the uppercase Latin M typically filled the width of an entire box, defining the sizes for the entire family. Hence, the em box. Although the original em box was defined by the width of the M, the em unit itself refers to the maximum allowable height of a character. This was just a result of the box created for the uppercase M.
In short, all of the letters in a font family need to fit inside the em box, but they don't have to take up the whole thing. So when you set an em box with a given width, all you are doing is defining the maximum allowable space for the lettering to be placed in. From there, the typeface designer's choices in kerning, geometry, ratios, etc. will determine just how much of that box their lettering will take up. This is why you are having to use two different font sizes to make the lettering appear to be the same.
The font sizes are the same. But in Verdana, characters are generally taller than in most fonts (in the same size). For example, “H” in Verdana is taller than “H” in Consolas. This is a font design issue.
The solution is to use matching fonts. If you really want to use Verdana for copy text, Lucida Console is probably the best choice for a monospace font. If you want to use Consolas as monospace font (fine!), then use another “C font” for copy text, such as Cambria (serif font) or Calibri or Candara (sans-serif fonts).
Although the font sizes are the same here (on browsers that I tested), it is best to make sure of it, since browsers often apply something like font-size: 90% on code and pre and some other elements. The conditions for this to happen are somewhat obscure, and explicitly setting font family to something else than the generic monospace seems to prevent that on modern browsers. But it’s still a useful precaution to set
pre, code, samp, kbd, tt { font-size: 100%; }
The first line is in Verdana and the second is Consolas. Both 12pt. Consolas is slightly shorter, but not so much as in 20% difference. Check the parent elements of your pre, since em font sizes are cummulative - e.g. if body is 0.9em and pre is 0.9em, the result would be 12pt * 0.9 * 0.9 = 9.72pt
If you are trying to match only the height but ignoring the width, then 1.16em looks about right, and it is really the quirk of the font and you are not doing anything wrong.
Edit
Looks like you are doing nothing wrong =) Left is from fiddler, right is from WordPad
Has anyone found the magic coding snippet to get a good register mark across the board in email readers? Not browser-based email like google, hotmail as they use the browser engine to render but actual email programs: Entourage/Outlook/.
We use old-school html and only css for styling fonts not structure of course. And we don't send big images so we're doing it right for across the board but the only stickler now is getting the register character superscripted and legible.
This is close but not legible Outlook:
<sup style="font-size: 0.6em; line-height: 0;
*vertical-align: baseline; *position: relative; *bottom: 4px;">®</sup>
Try
<font class=reg>®</font>
with e.g.
<style>
.reg { font-family: Verdana, Arial; }
</style>
The REGISTERED SIGN ® has very varying implementations in fonts. I you don’t like it in the font selected, then changing font is probably a lesser evil than trying to style the character—I mean styling that changes the glyph size or vertical placement. One reason to this is that you cannot change the stroke width: by reducing size, you would reduce the stroke width, possibly beyond recognizability.
There’s usually no point in making ® superscripted or small-size. It’s a typographic design decision, and if the font designer decided to make it a small superscript, fine, use that if you agree with the decision. If the font designer decided otherwise, then, if he did his work well, the character does not behave well when superscripted.
I have a Microsoft Word document which uses a 10pt Arial font. I have re-created this document with HTML/CSS, specifying font: normal 10pt Arial; in my stylesheet. When I print from the web page (from Chrome), the text appears significantly smaller.
I have my text wrapped in a 800px-wide container on my website. Might this be a cause? Besides this, to be honest I'm completely out of ideas & any help would be greatly appreciated.
It could be because you are specifying font sizes in pts. pts are pretty much inconsistent across platforms and do not scale. (px don't scale either) Try using em.
See Also: http://www.w3.org/QA/Tips/font-size, CSS Font-Size em vs. px vs. pt vs. percent
(You will have to provide a sample of your HTML to get a more concrete answer)
Have you tried converting your font-size to pixels or ems? I believe 10pt would roughly translate to 13px.