使用@ font-face更改semantic-ui中的默认字体

Question

我想用@ font-face更改semantic-ui默认字体但不管......

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

我尝试将其字体与其他自定义css文件一起添加但不起作用

body{
    padding: 0;
    margin: 0;
}
#tabs{
    padding: 0;
}
#tabs ul{
    z-index: 999;
    position: fixed;
    width: 100%;
}
.ui-tabs .ui-tabs-panel {
    padding: 50px 0 0 0;
}

Answer 1

我知道使用Google字体或脱机字体来更改字体的两种方法：

使用Google字体：

1. 我们需要拥有语义UI 的资源，您可以在此处获取：

box's build blog

1. 需要在site.variables

中创建文件semantic/src/site/globals/

2. 我们在https://semantic-ui.com/introduction/getting-started.html搜索最喜欢的来源，然后复制名称。

3. 在文件site.variables中，将字体名称添加到变量@fontName中，如下所示：

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

@fontName          : 'Roboto';

1. 最后，我们执行命令glup build-css，所做的更改将反映在文件语义/dist/semantic.css
中

---

使用离线字体

1. 我们需要拥有语义UI 的资源，您可以在此处获取：

https://fonts.google.com/

1. 需要在site.variables

中创建文件semantic/src/site/globals/

2. 在文件site.variables中，我们将变量@importGoogleFonts添加为值false;

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

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

1. 需要在site.overrides

中创建文件semantic/src/site/globals /

2. 在文件site.overrides中，我们添加了font-face

/*******************************
         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');
}

1. 最后，我们执行命令gulp build-css，所做的更改将反映在文件语义/dist/semantic.css
中

---

https://semantic-ui.com/introduction/getting-started.html制作的这段视频介绍了如何从Google字体更改字体系列

@Aditya Giri

在下一期https://www.youtube.com/watch?v=cSdKA-tZEbg中，说明如何使用离线字体

@jlukic

致谢

Answer 2

您可以执行以下操作：

• 将以下内容添加到.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导入任何字体

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

Answer 3

这是一个老问题，但是我只想添加一件事。

由于所有语义UI元素都继承了ui类，因此您可以这样做：

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

不太优雅，但是可以。