排行榜 统计
  • 文章总数:90 篇
  • 评论总数:39 条
  • 分类总数:5 个
  • 最后更新:11月27日

如何自定义你的网站全局字体样式

本文阅读 2 分钟
首页 网站代码 正文

看惯了千篇一律的宋体、微软雅黑等系统自带的字体,想换一个彰显个性的字体。于是在网上找了教程并在自己的博客上用了起来,感觉还不错,在这里分享给大家。(其实网上的教程非常的多,这边也只是做一个简单的搬运)。

第一步:下载字体

下载自己喜欢的字体,字体格式为.ttf,这里推荐一个字体网站非常的不错:
http://www.zhaozi.cn/s/all/ttf/

第二步:转换字体

将下载好的字体转换成.eot、 .woff、 .woff2三种格式,文件名可以是任意英文,没有特殊要求,可以根据自己的喜好命名(不要设置为中文就可以了)。这里推荐一个在线转化的网站:https://www.fontke.com/tool/convfont/

第三步:上传字体

将转换好的.eot、 .woff、 .woff2三种格式字体上传到自己网站任何位置,只要和后面的代码路径一致就可以了。

第四步:调用代码

打开网站/博客主题CSS文件里面的style.css文件(不同程序命名可能不一样,请自行查找,主题是min.css),在最下面(位置没有固定要求)放入以下代码

@font-face {
  font-family: 'abcd';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), 
         url(.../字体路径/abcd.woff2) format("woff2"),
         url(.../字体路径/abcd.woff) format("woff"),
         url(.../字体路径/and.eot) format("embedded-opentype"),
         url(.../字体路径/abcd.svg) format("svg");
  font-display: swap; 
}
body {
    font-family: abcd;
}

说明

以上代码的“abcd”为字体名称,在与字体文件名称相同的前提下可随意更改英文,Joe主题可直接在后台-主题外观-设置主题-公共设置-自定义CSS放入代码即可!

本文来自投稿,不代表本站立场,如若转载,请注明出处:https://bk.11awz.cn/28.html
-- 展开阅读全文 --
一句命令绕过宝塔面板强制绑定账号
« 上一篇 04-24
网站禁用F12 禁止调试代码方法
下一篇 » 04-24

发表评论

成为第一个评论的人

作者信息

动态快讯

换一换
    请配置好页面缩略名选项

热门文章

标签TAG

热评文章