站点美化|自定义站点字体
阅前提示
本文方法已知适用于solitude主题、butterfly及其二次开发主题,不保证其他主题可用性,其他主题请自行判断
请务必在选择使用字体前确认该字体已开源且可供个人使用/商用,如因下载使用非开源字体、商用已标明“不可商用”的字体等原因导致的侵权赔偿问题我方概不负责
自定义字体步骤
以下教程请根据实际情况选择
配置css文件
在custom.css文件内新增以下内容
1 | @font-face { |
在博客目录/source/css
文件夹下新增custom.css
文件,如source目录下无css文件夹请先新增文件夹
在文件内写入以下内容
1 | @font-face { |
上述属性定义
- font-family属性值中使用webfont来声明使用的是服务器端字体,即设置文本的字体名称。
- src属性值中首先指定了字体文件所在的路径。
- format声明字体文件的格式,可以省略文件格式的声明,单独使用src属性值。
- font-style:设置文本样式。取值:normal:不使用斜体;italic:使用斜体;oblique:使用倾斜体;inherit:从父元素继承。
- 支持格式:*.eot(老版本IE),*.otf,*.ttf,*.woff,*.woff2(推荐)
在主题配置文件中引入字体
在主题配置文件中找到字体引入部分,此处以_confug.solitude.yml
与_config.butterfly.yml
为例
在对应配置的最前面写上你的自定义字体名称
1 | font: |
1 | # Global font settings |
在主题配置文件中引入css文件
此处以solitude
主题配置文件为例,其他主题请自行适配
如此前已引入该文件则无需重新引入
1 | extends: |
本地启动hexo进行预览
1 | hexo cl; hexo s |
其它
如果您找到了他人公开的在线字体链接,可将该链接写入css文件中:
1 | /* 字体文件地址(相对或者绝对路径都可以) */ |
的括号内,随后重新部署即可查看
额外教程
因为很多站长(包括我自己)都是把hexo博客托管在vercel的,如果使用本地引入字体文件的方式可能会导致字体文件的路径流量激增,严重的甚至还可能导致vercel服务超量封号。因此我们还可以考虑github
+cloudflare pages
的形式引入字体文件。具体操作方式如下:
- 在github新建一个仓库,起一个喜欢的、合适的名字
- 将字体文件上传至对应仓库(因该仓库仅作加载字体用途,为了不使用git上传可在创建时勾选“创建一个readme.md文件”)
- 在cloudflare pages处新建项目,找到自己对应的github仓库
- 无需配置任何环境变量,直接确认部署
- 访问
https://默认分配域名/文件路径/字体文件名.文件格式
链接,如链接正确则可能会触发自动下载 - 将对应链接写入css文件的url引入括号内
- 部署,查看效果
注意事项
- 上述步骤已默认您有cloudflare账号,且知晓cloudflare pages的新建位置。
- 直接访问cloudflare默认分配域名无任何内容为正常现象,可放心使用
- 如在github仓库将字体文件直接上传至根目录(外部无嵌套文件夹),则您访问对应链接时只需输入
https://默认分配域名/字体文件名.文件格式
即可 - 也可绑定自己的域名进行引入,由于此配置并非必要,因此不再赘述
- 感谢您的赞赏
赞赏名单
因为有你们,让我更加有创作的动力
本文是原创文章,采用CC BY-NC-SA 4.0协议,完整转载请注明来自❖星港◎Star☆
评论 ()