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

【问题标题】：@font-face not displaying correctly for particular font@font-face 无法正确显示特定字体
【发布时间】：2014-04-30 02:16:15
【问题描述】：

我们正在尝试在相同的 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 时，可以正确查看，而第一个 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

【问题讨论】：

标签： html css font-face

【解决方案1】：

假设您的字体可以合法嵌入网络嵌入，您可以前往http://www.fontsquirrel.com/tools/webfont-generator，然后上传您的字体 .tff

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

处理完所有字形后，您可以单击“下载您的工具包”按钮，然后打开包含一个可用示例的 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/ 并省去了这种自定义嵌入的麻烦。

【讨论】：