首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >自定义你的网站字体

自定义你的网站字体

作者头像
傲绝
修改2023-03-08 14:02:30
修改2023-03-08 14:02:30
1.2K0
举报
文章被收录于专栏:傲绝傲绝
下载自己喜欢的字体

下载自己喜欢的字体,字体格式为.ttf

转化字体格式

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

上传字体至服务器

将转换好的.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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022 年 01 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 下载自己喜欢的字体
  • 转化字体格式
  • 上传字体至服务器
  • 插入CSS代码
  • 以上代码的url链接为字体文件路径链接,可自行更改,“ziti”为字体名称,比如ziti.ttf,ziti.woff等等,在与字体文件名称相同的前提下可随意更改英文。放在style标签之内就可以了!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档