自定义你的网站字体

2023-03-08 14:02:30 浏览数 (1)

下载自己喜欢的字体

下载自己喜欢的字体,字体格式为.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代码
代码语言:javascript复制
@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://cloud.tencent.com/developer/article/2234196

0 人点赞