使用@ font-face更改语义UI中的默认字体 [英] change default font in semantic-ui with @font-face

问题描述

我想用@ font-face更改语义UI默认字体，但是没关系...

i want to change semantic-ui default font with @font-face but no matter...

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

i tried change in less file(site.variables) but I do not know how change it

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

i tried add my font with other custom css file but it not work

@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字体或离线字体：

I know two ways to change font-face, using google fonts or offline fonts:

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

1. We need to have the resources of Semantic UI, you can get here:

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

1. 创建文件 site.variables 在 semantic / src / site / globals /

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

We search for the source that we like most at https://fonts.google.com/ and copy the name.

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

In the file site.variables we add the name of the font to the variable @fontName as follows:

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

@fontName          : 'Roboto';

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

中

1. Finally we execute the command glup build-css, the changes will be reflected in the file semantic /dist/semantic.css

---

使用离线字体

---

Using offline fonts

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

1. We need to have the resources of Semantic UI, you can get here:

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

1. 创建文件 site.variables 是必需的在 semantic / src / site / globals /

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

In the file site.variables we add the variable @importGoogleFonts with the value false;

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

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

1. 创建 semantic / src / site / globals /

在文件 site.overrides 中，添加我们的字体

In the file site.overrides we add our 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

1. Finally we execute the command gulp build-css, the changes will be reflected in the file semantic /dist/semantic.css

---

此视频由 @ Aditya Giri 解释如何从Google字体更改字体系列

---

This video maked by @Aditya Giri explain how change font family from google fonts

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

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

In the next issue @jlukic explain how use offline fonts

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

问候

这篇关于使用@ font-face更改语义UI中的默认字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！