使用Semantic UI 导致网站加载速度很慢的解决方法

原因：Semantic UI 默认使用的是谷歌提供的字体，并且是直接使用了谷歌的官方链接。由于大家都知道的原因，谷歌网站在国内访问速度很差，甚至根本无法访问，还有就是可能会在离线环境下使用 Semantic UI，不能总是依赖于在线字体，所以需要对 Semantic UI 的源文件进行一下手动修改。

解决方法：

从开头开始说

1. 下载并安装 node.js

   这一步主要是为了安装npm，如果有了npm就跳过这一步

2. 安装 Gulp

sudo npm install -g gulp

3. 下载Semantic UI

首先找到一个合适的空文件夹，这里用来放Semantic文件，然后命令行cd到该空文件目录下
安装的时候一路默认选第一个就行，切记不要一直按回车，一定要选第一个。原因是有几个选项是没有默认帮你选好的，如果一直按回车会导致那个项目你啥都没选，就会报错。

sudo npm install semantic-ui --save

以上两步过程中如果出现current user (“nobody”) does not have permission to access…情况可以使用npm -g config set user root命令，来设置user

4. 找到并用文本编辑器打开源码中的文件： .\src\themes\default\globals\site.variables；

cd semantic\src\themes\default\globals

sudo vim site.variables

如果你没打开错的话，文件开头的20行你会找到这两个选项：
找到@importGoogleFonts 将它的值修改为 false

解释：这个就是是否启用谷歌字体的地方，罪魁祸首

找到@fontName 将单引号里的值修改为 Microsoft YaHei

解释：不用谷歌字体了，字体换成微软雅黑

5. 编译Semantic UI

回到semantic目录下编译，这里就用到刚刚装好的gulp

gulp build

6. 编译好了之后，获得本地文件semantic\dist，这里面就是编译好的semantic本地文件，里面有css和js
7. 如果想使用这个本地文件，那么可以直接把dist文件放到放静态资源的目录下。例如我打算使用SpringBoot框架写前端，我就把dist放到resource/static/semantic/dist下。然后就可以愉快的使用了~