外部字体在Foundation.Zurb CSS中不起作用 [英] external font does not work in Foundation.Zurb CSS

问题描述

我想添加外部字体Droid Serif，并将fontface放在foundation.css文件中。
这里是代码

  @ font-face {font-family：'MyWebFont'; 
 src：url（'../ font / DroidSerif-Bold-webfont.eot'）; 
 src：url（'../ font / droid-bold / DroidSerif-Bold-webfont.eot？iefix'）format（'eot'），
 url（'../ font / droid- （'truetype'）格式（'woff'），
 url（'../ font / droid-bold / DroidSerif-Bold-webfont.ttf'）， 
 url（'../ font / DroidSerif-Bold-webfont.svg＃webfont'）format（'svg'）; } 
  

现在，我在主体中调用名称

  body {
 background：#edebda; 
颜色：＃222222; 
 padding：0; 
保证金：0; 
 font-family：MyWebFont，Helvetica Neue，Helvetica，Helvetica，Arial，sans-serif; 
 font-weight：normal; 
 font-style：normal; 
 line-height：1; 
职位：亲属; 
 cursor：default; } 
  

但它不会采用字体？为什么这样？我检查了文件的路径，我确定它的权利。基金会的工作方式有什么问题吗？
我真的需要你的帮助！

解决方案

您的字体代码对我来说似乎很好...

您是否尝试将这些字体属性应用于单个项目（而不是正文）？例如，将它们放在类名称（.apply-font）中并将其应用于div或跨度。它有效吗？如果没有，也许你的字体文件存在路径问题。但是你确定这不是问题......如果它有效，它可能是你的身体定义在它编译之前由zurb创建的身体之前文件_globals.scss，第二个覆盖第一个。要测试这是否是问题，您可以使用！important重要声明到您的字体系列。这就是说它声明的地方并不重要，这是一个可以使用的地方。

i want to add external font "Droid Serif" and i put the fontface in the foundation.css file. here is the code

@font-face{ font-family: 'MyWebFont'; 
    src: url('../font/DroidSerif-Bold-webfont.eot'); 
    src: url('../font/droid-bold/DroidSerif-Bold-webfont.eot?iefix') format('eot'),
         url('../font/droid-bold/DroidSerif-Bold-webfont.woff') format('woff'), 
         url('../font/droid-bold/DroidSerif-Bold-webfont.ttf') format('truetype'), 
         url('../font/DroidSerif-Bold-webfont.svg#webfont') format('svg'); }

now, i call the name in body

body {
  background: #edebda;
  color: #222222;
  padding: 0;
  margin: 0;
  font-family: "MyWebFont","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
  cursor: default; }

but it wont take the font ? why is it so? I 've checked the path of the file and i am sure its right. is there anything wrong with the way foundation works? i really need your help ppl !

解决方案

I've done it with Zurb Foundation without problems. Your font-face code seems good to me...

Have you tried to apply these font properties to a single item (not to body)? For example, enclose them into a class name (.apply-font) and apply it to a div or a span. Does it works? If not, maybe there's a path problem to your font files. But you're sure that's not the problem...

If it works, it could be that your body definition goes before the body one created by zurb when it compiles the file _globals.scss, and the second one overrides the first. To test if that's the problem, you could use the !important declaration to your font-family. This is the way to say that it doesn't matter where it's declared, this is the one to use.

这篇关于外部字体在Foundation.Zurb CSS中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！