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

Question

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

Answer 1

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

使用谷歌字体：

1. 我们需要有Semantic UI的资源，你可以到这里：

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

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

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

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

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

@fontName          : 'Roboto';

5. 最后我们执行命令glup build-css，变化会体现在文件语义/dist/semantic.css

---

使用离线字体

1. 我们需要有Semantic UI的资源，你可以到这里：

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

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

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

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

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

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

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

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

• 将@fontName 更改为'fontname'

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

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

Answer 3

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

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

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

不是那么优雅，但它确实有效。

Answer 4

这是复杂的解决方案https://stackoverflow.com/a/54208399/2374997，但如果您想要更简单的方法，您可以按照以下示例进行操作：

/*In your .css file, loaded after semantic.min.css*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
    font-family: 'Montserrat' !important;
}

Answer 5

您可以使用谷歌链接：

1. 添加到 index.html 谷歌链接。例如：

<linkhref="https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap"rel="stylesheet"/>

1. 在semantic.ui 中添加字体> site> globals > site.variables。例如：

   /*******************************
         User Global Variables
    *******************************/
    /*--FONTS--*/
   
    @pageFont: Rubik Glitch;