My screen looks good in IE8 under Windows XP. But when I open it in IE8 under Windows Server 2003, all text is more bold than in XP. I can apply styles to it, for example change font-weight in css, but in that case font weight changes under Windows XP too and in any case my screen looks differ.
This is likely to be related to the available fonts on the computer rather than the browser.
Check what font the text is trying to use, and what fonts are installed on both machines. If there's any missing one one machine you could install them, or just set the stylesheet to use a font that is available on both machines.
If you're only worried about those particular machines running IE8 (ie if it's a site on your own internal intranet) then that should be enough.
However if you're expecting the page to be viewed externally, bear in mind that an exact pixel-perfect match is no possible across all browsers and operating systems. For example, if a Mac user opens your page, they certainly won't have Ariel and Tahoma fonts installed. The browser will try to pick the closest match it has, but it will look different. There's no real way around that. Even changing the screen resolution will affect how your fonts look.
Related
I really don't know what to do so I hope that maybe one of you can find the solution for this issue:
https://www.schwitzen.bubblfy.com/
This wordpress website is shown different on Windows than on Mac. So on my Windows Computer I am using Google Chrome. And even on Firefox it is the same site.
But when I use the website on a MAC, it looks completely different. (Not the same font, not the same margin, etc..)
At the beginning I thougt, that maybe MAC's Safari Browser is the reason for this but even when I open Firefox on the MAX, it looks different. Why?
How can I adjust the site so, that it looks like on the Windows Version?
Hope you can help me!
Kind regards
The browsers use fonts preintsalled in operating system and display text via font-family css.
The different operating systems have different font families pre-installed, and when a certain font is missing, it is silently substituted with another. Moreover, the font that is used for substitution may be a native to the OS and specific to that particular OS only.
The same font size can be displayed differently on different OS.
Besides fonts, there might be other problems of different website view such as rendering engine(webkit, presto...), browser version, client operating system, browser-specific code and etc.
I know we could define #fontface to download web-font. However, this could be problematic especially for chinese fonts due to its large size.
Yet in modern system, it's likely that it already installed some pre-set fonts. For example, a Windows might already installed fonts like SimHei, SimSun, NSimSun, FangSong, KaiTi, a Mac might installed fonts like Hiragino Sans GB, STHeiti Light, STHeiti, STKaiti.
So is it possible for a web-app to know what font this system had installed?
Take a look here it was the closed I could find (it may not be performant):
list every font a user's browser can display
Goodluck
I have a case in which text inside a strong tag, is rendered with different widths on different Windows PCs.
I've checked the style with dev tool, they have the same font-family. DOC TYPE is at the beginning of document.
Other browsers are consistent (rule out font differences on PCs).
I understand that different browsers calculate things differently, but I wonder what is the problem with different PCs...
It seems however that font-weight:bold gives equal widths.
I see also that Chrome assignes a font-weight:bold to strong, from user-agent style sheet.
I don't know about IE.
I'll try to put a strong {font-family:bold} in my style sheet.
Anyone has exeperienced important style differences across different PCs?
thx
There is some cases that explain the difference, the render of the <strong> tag and font in the page may differ between versions of Windows.
A Firefox 3.6 on Windows XP and the same Firefox on Windows 7 should have some fonts differences because the native fonts installed in windows may be different. Be careful on the Service Pack versions too, it may differ from that as well.
Have you checked the default theme/font used on the both windows ? Have you checked if all the defaults of the browsers you test have been reset ? (font size, font style)... Is there a font smooth used software installed ? (like a skin or a theme ?). Like 'daGUY' as said, also check the ClearType.
I think the problem doesn't come from your code but from the font installed on the PC and i think it's the normal behavior you see.
What you should do for testing is apply your own font by using CSS #font-face. You will be sure that the font used is the same between computers. But the render should differ too.
I'm developing a very simple web site, with only one web page, but i need the one single page to look as it should in all the browsers. Now, for testing purposes, i have installed a bunch of web browsers on my windows 7 machine (FF, Chrome, Opera, Safari, Netscape etc.) and after doing some markup changes, i've got the same looking webpage on all the browsers.
Now the question is, does "the way" a browser renders a web-page depend on the operating system the browser is running on? Should I install linux (or other os) and test again or it will just be fine?
You should definitely be testing sites cross-platform, others may disagree, but the rendering is definitely different.
In addition to base-rendering, you may also be missing fonts, have alternate fonts with the same name, have anti-aliasing enabled/disabled on different platforms/configurations and much more.
To see exactly what I mean, on a base install of Windows 7 with Firefox 5, OSX with Firefox 5 and Linux with Firefox 5, when using the font 'Arial' or 'Verdana', you will clearly see the differences, even if those fonts do exist on all platforms.
On top of the differences you'd see above, even your positioning could be out if you're using non-absolute values (hell, even if you are using absolute values such as px it could be out!), so it's always best practice to check your sites cross-platform, it's as important as checking cross-browser, in my opinion.
Even if the same fonts exist on different OS they might look different.
So yes if you want to be sure that the page look satisfactional on the OS you should test..
As rudi_visser said, you should be doing cross-platform testing. It's a bit of a bother, but absolutely worth it.
You can start by using a service like browsershots.org to quickly check if your site looks ok. To check older versions of IE, Microsoft provides some virtual machine images you can run in Virtual PC to really test the sites. Alternatively, there's this site which is like browsershots.org, only faster and IE-only. Please note, that screenshot services are no substitute for actually testing the site on a certain platform/browser, but it's a quick way to see if something's working at all.
I would definitely recommend checking your site in the older versions of IE, since IE has a rich history of, well, not working quite right. IE9 (which I assume you're using) is a big improvement, but a lot of people are still on versions 6-8. Since IE6 was around for ~9 years without major changes, IE 7, 8 & 9 have each had a lot of catching-up to do, so they're all very different.
As for other browsers, their rendering is more consistent across versions, but they may not be consistent across platforms. Again as rudi_visser said, elements might shift around, and especially text can look different. For instance, Mac OS X uses a different font-smoothing technique from Windows, so a line of text may appear longer/shorter, bolder/lighter from one to the other. A cross-platform browser like Firefox will use the OS' font-rendering, so even though the browser's the same on the different platforms, it can still look different. (The exception is Safari on Windows, which, I think, insists on using Mac-like font-smoothing instead of Windows' own).
I have Din Engshrift and other obscure fonts installed on my machine where I do development. But when I try to access them from HTML, they look completely warped. Fonts like "Courier New" work fine. What causes that?
Using anything but standard-fonts is possibly only since very recently: http://www.tudy.ro/2008/09/02/embedded-web-fonts-are-back/.
It won't work in all browsers, though.
UPDATE:
This might be interesting, too: Typekit
DIN Engschrift is available in OTF, PS, and FF formats, for both the Mac and PC. It's possible that the browser you are using does not fully support the font format you have installed. Try adding the other formats, or try a different browser.
http://new.myfonts.com/fonts/urw/engschrift/
I assume you already realize that any HTML pages you make with unusual font5s will not render the same on a machine that lacks those fonts.
Supported fonts depend on the browser, though Firefox on my Mac apparently allows me to use any font available on my computer. However, since I am a Web developer and so I expect people who have different OSes to see my site, I am only using fonts that are "Windows/Mac Web-safe" (Mac OS X helpfully lists those as a collection in Font Book)
This isn't much, but world isn't ideal.
It's possible with CSS Fonts module to tell the browser to load a font you want (#font command), but the practical support isn't great.