在语义u

Question

我尝试通过 semantic-ui 创建网站，我的编辑器 Sublime Text 2 ，我的虚拟服务器ix XAMPP < / strong>即可。 我需要为全身文本使用自定义字体。 我已经创建了一个main.css文件（当然是在头部链接），我已经把这样的字体：

@font-face {
    font-family: "Dinar One Medium_MRT";
    src:url('../fonts/Dinar One Medium_MRT.ttf') format('truetype');
}

我创建了另一个名为 body 的代码段，它就像：

body{
    font-family:'Dinar One Medium_MRT';
    margin: 0;
    padding: 0;
}

但是当我运行网站时，我的字体不会应用于文本。我尝试过很多东西但是没有用。 我感谢任何帮助。 tnx你的时间！

Answer 1

以下是可以帮助您解决此问题的通用方法：

一个。首先检查semantic-ui.css文件是否在自定义css文件之前加载。您的自定义css文件必须在语义之后加载才能具有更高的优先级。

湾Font属性是可继承的CSS属性。这意味着如果您已将其应用于body标记，那么所有html元素都将从body标签继承它，前提是没有中间元素具有指定的font-family属性的不同值。确保DOM中不存在此类元素。此外，您的字体文件应显示在200状态的网络选项卡中。

℃。计算元素的字体系列属性的特殊性。有时，即使在下载新字体后我们也没有得到预期的结果，因为我们的字体系列具有较低的特异性（优先级）。

Answer 2

由于您要覆盖正文中的所有字体，您只需要将site.overrisides文件与位于src / site / globals中的site.variables文件一起使用

在site.variables中，设置@fontname变量

@fontName : fontname;

在site.overrides文件中，插入@ font-face css规则

@font-face { 
  font-family: fontname; 
  src:url('/link/to/font/fontname.ttf'); 
}

您当然需要在node.js中运行gulp-watch并保存这些更改