CODEWITHSUNDEEP
htmlcss
KexAri
KexAri

Reputation: 3977

How do I use a traditional Chinese font in css?

I am trying to display some text in traditional Chinese on my site ie

HTML:

<div id = "shareText">好</div>

CSS:

#shareText
{
    position: absolute;
    right: 125px;
    padding: 20px 0 0 0;
    color: #a9a4a4;
    font-size: 25px;
}

However the output character I'm getting is: 好. I tired changing the font like this:

#shareText
{
    position: absolute;
    right: 125px;
    padding: 20px 0 0 0;
    color: #a9a4a4;
    font-size: 25px;
    font-family: "微軟正黑體", "Microsoft JhengHei",  Tahoma , Verdana , Arial , sans-serif;
}

However the character remains the same. What am I doing wrong? Is it something to do with the coding of the html file? I tried changing from unicode 8 to 16, the character appears but I lose all formatting, all my divs are in the wrong place..

Upvotes: 5

Views: 7826

Answers (2)

pcs
pcs

Reputation: 1854

For traditional chinese,

You have to use, <html lang="zh-Hant">

Full code:

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="utf-8" />
    <title>Chinese</title>

    <style>
#shareText{

    position: absolute;
    right:125px;
    padding: 20px 0 0 0;
    color: #a9a4a4;
   font-size: 25px;
}   
    </style>
</head>
<body>
<div id = "shareText">好</div>
</body>
</html>

Note: I ran above code, it works fine.

Upvotes: 1

James Newton
James Newton

Reputation: 7082

This displays correctly for me. Note the <meta charset="utf-8" /> tag in the head.

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <title>Chinese</title>

    <style>
#shareText{

    position: absolute;
    right:125px;
    padding: 20px 0 0 0;
    color: #a9a4a4;
   font-size: 25px;
}   
    </style>
</head>
<body>
<div id = "shareText">好</div>
</body>
</html>

Upvotes: 4

Related Questions