Internet Explorer (at least IE 8) won't resize my text when the following class is used:
a {
font: normal 12px Verdana;
}
You can see what I mean in the browser under View -> Text Size - Largest
What is the best way to format text so that it is resizable? I read that em can be used, but is there another way without changing the sizes that I've already set?
The best way to make text resizable is to not set font size at all. You should probably consider using a font other than Verdana then, because you probably think it is ugly in typical default font sizes, and this is why you are creating the problem.
If you set font size in pixels, then the logical interpretation, applied by some old browsers, is that you mean what you say – your settings can still be overridden, but not by the usual font size settings available to users.
Related
I have created a web page using 14px as body font size. It is rendering properly in my system (windows font size set to 100%) but when someone else , whose windows font size is set to (150%) - as recommended by Windows, Web page is coming too large(everything is enlarged). Is there any way to resize (font scale) the page or manage the page so that content will come properly.
Try to use different font-scaling methods - such as em which relies on the container element (the body in your case). To my knowledge, this should alter the size of the font depending on the system font size, resolution etc.. Good luck.
I noticed a strange bug (at least on WebKit) on a website I designed with custom fonts (via Typekit) and CSS columns. The text has some additional font feature settings ("calt", "liga", "clig", "kern", "onum") which I've discovered to be the trigger.
The columns have column-width and column-gap settings. When the browser window is resized so that only one column can be displayed, text is not displayed correctly (see attached pictures). I figure that the length of the paragraph is calculated before kerning and/or ligatures are applied, thus forcing some text to display outside of its container. Disabling the font feature setting clears the unwanted effect.
Is this a bug? Has anyone noticed this behavior before? Is there a known solution?
I have to use fixed height for certain layout (google maps with form in the sidebar) elements and I noticed that 600px height in Firefox is much much bigger than in other browsers (Chrome, IE 8). The Firefox 600 px is actually displayed as cca 690 px! Even the google map tiles are rescaled, so they display the same in both FF and Chrome. And even the Web developer toolbar / Misc / Ruler shows 600 px instead.
How is that possible? Which setting is doing that? I thought that pixel is quite clear unit and it is reliable to be a real pixel.
Can I reset it for Firefox to the normal height, so that it looks the same in all browsers? I have problems with this because in Firefox everything can fit into those "600" (= 690) pixels, but not in other browsers. I would like the size to be similar compared to form fields that can actually fit in.
Is it desirable to do it? Or not because it will also break the sizes of everything else (font size) which users are already used to, it can break the browser settings and user expectations related to other sites etc.
PS: Note that I already did Ctrl-0 (or menu view > zoom > reset) in FF and similarly in Chrome.
I ran into a similar issue where every element on Firefox (OSX) was smaller than any other browser (OSX or PC). I realized the problem came from the font-sizing I gave in my CSS.
I was able to solve the issue (on my own site at least) by changing:
html{
font: 1em/1.5 Helvetica, Arial, sans-serif;
}
to
html{
font: 16px/1.5 Helvetica, Arial, sans-serif;
}
I was using ems to scale a lot of my content, and I guess if you don't specify how big an em is, Firefox will make it up on its own sizing rules.
I'm using the bodonixt font for a website, and if the font size is set to less than 24.5px, the font is uneven. If I view the site on a Mac, the font is okay, on PC it isn't. It looks weird on all browsers too. Is there any way I can fix this with css?
You can see what I mean here: www.fredgranados.com
It depends on how the font is hinted (optimized). A font is a series of vector images. The vector shape doesn't necessarily fit to exact pixels, so the browser/OS/renderer should determine whether a pixel should become black or white (or a shade of grey, in case of anti-aliasing). To do this right, the font can contain Hinting information, which helps the renderer making the right choices when drawing the font. Often, fonts are only optimized (hinted) for specific font sizes, and specific targets, because this process is expensive and hard, and also makes the font file larger.
I've downloaded the Bodoni XT font on DaFont, and I wasn't really impressed by the quality of the smaller sizes when opening it in the font previewer in Windows. For instance, the serifs of some letters were completely missing in smaller sizes.
In general, it looks like this font just isn't made too well, or it is only optimized for printing and/or displaying in large font sizes.
Maybe the font is better optimized for Mac, or the Mac is better at displaying fonts like these. Anyway, if you would like this to work on other OSes as well, you'll need a better version, or a different font altogether. I've inspected some other fonts by Manfred Klein, and most of his serif fonts seem to have similar issues when displayed in smaller sizes.
Is it a webfont? Meaning you're loading it via CSS? If so, that's just how it is. Every browser, every OS, every user set of system and/or user preferences may cause the font to render slightly differently.
If it's not a webfont, the same issues as above apply, but you have the added issue that not everyone will necessarily have that font installed, or if they do, they may have a different version of the font.
I'm working on a web page that will run in IE7+ and support English and Japanese language, and I have a little problem with the font size.
On my development machine I'm using IE 9 and I also have 2 other test machines with IE8.The webpage has the X-UA-Compatible set to IE=7.
I have to allow in a span element , that has a fixed width and height, only 12 Kanji characters.
And I've thought to set the overflow of the span to hidden, and set the font size, by trial and error, so that the 12 Kanji characters will fit in the span on 2 rows.
I change the language to Japan[ja-JP] form internet options, and on my dev machine it looks how i what it, and the same goes for one of my testing machines, but for the other test machine the font size is a little bigger. The TextSize and Encoding are the same in all browsers.
I've tried setting the font size in px, em and pt, but the difference in the visual size of the font is still there.
Any thoughts on what might be the cause of this?
You cannot do this, because you cannot know what fonts will be installed on the end-users pc. Of course you could make a good guess (if you're specifically targeting IE7, chances are there are fonts that are available anyway).
But even then, it could depend on dpi settings of the user. Also, decent browser allow you to adapt font sizes without zooming the screen. So you will have to find a size that works in 95% of the cases, and leave some margin.
If you really need it pixel-perfect, you need an image instead of text (though I would still advise against it). Just embrace the fact that you cannot 100% say what a page will look like on the client.
If it is a browser based problem, then it can be fixed by detecting which browser/version it is, then add a CSS script (use Javascript to do this) depending on which browser it is, with each CSS script containing a different value for the font-size etc.
(BTW I can't help you apart from that, you will need to do further research elsewhere)
You should use an image instead of text. You can generate it on the fly using server's fonts.