Chinese Font On The Web Rendering Differently In Different Browsers

I've been displaying Chinese fonts on my Chrome browser on my Mac and I liked it. However the font is rendered differently in Firefox or when I use Chrome on Windows. Is there a wa

Solution 1:

You have various options:

1. As Art of FITZ says, specify an @font-face and have the font downloaded to the user (which will, indeed, take up a lot of bandwidth if the font is large)
2. As Jukka says, provide a list of font names in the font property and hope one of these is installed on the user's computer
3. The legacy method: render the text on your own computer in the font of your choice, upload this as an image file. If you don't have much text to display, this may be even more efficient than having an @font-face clause that downloads a multi-megabyte font file.
4. Tailor the @font-face to your needs: Depending on the amount of text to display, you may be able to create a font with only the subset of characters you need (with an online utility such as Font Squirrel), reducing the size of the font file to download.

Solution 2:

Here is a quick reference to how this line of code is used. http://www.css3.info/preview/web-fonts-with-font-face/

Solution 3:

Different browsers have different default fonts, but can can override this by setting font-family in CSS. Just remember that different computers have different sets of fonts available, so you should normally use a list of fonts, hopefully covering most browsing situations.

Maybe you have done so but see different results on different browsers. Please post a relevant part of the code and/or a URL then.