代码之家 › 专栏 › 技术社区 › Vishal Parekh

@字体正面未正确显示特定字体

font-face css html

1

Vishal Parekh · 技术社区 · 11 年前

我们正在尝试在相同的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。

在Stylesheet.css中,字体面定义为:

@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

1 回复 | 直到 11 年前

1

3

zanuka 11 年前

假设您的字体可以合法嵌入web嵌入,您可以转到此处 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/ 并且省去了这种定制嵌入的麻烦。