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

Question

我想用@ font-face更改语义UI默认字体，但是无论如何...

我尝试更改较少的文件（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';
}

Answer 1

我知道两种更改字体的方法，使用谷歌字体或离线字体：

使用谷歌字体：

1. 我们需要有语义UI的资源，你可以在这里获取：

https://semantic-ui.com/introduction/getting-started.html

2. 它需要创建的文件site.variables中semantic/src/site/globals/

3. 我们在https://fonts.google.com/ 上搜索我们最喜欢的来源并复制名称。

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

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

@fontName          : 'Roboto';

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

使用离线字体

1. 我们需要有语义UI的资源，你可以在这里获取：

https://semantic-ui.com/introduction/getting-started.html

2. 它需要创建的文件site.variables中semantic/src/site/globals/

3. 在文件中，site.variables我们添加@importGoogleFonts具有值的变量false；

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

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

4. 它需要创建的文件site.overrides中semantic/src/site/globals /

5. 在文件中，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');
}

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

这个由@Aditya Giri制作的视频解释了如何从谷歌字体改变字体系列

https://www.youtube.com/watch?v=cSdKA-tZEbg

在下一期@jlukic 解释如何使用离线字体

https://github.com/Semantic-Org/Semantic-UI/issues/1521

问候

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

• 在semantic的site.min.css之前导入上面的代码

• 将@fontName更改为“fontname”

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

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