How to use traditional chinese font in css?
I am trying to display some Traditional Chinese text on my site i.e.
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 get is: å ¥ ½. I'm tired of 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 symbol remains unchanged. What am I doing wrong? Does it have something to do with encoding the html file? I tried to go from unicode 8 to 16, a character appears, but I lose all formatting, all my divs are in the wrong place.
+3
source to share
2 answers
This displays correctly for me. Pay attention to the tag <meta charset="utf-8" />
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>
+1
source to share
For Traditional Chinese
You must use <html lang="zh-Hant">
Complete 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 through the code, it works great.
+1
source to share