Skip navigation
Currently Being Moderated

Insert chinese font using css?

May 9, 2012 3:31 AM

Tags: #font #character #chinese #typeface

How do insert default chinese font into my website using css, and what are the web-safe chinese font available?

 

let say I have my dafault english font set like this

 

body{

          font-family:Arial, Helvetica, sans-serif;

}

 

where do I add in the chinese font?

 

I try doing like this

 

body{

     font-family:Arial, "黑体" ,Helvetica, sans-serif;

}

 

But it doesnt seem to be working...

 
Replies
  • Currently Being Moderated
    May 9, 2012 6:48 AM   in reply to vincentccw

    I don't have experience with Chinese (only Japanese), but I found this useful article: http://yukikodesign.com/orangutangy/?p=191. It suggests that your font stack is OK for Chinese, but only on Windows.

     

    Another article that I found at http://graficareal.net/blog/wordpress-sinotype-websafe-chinese-plugin/ suggest adding Hei, SimSun to the font stack for Mac/Windows compatibility:

     

    font-family: Arial, Helvetica, Hei, SimSun, sans-serif;

     

    It's possible that your font stack isn't working because the Chinese characters for the font name aren't encoded correctly. I remember reading some time ago in the CSS specifications that browsers must also respect the romanized version of Asian font names. So, it might be a good idea to try that.

     

    The other point is that you must have the relevant font(s) on your computer to see them rendered.

     
    |
    Mark as:
  • Currently Being Moderated
    May 10, 2012 1:21 PM   in reply to vincentccw

    Hey guys,

     

    I'm having the same problem. When I'm writing code and viewing my page in dreamweaver, all the chinese characters are visible.. but when I goto view in a browser, they all show up as wingdings or similar. I even tried stacking a whole bunch of fonts

     

    font-family: arial, Hei, SimSun, 宋体, 黑体, 黑体, 微软雅黑, 宋体, sans-serif;

     

    but to no avail. I'm not sure if my browser's language settings include international languages, but that just makes me question why websites like www.yahoo.com.tw display perfectly fine for me ?

     

    Pardon me for being a noob!

     
    |
    Mark as:
  • Currently Being Moderated
    May 10, 2012 8:13 PM   in reply to vincentccw

    Hey vincent, thanks for your reply. The website you referenced has everything I need. However, i am making this website as I learn HTML/CSS, so everything is really new for me and I don't have a very deep understanding of all the attributes. This is what some of my code looks like:

     

     

    <!DOCTYPE html>

     

    <head>

     

    <title>About</title>

    <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />

    </head>

     

     

     

    <body>

     

    <div id="outer">

     

        <div id="wrapper">

     

     

            <div id="banner">

            <h1 id="chi1">首頁</h1>

            <h1 id="eng1">Welcome</h1>

            </div>

       

          

            <div id="topnav">

                <ul id="left">

                <li><a href="home.html">HOME</a></li>

                <li><a href="about.html">ABOUT</a></li>

                   <li><a href="events.html">EVENTS</a></li>

                   <li><a href="pictures.html">PICTURES</a></li>

                    <li><a href="media.html">MEDIA</a></li>

                <li><a href="contact.html">CONTACT</a></li>

                </ul>

           

                  <ul id="right">

                 <li><a href="home.html">首頁</a></li>

                <li><a href="about.html">有關</a></li>

                <li><a href="events.html">事件</a></li>

                   <li><a href="pictures.html">照片</a></li>

                <li><a href="media.html">媒體</a></li>

                <li><a href="contact.html">連絡</a></li>

                </ul>

            </div>

     

    So as you can see, I have a bilingual webpage. If i understand correctly, i can either define the language as english and then later define the chinese parts, or just define the chinese parts? I'm lost, hopefully someone can help!

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 12:38 PM   in reply to vincentccw

    Thanks vincent! That solved the problem. The tutorial I've been learning from told me to erase all that stuff for the time being; I guess it was meant to be as least confusing as possible.  But yes, all the characters seem to be showing up now.

     

    So does it seem that my code is fine/correct? I set the font in CSS using the tag ID "chi" everytime I need to call for chinese text. Does this seem like the correct method?

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points