请注意,本文编写于 2412 天前,最后修改于 1442 天前,其中某些信息可能已经过时。
好久没管过自己的博客了,百度收录都掉完了QAQ,只不过最近打算回来重新做,这次应该会认真那么一丢丢ORZ。
大致情况就是给博客换了Handsome主题,价格55感觉是非常值得的(购买链接可以看底部版权栏有作者的博客),还有作者的售后群,这次就是有用户在售后群讨论博客字体的问题,我大致看了下代码经测试该方法有效。
首先我们打开相关主题目录下/assets/css/文件夹找到font.css,打开该文档内容如下:
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../fonts/sourcesanspro/sourcesanspro-light.woff') format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('../fonts/sourcesanspro/sourcesanspro.woff') format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('../fonts/sourcesanspro/sourcesanspro-bold.woff') format('woff');
}
通过学习以上代码我们可以了解到主题的相关字体文件存在于主题目录下的/fonts目录,同理,我们将自己的字体文件上传到该目录下,同时在font.css文件末尾添加:
@font-face {
font-family: '自己的字体名,可自定义,建议纯英文';
font-style: normal;
src: url('../fonts/自己刚才上传的字体文件名') format('自己的字体类型建议woff或woff2,如果不是就用转换工具转换一下');
添加完成之后保存并更新css文件,然后在到后台的主题设置->开发者设置->自定义CSS中添加:
body{font-family: '刚才在font.css文件中定义的字体名';}
这样刷新页面应该就可以看到全局的字体替换效果,当然播放器的字体还需要在handsome.min.css中修改一下播放器的字体设置,大致方法是打开该文件搜索
font-family:Arial,Helvetica,sans-serif;
将其修改为
font-family: '刚才在font.css文件中定义的字体名';
再保存并更新css文件即可。
以上就是handsome主题修改全局字体的相关教程,其实其他任何主题修改字体都是类似的操作,如果没有后台自定义CSS设置和font.css也可以在主题的header文件中找到</head>
标签,并在此标签之前添加<style></style>
自定义样式标签,标签内容可以参考上文我们添加在font.css和后台自定义css的内容。
附上几个在线字体转换网站 >Convertio
26 条评论
用你的办法成功了。谢谢分享
老哥 全局字体颜色咋改
后台自定义css输入body {coclo:#ffffff}
就右侧栏和文章字体变了 左侧栏没反应
可以用审查元素功能看一下对应区块的css class,然后后台添加对应的类选择器名称
为啥就文章字体颜色变了
博主你好,我想问一下,怎样只修改博客首页的站名字体,而其他的字体不变,谢谢。
.bg-light lter b-b wrapper-md{font-family: '刚才在font.css文件中定义的字体名';}
已解决,十分感谢
诶诶,大佬,用#postpage{color:#255;}字体颜色改是改了,但是超链接,引用啥的还是白色,要改什么文件鸭?
超链接颜色需要修改主题CSS文件/handsome/assets/css/features/coolopacity.min.css中的a:hover{color:#fff;border-bottom-color:#fff;}的颜色定义部分,引用则是code{color:#fff;background-color:rgba(255,255,255,.3)}部分
有一个问题,就是网上找到的字体包都非常大,几MB,如果直接作为网站字体,每次都要加载很长时间,严重拖慢了加载速度。问一下博主知不知道怎么压缩到几十k,handsome原装字体才26k。。。
压缩的话可以考虑一下删除字体文件中的不常用汉字,当然还有一种方法就是动态生成字体文件,根据当前网页上出现的汉字动态生成字体文件调用,这个的话再某些字体版权网站有相关接口
已解决,再次的thanks。
博主,问一下,怎么更改文章内容字体大小啊,默认的是14号。现在是只能在标题后点击那个T,会改变,不过刷新一下就又变回去了。
纠一下错,是:#post-content {
font-size:200px;
}
正在看您的这篇改文章字体的博文,尝试修改呢,有卡顿的地方的话再来贵站咨询啊!(☆ω☆)
问题已解决,谢谢啦!
可以后台自定义CSS: .post-content {font-size:20px};设置大小
https://blog.awjds.cn/archives/106/ 这是不是搬运的你的文章的,而且没标明来源,偶遇到的。
博主,我觉得你对字体更改这块挺了解的。想问一下:怎么是博客的字体颜色加重,也就是让黑色加重,我觉得默认的看起来不是很舒服。
是修改字体颜色还是增加字体阴影修改?
http://www.ilwwj.cn/ 就是像这个里的文章字体一样。我的andylhl.cn ,我觉得太浅了
字体的颜色,想给为这个 #000
后台自定义CSS添加#postpage{color:#000;}即可