自定义你的网站字体

    2,014

下载自己喜欢的字体

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


转化字体格式

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


上传字体至服务器

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


插入CSS代码


@font-face {
  font-family: "ziti";
  src: url("https://你的文件路径/ziti.woff2") format("woff2"),
       url("https://你的文件路径/ziti.woff") format("woff"),
       url("https://你的文件路径/ziti.ttf") format("truetype"),
       url("https://你的文件路径/ziti.eot") format("embedded-opentype"),
       url("https://你的文件路径/ziti.svg") format("svg"),
       url("https://你的文件路径/ziti.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
font-display: swap;
}
body{
    font-family: 'ziti'
} 
;
以上代码的url链接为字体文件路径链接,可自行更改,“ziti”为字体名称,比如ziti.ttf,ziti.woff等等,在与字体文件名称相同的前提下可随意更改英文。放在style标签之内就可以了!
Comments | 4 条评论
  • 橙梓

    链接跳转的都是其他的博客,那个字体网站打开满眼看过去全是收费字体

    • 战东海

      @橙梓 现在好来主要免费可商用的太少

  • 小熊

    感谢大佬,折腾一下钉钉进步体

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息