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.
Related
[Problem] -- I am having a problem with web fonts rendering on a specific computer, other computers in my house render the text fine (same OS and browser versions). They look really bad and pix-elated I know all about differences between how browsers render things differently but its not supposed to look this bad.
[What I've Tried] -- I tried prioritizing the .svg in my CSS first on my site to fix it on Google Chrome but it did not help. I installed Firefox and discovered it too does not render the Open Sans font correctly either. I also have tried clearing my cache (I have a cache clearing plugin) and opening in a incognito window thinking a chrome extension was causing a problem but no difference. From the screen shot it appears Chrome at least renders the larger "Open Sans Condensed" but the smaller text is pixelated. Its weird a fresh install of FF also has the same problem as Chrome. Also tried downloading the font files from Google Fonts and installing them locally, no difference.
IE 11 renders the text correctly. I need trouble shooting ideas..
The screen shot below is from the official Google Fonts website located here http://www.google.com/fonts/specimen/Open+Sans#pairings so it should rule out any bad coding on my own page. The open sans font on fontsquirrel loads correctly and its not pix-elated.
Here is what I see and I don't think the fonts should look that pixelated... http://imgur.com/hwvupBq sorry too low rep to post images :(
Each browser loads the fonts using different formats. Usually you would use font-face with the four different types, EOT, WOFF, SVG AND TTF. You can use the Font Squirrel site to load your font and spit out the four different versions. Also, take a look at Google font embedding which takes care of the the work (although they will look slightly different in different browsers)
The problem ended up being that my Windows 7 machine did not have cleartype enabled. See this post to see how to enable it http://www.howtogeek.com/howto/28790/tweak-cleartype-in-windows-7/
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 am working on a beautiful book for the iPad together with an artist/designer, and we would like it to look perfect.
I am using HTML to lay out the pages, and i noticed that they look slightly different in a browser, in a simulator and on the actual iPad (the paragraphs are broken into lines a bit differently, most probably because the glyphs in the fonts are rendered a bit differently).
Can i be sure that my book will look the same on all iPads? (That is if I use HTML, and not, say, PDF). Should I supply fonts together with the app, or can I rely on the system fonts? Is it better to specify the font size in pt or cm?
UPD: I am using UIWebViews.
Thanks in advance,
Timofey.
You can never quite be 100% sure that a HTML page will look the same across all browsers on all platforms, although cross browser compatibility is generally improving with each browser version - those of us who have been doing this since the days of IE6 will remember those days with a shudder!
What helps with the iPad however is that its the same device, same screen resolution and running the same software (iOS and Safari), so if you test it on an iPad in that configuration, it will look the same on all others.
However a word of caution - you can get the Firefox browser for iPad, and all software - including iOS and Safari is subject to change and upgrades, and subject to the fact that people can also be running out of date versions if they don't plug in and sync very often.
Of course, any upgrades are not guaranteed to change the HTML rendering engine, i'm just saying its possible.
The best thing to do is ensure you keep most of your styling in CSS, so that if say, iOS 5, or iPad 3 did something unexpected down the line - you can make simple edits across the whole site/book without having to edit every page of it.
There is a CSS 3.0 feature, which allows you to specify a font for your web page elements, that is to make sure it looks the same on all browsers/operating systems, even if they don't have the same fonts installed:
http://www.w3.org/TR/css3-fonts/#font-resources
http://www.css3.info/preview/web-fonts-with-font-face/
Concerning other elements - it is CSS hacks again, you have to see what the differences are, and try deal with each problem individually, depending on the browser. iPad's are using a mobile version of Safari by default, but Opera also have a mobile browser for iOS devices.
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.
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.