0

Hiall, I have some basic css using a class that has eg

 .myclass {
     font-family: Arial, sans-serif;
     letter-spacing: 0px;
 }

On the mac it looks great, but on windows the font loses some of its weight and also probably as a result it’s letter-spacing looks slightly increased.

Just wondering how can I target IE and finally Firefox, so I can make subtile changes to such things. I know I might not be able to get them spot on, but I’d like to at least have a try of seeing what increased font weight and decreased letter-spacing does for IE and FF etc.

I really haven’t had much to do with vendor prefixes before etc.

Any help would be great

bytecode77
  • 14,163
  • 30
  • 110
  • 141
TF35Lightning
  • 365
  • 3
  • 7
  • 22
  • possible duplicate of [Create CSS for Internet Explorer Only](http://stackoverflow.com/questions/12019725/create-css-for-internet-explorer-only) – deceze Mar 16 '15 at 10:51
  • possible duplicate of [Targeting only Firefox with CSS](http://stackoverflow.com/q/952861/476) – deceze Mar 16 '15 at 10:51

1 Answers1

1

This happens because the fonts are not exactly the same... The differences are coming from the fonts shipped with the operating system. One thing you could do, if you want/can, is to use another font that you would embed that is made to be exactly the same across platforms/browsers.

Here is a nice little gif that shows arial and verdana differences between mac and windows: http://fmforums.com/forum/topic/79795-cross-platform-fonts-revisited-arial-vs-verdana/

Here is a nice tutorial about web fonts: http://www.sitepoint.com/how-to-use-cross-browser-web-fonts-part-1/

The reality of getting web fonts to work across browsers is a little different. Different browsers support a slightly different set of font formats, so you need to provide a set of alternatives.

Web Open Font Format (.woff): For all modern browsers Embedded Open Type: For older versions of Internet Explorer (IE< =8) SVG fonts: For older versions of iOS Safari (3.2-4.1) Truetype fonts: For older versions of the default android browser

Salketer
  • 14,263
  • 2
  • 30
  • 58
  • thankyou @salketer for that handy information the gif was excellent was actually going to create something like that myself, yes I have also only just started using webfonts also... can you tell me when using ATfont-face why or what makes it render the fonts so nicely with anti-aliasing??? I don't understand why this happenes, compared to just calling a font from font-family etc. – TF35Lightning Mar 16 '15 at 12:16
  • Also what would be ideal for my situation is do you know of any websites that shows the closet webfont for a traditional font like Arial etc, the current site I worked on I used Arial narrow and was hoping to use a webfont to replicate it but haven't really been successful so far, using Roboto Condensed is the closet, thanks again! – TF35Lightning Mar 16 '15 at 12:17
  • I am far from being an expert in the subject, I really just hoped to point you at the right direction... You could have a walk through google fonts, there are thousands of web-ready fonts there. The ATfont-face is used to describe (create) a font face to be used in the CSS... The better the font you are using the better it will look. – Salketer Mar 16 '15 at 12:20
  • Hi again @Salketer my basic observation is that every webfont I have tried on my WIndows machine renders a lot skinner/stick like almost non antialised in the fonts like "Source Sans" and "Open Sans" in the default weights of 300 etc compared to the Mac where they look nice and anti-aliased. Then if I try a more weighty/thicker slab font like "bebas-neue" again it's skinner on Windows but holds holds itself better than those fonts i mentioned, guess I'll keep researching and experimenting – TF35Lightning Mar 16 '15 at 13:35
  • Are you testing them both on the same screen? Screen precision also plays a role in fonts display... That would explain your antialised feel. – Salketer Mar 16 '15 at 13:50