When I look on the font-family of an HTML element (from js, firebug or similar) it's always a list. How can I see which of the font is actually used from the list?
I realise it's not ideal, but you can copy the text from the viewport and paste it into a rich text editor, and it will tell you.
It's a bit fiddly, but using Firebug you can tweak the name of each font in a font-family, working left to right until the element's font changes, meaning it was the last font you changed is being used. On the latest Firebug at least, you only need to add or remove a letter from a font's name for the change to be reflected.
The Font Finder add-on for Firefox can do this. Since it’s clearly possible, it sure would be convenient if this were built in to Firebug.
Update 2012/2/4:
I examined the Font Finder source to find out how it works, and it’s actually a clever little hack. The relevant code is in the Detector class in fontfinder.js. To quote the source:
Inner class that's used to determine which font is rendered. It
operates under the foundation that each font has a unique height &
width when given a large enough font size & sample string
What’s it doing is almost like an automated version of Marcel’s answer.
So how it works is that a dummy element — with the text “mmmmmmmmmmlil” — is added to the DOM. It is set to use the browser fallback font, “serif”, at a font-size of 72px. With that, Font Finder knows the width and height of the element when the fallback font is in use. Next, it just iterates through all the fonts listed in the font-family, setting the font on the element in turn, for each one in the list. If the width and height of the element matches the width and height when the fallback font was set, we can deduce that the given font is not present. The first font in the list which produces a different width or height on the element will be the font that is actually being rendered (note: there is a special case involved when the fallback font, “serif,” is in the font-family list).
There is also a Chrome version of Font Finder. It differs (relevant source) in that the browser fallback font appears to be “sans” — not “serif.” Any code using this method will have to have browser-specific knowledge of the fallback font.
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?
I try to wrap my head around the auto property in CSS 3's font-size-adjust. The spec says:
Behaves just like <number>, except the number used is the aspect value calculated by user agents for the first font in the list of fonts defined for the initial value of the ‘font-family’ property. Effectively this is the default font used when ‘font-family’ is not otherwise specified.
Authors can use this value to specify that font size should be normalized across fonts based on the x-height without the need to specify the aspect ratio explicitly.
In my narrowed little world I thought, font-size-adjust is necessary, when your first choice of font doesn't load. Then you can adapt the size of the fallback font.
Now, how does the browser calculate the aspect value for a non-existing font? If it doesn't and isn't intended to, where did I take the wrong turn and what does auto really do?
The expression “the first font in the list of fonts defined for the initial value of the ‘font-family’ property” means the browser’s primary default font, typically (but of course not necessarily) Times New Roman. “Initial value” is something defined for every property in CSS specifications. It is usually browser-independent, but for font-family, it has explicitly been defined to be defined by the browser.
So the auto value in this case means the aspect ratio of that default font.
Assuming the user sets his default UA font to have the perfect legibility for himself, then any FSA:auto font would match that. In CSS the presumption is that the user (not the designer) is ultimately right, so this just goes along with that.
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.
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.