文章/答案/技术大牛

发布

社区首页 >问答首页 >@字体-字体不正确显示特定字体

问@字体-字体不正确显示特定字体
EN

Stack Overflow用户

提问于 2014-02-08 15:44:00

回答 1查看 375关注 0票数 1

我们试图在相同的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-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';}

从参考链接下载字体：单击此处

html

css

font-face

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-02-08 15:57:42

假设您的字体合法可嵌入web嵌入，您可以访问此处http://www.fontsquirrel.com/tools/webfont-generator，然后上传字体..tff的

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

一旦处理完所有的字形，您可以单击“下载工具包”按钮，然后打开zip存档，其中包含如何使用@字体面板嵌入字体的有用示例。

如果打开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文件中的文件。(例如，./字体/你的字体-webfont.eot等)

希望这能有所帮助。

Adobehttps://typekit.com/也是一个很好的选择：https://typekit.com/，并且省去了这个定制嵌入的麻烦。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21648019

复制

相似问题

问@字体-字体不正确显示特定字体
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@字体-字体不正确显示特定字体EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@字体-字体不正确显示特定字体
EN