Css 使用@font-face更改语义界面中的默认字体

我想用@font-face更改语义用户界面默认字体，但不管

我尝试在较少的文件（site.variables）中进行更改，但不知道如何更改它

我尝试将我的字体添加到其他自定义css文件中，但不起作用

@font-face  {
    font-family: 'fontname';
    src:url('themes/basic/assets/fonts/fontname.eot'); 
    src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'),    
          url('themes/basic/assets/fonts/fontname.woff') format('woff');
}
body{
    font-family: 'fontname';
}

---

您可以执行以下操作：

• 将以下内容添加到.css文件：

  @font-face  {
      font-family: 'fontname';
      src:url('themes/basic/assets/fonts/fontname.eot'); 
      src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'),    
          url('themes/basic/assets/fonts/fontname.woff') format('woff');
  }
  

• 在语义的site.min.css之前导入上述代码

• 将@fontName更改为“fontName”

• @importGoogleFonts应该为false，因为您不想从Google导入任何字体

---

默认情况下，上述内容将应用于正文

我知道两种更改字体的方法，即使用谷歌字体或脱机字体：

使用谷歌字体：

我们需要语义UI的资源，您可以在这里获得：

需要在

semantic/src/site/globals/

我们搜索我们最喜欢的源代码并复制名称

在文件

site.variables

中，我们将字体名称添加到变量

@fontName

中，如下所示：

最后我们执行命令

glup build css

，更改将反映在文件semantic

/dist/semantic.css

---

使用脱机字体

我们需要语义UI的资源，您可以在这里获得：

需要在

semantic/src/site/globals/

在文件

site.variables

中，我们添加了值为

false

的变量

@importGoogleFonts

需要在

semantic/src/site/globals/

在文件

site.overrides

中，我们添加了

字体

最后，我们执行命令

gulpbuildcss

，更改将反映在文件semantic

/dist/semantic.css

---

这段视频由谷歌制作，解释如何从谷歌字体改变字体系列

在下一期中，解释如何使用脱机字体

---

这是个老问题，但我只想补充一件事

因为所有语义UI元素都继承了

UI

类，所以可以这样做：

.ui {
   font-family: 'fontname' !important;
}

---

不是很优雅，但它可以工作。

你能发布你对site.variables文件所做的确切更改吗（以及你到底更改了哪些site.variables，因为语义UI中有多个）？有site.variables:，我尝试更改此默认字体@fstanis当你使用语义UI时，不应该在.css文件中添加任何内容！你不应该吗？我在语义ui中使用样式化组件，从中修改语义ui行为没有错。另一种可能性是为语义ui开发一个新的主题，但根据具体情况，这可能会有些过分，并且会破坏在同一组件中进行样式设计的好处

/*******************************
     User Global Variables
*******************************/

@importGoogleFonts : false;
@fontName          : 'fontname';

/*******************************
         Site Overrides
*******************************/

@font-face  {
    font-family: 'fontname';
    src:url('themes/basic/assets/fonts/fontname.eot'); 
    src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'),    
          url('themes/basic/assets/fonts/fontname.woff') format('woff');
}

.ui {
   font-family: 'fontname' !important;
}