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

我想用@ 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';
}

最佳答案

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

使用Google字体:

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

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

需要在site.variables中创建文件semantic/src/site/globals/

我们在https://fonts.google.com/中搜索我们最喜欢的来源，然后复制名称。

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

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

@fontName          : 'Roboto';

最后我们执行命令glup build-css，更改将反射(reflect)在文件语义/dist/semantic.css

中


使用离线字体

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

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

需要在site.variables中创建文件semantic/src/site/globals/

在site.variables文件中，我们添加变量@importGoogleFonts和值false；

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

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

需要在site.overrides中创建文件semantic/src/site/globals /

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

最后我们执行命令gulp build-css，更改将反射(reflect)在文件语义/dist/semantic.css

中


@Aditya Giri制作的此视频介绍了如何从Google字体更改字体系列

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

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

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

问候