提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  系统

当前栏目

自定义你的网站字体

网站 自定义 字体
2023-06-13 09:15:31 时间

下载自己喜欢的字体

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

转化字体格式

将下载好的字体转换成.eot、 .woff、 .woff2三种格式，文件名可以是任意英文，没有特殊要求，可以根据自己的喜好命名（不要设置为中文就可以了）。转化的网站：https://www.fontke.com/tool/convfont/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标签之内就可以了!

原文地址：https://blog.ascv.cn/archives/22.html

相关文章