更改字体
更改字体主要通过引入css实现,具体的代码如下所示:
@font-face{ |
其中@font-face
相当于创建一个字体族,然后下边body
部分是在应用字体族,那个名字其实就是在前边创建的字体的名字。
通过在网络上的查找,我首先选择使用的是Robot字体,这个字体族写的英文字体相当漂亮:
Robot字体本身是一款非常漂亮的英文字体,Roboto-Medium 字体被广泛用于广告、海报、画册、包装的设计及印刷中。
考虑到该字体并不支持中文形式,因此在中英文混排时看起来不是那么美观,出于这点考虑,我又加入了自己比较喜欢的一款思源字体来作为中文字体:
二者混排的效果整体来看还算满意,这也本网站当前的显示效果。
另外在寻找字体时我在谷歌字体上发现了一款比较美观的中文字体,但由于该字体和Robot字体混排大小不太美观遂没有采用:
这里拿标签的显示效果做一个说明,可以看出该字体的英文效果不是很让人满意。
最后修改完成后的css代码为:
@font-face { |
其中body
部分放置多个字体的作用是当所引入的字体在浏览器页面不存在时,会自动加载后边的字体,这也是实现中英混排的逻辑,相当于同时加载Robot字体和思源字体。
另外考虑到一般情况下下载的字体文件为otf或者ttf格式,这两种格式的字体文件都比较大,为了加载方便一般会转化为woff格式,配置过程中我用到的两个转换网站是:
ttf转woff
otf转woff
思源字体的效果一般(主要是因为背景颜色比较浅,用不加粗的字体会看不清楚),最后选择了用微软雅黑字体做搭配,以后再找一个能够搭配Robot的字体的中文字体。😭
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小明的博客!
评论