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.
Related
On my GNU/Linux box running KDE, I've set the DPI value of X11 by using the command
xrandr --fbmm 332x207
to 129x129 (as reported by xdpyinfo). Google Chrome 46, contrary to Firefox 42, unpleasantly scales up font sizes given in px with e.g.
<p style="font-size: 9px;">...</p>
I can understand the reasons for doing that – far too much badly designed web pages use font sizes in px where they actually should use em or percentages to be ready for today's multitude of different browsers and screen resolutions. However, I absolutely need correct px values for generating a font waterfall to test a font's rendering at different sizes.
What can I do to fix this?
To answer my own question: the solution is to use Chrome's --force-device-scale-factor option.
google-chrome-stable --force-device-scale-factor=1
On my webpage, I use images that are 720px by 480px. If I look at them in Firefox or IE (latest version) however they look scaled up, they are considerably larger on the screen than their original version in Lightroom. If I look at the dimensions of the picture on the web though, it says that it is 720x480. If I want the files to be as big as they should be, then I have to set the width-property to 600px, which I think is odd..
The webpage uses Bootstrap 3.3.4.
There may be styles being applied by Bootstrap or something else, which are causing the issue. If you look in the inspector of your browser, it will show you all of the rules that apply to a given element. Also, your browser may be zoomed. The shortcut to reset it to default is usually Ctrl-0, though there is also usually also an option listed in the menus.
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.
Sincerely hope someone can provide solution for this.
Normal zooming by holding Ctrl + Scroll (or +/-) is useful but it just doesn't work in certain part of some sites.
For example:
http://www.freemalaysiatoday.com/category/living/2012/04/02/malaysias-top-rock-act-blister/
As you can see, zooming in and out has no effect at all to the text in the comments using facebook account. This problem only happen to Chrome but not IE or firefox.
No matter how large other font becomes, the size of the font (yes, font only) in comments remained unchanged and this is annoying.
Any solution please?
Look at:
http://code.google.com/p/chromium/issues/detail?id=104083
It can be achieved with the css rule -webkit-text-size-adjust: none;.
If one wants to disable it, the link also contains a solution in step 8, using an extension CSS rules are inserted in all pages which override this
I'm creating an HTML/CSS site and I have the font size adjusted the way I want it when I look at the site on Firefox in Windows (which is what I'm developing on). But when I look at the site in OS X (either Safari or FF), the font size is too big. Not massively bigger, but bigger than my client wants. But if I reduce the font any more, it's going to be too small for Windows machines.
I'm specifying all font sizes in ems in my CSS doc.
I realize that different browsers and platforms render things differently, and there's no way to control exactly how the page will look. But this seems like a pretty big issue and I'm wondering if there is some simple solution that I should know about. And if not, what is the complicated solution?
Thanks in advance.
Use pixel values instead of ems.