Question

我们试图在相同的html文件中显示不同字体的文本，而不将其安装在设备中。

示例：

<!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>

在示例中，第一个div使用Trans.ttf，第二个div使用在StyleSheet.css中定义的AnamikaTwo.ttf。但是，虽然查看第二个div是正确的，但首先没有正确显示。

在Stylesheet.css中将font-face定义为：

@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';}

从链接下载字体以供参考：click here

Answer 1

假设您的字体可以合法嵌入网页嵌入，您可以转到此处http://www.fontsquirrel.com/tools/webfont-generator，然后上传您的字体.tff's

选择“最佳”，或者您还可以访问特定嵌入选项的“专家”设置，如果您只需要某些类型变体并希望节省加载时间，这些设置特别有用。

完成所有字形的处理后，您可以点击“下载工具包”按钮，然后打开包含一个可用示例的zip存档，该示例现在使用@ font-face

来嵌入字体

如果打开stylesheet.css，你会看到如下内容：

@font-face {
font-family: 'yourfont';
src: url('yourfont-webfont.eot');
src: url('yourfont-webfont.eot?#iefix') format('embedded-opentype'),
     url('yourfont-webfont.woff') format('woff'),
     url('yourfont-webfont.ttf') format('truetype'),
     url('yourfont-webfont.svg#yourfont') format('svg');
font-weight: normal;
font-style: normal;
}

请记住，如果将字体上传到/ fonts目录，则需要在css文件中正确引用这些文件。（例如，.. / font / yourfont-webfont.eot等）

希望这会有所帮助。

Adobe TypeKit也是一个不错的选择：https://typekit.com/并省去了这种自定义嵌入的麻烦。

@ font-face无法正确显示特定字体

1 个答案: