前言
奶糖的博客因为一开始就是利用的别人的主题,所以自带了一定的字体样式,就是奶糖更换之前的,但是近期奶糖在网上冲浪时见到了奶糖现在正在使用的字体(类似),加之奶糖在学习中对css也有了些许的认识,所以就打算为自己的博客更换一个新的主题。话不多说,就开始教程吧
教程(以原版typecho为例)
- 下载字体
到一些字体官网中下载即可(TTF,OTF,WOFF,WOFF2,EOT,SVG格式都行,可互相转换)
这里奶糖用到的字体下载网站是网站地址
- 转换字体格式
理论上讲使用一种浏览器支持的格式即可,不过浏览器多样,且不是所有格式都支持(如下表所示)
可以看到只有OTF/WOFF支持的浏览器较多,使用选其中一种即可,不过其实也可以选择都选,利用格式转换网站可以轻松将这些格式互相转换字体格式转换
奶糖是自己将所有的格式都转换了出来。
- 存放字体文件
一般可以选择在根目录新建一个名为fonts的文件夹进行存放,当然位置也可以随意,要记住的就是文件路径!!!(很重要╰(‵□′)╯),存档时也要注意后缀及文件名,建议取一样的便于后续的操作
- 更改css样式
以原版typecho为例可以在admin/css/(依次点击admin和css)中找到style.css(css样式文件),打开并修改
注:如若有主题等,一般需要单独到主题的css里进行更改,靠各位自行寻找啦
主要的来啦,修改css,在style.css文件的最后加入
@font-face {
font-family: "为你的字体命名";
src: url(写入刚刚的文件路径) format("woff2"),/*填入woff2格式文件,如果没有可以不写这条,同下,但必须有一种。
url(写入刚刚的文件路径) format("woff"),/*woff格式
url(写入刚刚的文件路径) format("truetype"),/*ttf格式
url(写入刚刚的文件路径) format("embedded-opentype"),/*eot格式
url(写入刚刚的文件路径) format("otf");/*otf格式
url(写入刚刚的文件路径) format("svg");/*svg格式
}
如图所示
然后在style.css文件中找到body中的font-family:,将刚刚的命名加入其中(越靠前优先级越高)
如果找不到,则可以直接在结尾加入下方代码
body {
font-family:'字体名称'
}
如同所示
然后保存即可
- 查看网页
这时候字体就发生变化啦
如果没有更换字体的话,尝试刷新网页或者清理浏览器缓存,如果还不可以可能是浏览器不支持(见上文所说的浏览器支持图)。所以还是建议将每种格式都来一个.