前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >怎么更换网站字体

怎么更换网站字体

作者头像
洛叶的Blog
发布2023-04-17 14:15:30
发布2023-04-17 14:15:30
1.6K00
代码可运行
举报
文章被收录于专栏:洛叶的Blog洛叶的Blog
运行总次数:0
代码可运行

好久之前就想把主题字体换了,但是一直懒动手 刚好之前有人问我这个问题那我就讲一下

第一步

首先需要准备好字体,字体大家自己百度找一下就行了(字体不建议文件太大的) 其实只要改一下css就好了,一般都是在style.css,没有css文件就自己创建一个 这里我就以Typecho示例,Typecho这样的程序css都在主题里面,找到主题文件夹就好了 之后打开自己的css文件夹打开style.css或者其他css都可以,加上如下代码 字体文件格式可以自己转码,一般woff、ttf、otf、svg四种格式已经可以兼容市面上99%的浏览器了

代码语言:javascript
代码运行次数:0
复制
@font-face{
font-family: 'typeface';
src:  url('字体Url');
src:  url('字体Url');
src:  url('字体Url');
src:  url('字体Url');
    }

注意:字体文件太大会影响网站访问速度,可以托管到其他CDN,例如jsdelivr、oss之类的对象存储

第二步(将字体css代码引入)

如果需要全局字体就直接在head引入

代码语言:javascript
代码运行次数:0
复制
font-family: 'typeface';

局部的话就在head添加

代码语言:javascript
代码运行次数:0
复制
p.typeface{font-family:"typeface;}

那么在p元素加上class选择器对需要的内容使用对应字体,示例如下

代码语言:javascript
代码运行次数:0
复制
这是一段字体测试的段落
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第一步
  • 第二步(将字体css代码引入)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档