html - 外部字体在 Foundation.Zurb CSS 中不起作用

Question

我想添加外部字体“Droid Serif”并将字体放在 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-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'); }

现在，我在正文中称呼这个名字

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

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

Answer 1

我已经在 Zurb Foundation 上顺利完成了。你的字体代码对我来说似乎不错......

您是否尝试过将这些字体属性应用于单个元素(而不是正文)？例如，将它们包含在类名 (.apply-font) 中并将其应用于 div 或 span。它有效吗？如果不是，则可能是您的字体文件存在路径问题。但你确定这不是问题所在......

如果有效，则可能是您的主体定义在 zurb 编译文件 _globals.scss 时创建的主体之前，第二个覆盖了第一个。要测试这是否是问题所在，您可以对字体系列使用 !important 声明。这就是说无论在何处声明都无关紧要，这就是要使用的方式。