抱歉,昨晚博客丑死了!在优化主题字体ing

之前关注的一位博主@罗磊的博客,他使用自己二次开发的主题。我很喜欢他的主题,但由于我的文章并没有太多照片,是一个以文字为主的博客,不太喜欢在首页显示图片列表,因此打算自己开发一个主题,考虑到官方的默认主题Casper非常适合文字博客,因此进行了汉化处理@主题地址,使之适应国人审美观感,同时修改了作者信息页的Facebook、Twitter图标,增加了微博、知乎、Github、Bilibili等图标。

一直以来想更换Casper主题的字体“sanself”,今晚动手了。

GoGoGo

主题使用矢量图标库的开源字体-“思源黑体”,阿里巴巴矢量图标库是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。并且还贴心地提供字体服务。

首先介绍一下如何使用它的字体:
1、登陆阿里巴巴矢量图标库,(可直接使用Github账号登陆)
2、在导航栏处找到在线字体,点击进入。
3、一共有六种字体选择,分细、常规、粗等不同字体线粗,本主题使用常规线粗,font-weight设置为500。

alt

4、移动鼠标到相应的字体,将会显示隐藏的资源调用链接,在线引用、本地下载两种方式。
5、推荐使用在线引用,阿里云的CDN还是挺快的,不必担心影响网站速度。

简要介绍下如何使用字体
第一步:使用font-face声明字体(即复制字体引用代码到主题的CSS文件开头处)

@font-face {
    font-family: 'webfont';(定义字体名称)
    src: url('webfont.eot'); /* IE9*/
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

可以在平台上直接获取到cdn地址替换。由于cdn地址以//开头,因此使用cdn地址时,请确保demo页在某个服务里面。直接本地以file形式打开是无法访问//开头的cdn的,如确有必要请加上http。

第二步:初始化webfont的样式

在body处添加以下内容:
body{
    font-family: "webfont" !important;
    font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.1px;
    -moz-osx-font-smoothing: grayscale;
}

第三步:使用webfont的样式

H1{
    font-family:"webfont";
}

官方教程:webfont使用帮助

后续

花了点时间更换了字体。

但!由于官方Casper主题使用rem作为大小标准,更换字体后,出现了字体过大的影响,不够美观,优化大小后,发现,整个主题的rem比例全部都需要修改一番才能解决美观问题,因为,margin、padding等也存在大小不协调问题。

可是,今晚时间不多......

我要洗澡睡觉了,我是一个不熬夜的程序员哦,戛,晚安啦,明天早起优化字体大小。

等待后续哦......

(抱歉啦,主题那么丑,扔下它一整个晚上)


早上8点醒来,玩了一会儿王者农药、部落冲突后,9点起床,开始着手优化rem大小。

如果把CSS文件从头看下来进行优化,花费的时间是不划算的,因此我采取了“用浏览器查看源代码,定位标签,逐个优化”的方法。

花了一个多小时,终于优化好了,大小协调了很多。