博客更换新字体(赋教程)

618天前 · 拾枝杂谈 · 86次阅读

前言

奶糖的博客因为一开始就是利用的别人的主题,所以自带了一定的字体样式,就是奶糖更换之前的,但是近期奶糖在网上冲浪时见到了奶糖现在正在使用的字体(类似),加之奶糖在学习中对css也有了些许的认识,所以就打算为自己的博客更换一个新的主题。话不多说,就开始教程吧

教程(以原版typecho为例)

  1. 下载字体

到一些字体官网中下载即可(TTF,OTF,WOFF,WOFF2,EOT,SVG格式都行,可互相转换)
这里奶糖用到的字体下载网站是网站地址

  1. 转换字体格式

理论上讲使用一种浏览器支持的格式即可,不过浏览器多样,且不是所有格式都支持(如下表所示)
支持表
可以看到只有OTF/WOFF支持的浏览器较多,使用选其中一种即可,不过其实也可以选择都选,利用格式转换网站可以轻松将这些格式互相转换字体格式转换
奶糖是自己将所有的格式都转换了出来。

  1. 存放字体文件

一般可以选择在根目录新建一个名为fonts的文件夹进行存放,当然位置也可以随意,要记住的就是文件路径!!!(很重要╰(‵□′)╯),存档时也要注意后缀及文件名,建议取一样的便于后续的操作

  1. 更改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:'字体名称' 
}

如同所示
演示
然后保存即可

  1. 查看网页

这时候字体就发生变化啦
如果没有更换字体的话,尝试刷新网页或者清理浏览器缓存,如果还不可以可能是浏览器不支持(见上文所说的浏览器支持图)。所以还是建议将每种格式都来一个.

👍 0

none

最后修改于178天前

目录

avatar

milkcandy

24

文章数

59

评论数

5

分类