Is it possible to display text with different fonts in the same HTML file without needing to install them on the device?
For example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../fonts/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body >
<div>
<div class="e_content ">
<div class="e_number">1.</div>
<div class="e_text"> <a href="../../chapters/english/v/v1/v1_1.html"> Bh¤µ¤Ô¤Â×Ô¤ßuȤÌÚÙ ¤´a¢¿¤ÔßuÂÂÛ ÏÚ´¤ÔÚ ÔÛÖá. </a> </div>
</div>
<div class="e_content1">
<div class="e_number1">2.</div>
<div class="e_text1"> <a href="../../chapters/english/v/v1/v1_2.html"> »ÜU¢ïùãæ Ï¢ãéS²¢æ Ðí…¢²ï² </a> </div>
</div>
</div>
</body>
</html>
In this example, the first div uses Trans.ttf font and the second div uses AnamikaTwo.ttf font as defined in StyleSheet.css. However, when viewed, the second div is displayed correctly while the first one is not.
The font-face definitions in Stylesheet.css are:
@font-face
{
font-family: "AnamikaTwo";
src: url('AnamikaTwo.ttf'); format("truetype");
}
@font-face
{
font-family: "Trans";
src: url('Trans.ttf'); format("truetype");
}
.e_number { float:left; background:url(index-number-bg.png) no-repeat left top; width:45px; height:50px; line-height:30px; text-align:center; color:#6a2525; font-family:"Trans"; margin:0px 10px 0px 10px;}
.e_content {float:left; width:100%; margin:1px 0px 0px 0px; padding:8px 0; background:#fdeec5;text-align:left;border-bottom: 1px solid #E4D4AA; opacity:0.6;}
.e_text a {color:#6a2525; text-decoration:none; font-family:'Trans';}
.e_number1 { float:left; background:url(index-number-bg.png) no-repeat left top; width:45px; height:50px; line-height:30px; text-align:center; color:#6a2525; font-family:"AnamikaTwo"; margin:0px 10px 0px 10px;}
.e_content1 {float:left; width:100%; margin:1px 0px 0px 0px; padding:8px 0; background:#fdeec5;text-align:left;border-bottom: 1px solid #E4D4AA; opacity:0.6;}
.e_text1 a {color:#6a2525; text-decoration:none; font-family:'AnamikaTwo';}
Download fonts from the link for reference: click here