Font turns up very slim

I开发者_运维问答n Photoshop my font turns up normal but when I code it in HTML and test it out in my browser (Chrome) it turns up very slim. Here is a picture of what I mean:

What do I have to code in CSS to make it turn up the same as it is in Photoshop? And note that the font in Photoshop hasn't got any styles on it.

---

Right now, there's not a lot you can do to make it look the same as it does in Photoshop.

At this exact moment in time, there aren't many browsers that support the necessary CSS properties that tell the browser how you'd prefer the type elements on your page to be rendered.

For example, some WebKit browsers support something similar to the proposed font-smooth CSS property – see Max Voltar's post on font-smoothing.

However, it's always worth remembering that your visitors aren't using Photoshop to view your website, so you should never expect an exact pixel-for-pixel copy of your Photoshop results to appear in the browser.

Every browser and operating system – and the combinations thereof – render type differently. Windows with ClearType turned off, Windows with ClearType turned on, IE9 with DirectDraw, Firefox, Chrome, Safari – you name it, they all treat type differently. If you're checking your designs across multiple browsers on multiple platforms, you'll see this.

My advice: don't sweat it.

Additionally, your design appears to be using Myriad – presumably you're using a @font-face rule to show this to end users who don't have Myriad installed on their system. Because if you're not, be prepared for it to look even more different.

---

Here's what I think your looking for: Photoshop Mock Up Font isn't same as in HTML

You can play with the font-weight.

---

What is the OS version on your Photoshop computer? What is the Chrome version you are using? Is it on the same computer? Did you do a cross-browser test?

Browsers sometime render the fonts themselves. Safari was known to render it's font with Apple-style aliasing on Windows (not in the latest release). Font aliasing can be different accross OS and accross browsers.

The font must exist on both OS.

Pixel size will also matter.

Font smoothing explained

Browser font rendering and antialiasing – Windows vs. Mac

Carl

---

Use images instead of text then everyone will see it the same way.