字体更改
更改字体
更改字体主要通过引入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
思源字体的效果一般（主要是因为背景颜色比较浅，用不加粗的字体会看不清楚），最后选择了用微软雅黑字体做搭配,以后再找一个能够搭配Robot的字体的中文字体。😭
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-07-09，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
