更改字体

更改字体主要通过引入css实现，具体的代码如下所示:

@font-face{
font-family: '字体名字';

src: url('/font/文件名字.ttf') format("truetype");
}

body {
    font-family: '字体名字';
}

其中@font-face相当于创建一个字体族，然后下边body部分是在应用字体族，那个名字其实就是在前边创建的字体的名字。
通过在网络上的查找，我首先选择使用的是Robot字体，这个字体族写的英文字体相当漂亮:

Robot字体本身是一款非常漂亮的英文字体，Roboto-Medium 字体被广泛用于广告、海报、画册、包装的设计及印刷中。
考虑到该字体并不支持中文形式，因此在中英文混排时看起来不是那么美观，出于这点考虑，我又加入了自己比较喜欢的一款思源字体来作为中文字体:

二者混排的效果整体来看还算满意，这也本网站当前的显示效果。
另外在寻找字体时我在谷歌字体上发现了一款比较美观的中文字体，但由于该字体和Robot字体混排大小不太美观遂没有采用:

这里拿标签的显示效果做一个说明，可以看出该字体的英文效果不是很让人满意。
最后修改完成后的css代码为:

@font-face {
    font-family: 'Robot';
    src: url('/font/Roboto-Medium.ttf') format("truetype");
    /* src: url('/font/ZiTiChuanQiXueJiaHei-FenSiMianFei-2.woff') format('woff'); */

}
@font-face {
    font-family: 'ZiTiChuanQiXueJiaHei';
    src: url('/font/ZiTiChuanQiXueJiaHei-FenSiMianFei-2.woff') format('woff');
    font-size: 4em;
    
}
@font-face {
    font-family: 'SourceHanSerifSC-Light';
    src: url('/font/SourceHanSerifSC-Light.woff') format("woff");
    
}
body {
    font-family: 'Robot','SourceHanSerifSC-Light','ZiTiChuanQiXueJiaHei',"Microsoft YaHei", sans-serif;
}

其中body部分放置多个字体的作用是当所引入的字体在浏览器页面不存在时，会自动加载后边的字体，这也是实现中英混排的逻辑，相当于同时加载Robot字体和思源字体。
另外考虑到一般情况下下载的字体文件为otf或者ttf格式，这两种格式的字体文件都比较大，为了加载方便一般会转化为woff格式，配置过程中我用到的两个转换网站是:
ttf转woff
otf转woff